diff options
Diffstat (limited to 'files/tr/web/api')
39 files changed, 6785 insertions, 0 deletions
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> |