{"id":5085,"date":"2019-11-25T18:37:45","date_gmt":"2019-11-25T15:37:45","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=5085"},"modified":"2019-11-25T20:40:11","modified_gmt":"2019-11-25T17:40:11","slug":"7-3-javascript-kodlama-standartlari-ve-en-iyi-javascript-pratikleri","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/7-3-javascript-kodlama-standartlari-ve-en-iyi-javascript-pratikleri\/","title":{"rendered":"7.3 JavaScript Kodlama Standartlar\u0131 ve En \u0130yi JavaScript Pratikleri"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#JavaScript_Kodlama_Standartlari\"><span class=\"toc_number toc_depth_1\">1<\/span> JavaScript Kodlama Standartlar\u0131<\/a><ul><li><a href=\"#Bosluklar\"><span class=\"toc_number toc_depth_2\">1.1<\/span> Bo\u015fluklar<\/a><\/li><li><a href=\"#Objects_8211_JavaScript_Nesneleri\"><span class=\"toc_number toc_depth_2\">1.2<\/span> Objects &#8211; JavaScript Nesneleri<\/a><\/li><li><a href=\"#Dizi_ve_Fonksiyonlari_Cagirma\"><span class=\"toc_number toc_depth_2\">1.3<\/span> Dizi ve Fonksiyonlar\u0131 \u00c7a\u011f\u0131rma<\/a><\/li><li><a href=\"#Noktali_Virgul\"><span class=\"toc_number toc_depth_2\">1.4<\/span> Noktal\u0131 Virg\u00fcl (;)<\/a><\/li><li><a href=\"#Satir_Basi_ve_Satir_Sonu\"><span class=\"toc_number toc_depth_2\">1.5<\/span> Sat\u0131r Ba\u015f\u0131 ve Sat\u0131r Sonu<\/a><\/li><li><a href=\"#Kod_Bloklari_ve_Suslu_Parantezler\"><span class=\"toc_number toc_depth_2\">1.6<\/span> Kod Bloklar\u0131 ve S\u00fcsl\u00fc Parantezler<\/a><\/li><li><a href=\"#Cok_Satirli_Ifadeler\"><span class=\"toc_number toc_depth_2\">1.7<\/span> \u00c7ok Sat\u0131rl\u0131 \u0130fadeler<\/a><\/li><li><a href=\"#Metotlarin_Zincirleme_Cagirilmasi\"><span class=\"toc_number toc_depth_2\">1.8<\/span> Metotlar\u0131n Zincirleme \u00c7a\u011f\u0131r\u0131lmas\u0131<\/a><\/li><li><a href=\"#Const_ve_let_Kullanarak_Degisken_Olusturma\"><span class=\"toc_number toc_depth_2\">1.9<\/span> Const ve let Kullanarak De\u011fi\u015fken Olu\u015fturma<\/a><\/li><li><a href=\"#JavaScript_Global_Degiskenleri\"><span class=\"toc_number toc_depth_2\">1.10<\/span> JavaScript Global De\u011fi\u015fkenleri<\/a><ul><li><a href=\"#Genel_Kutuphaneler\"><span class=\"toc_number toc_depth_3\">1.10.1<\/span> Genel K\u00fct\u00fcphaneler<\/a><\/li><\/ul><\/li><li><a href=\"#Adlandirma_Gelenekleri\"><span class=\"toc_number toc_depth_2\">1.11<\/span> Adland\u0131rma Gelenekleri<\/a><\/li><li><a href=\"#Kisaltmalar_Acronyms\"><span class=\"toc_number toc_depth_2\">1.12<\/span> K\u0131saltmalar ( Acronyms)<\/a><\/li><li><a href=\"#JavaScript_Sinifi_Class_Olusturma\"><span class=\"toc_number toc_depth_2\">1.13<\/span> JavaScript S\u0131n\u0131f\u0131 (Class) Olu\u015fturma<\/a><\/li><li><a href=\"#Sabitler\"><span class=\"toc_number toc_depth_2\">1.14<\/span> Sabitler<\/a><\/li><li><a href=\"#Yorumlar\"><span class=\"toc_number toc_depth_2\">1.15<\/span> Yorumlar<\/a><\/li><li><a href=\"#Esitlik\"><span class=\"toc_number toc_depth_2\">1.16<\/span> E\u015fitlik<\/a><\/li><li><a href=\"#Tip_Kontrolu\"><span class=\"toc_number toc_depth_2\">1.17<\/span> Tip Kontrol\u00fc<\/a><\/li><li><a href=\"#String_Ifadeler\"><span class=\"toc_number toc_depth_2\">1.18<\/span> String \u0130fadeler<\/a><\/li><li><a href=\"#Switch_Ifadeleri\"><span class=\"toc_number toc_depth_2\">1.19<\/span> Switch \u0130fadeleri<\/a><\/li><\/ul><\/li><li><a href=\"#En_Iyi_JavaScript_Pratikleri\"><span class=\"toc_number toc_depth_1\">2<\/span> En \u0130yi JavaScript Pratikleri<\/a><ul><li><a href=\"#Diziler\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Diziler<\/a><\/li><li><a href=\"#Nesneler_Objects\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Nesneler (Objects)<\/a><\/li><li><a href=\"#Donguler\"><span class=\"toc_number toc_depth_2\">2.3<\/span> D\u00f6ng\u00fcler<\/a><\/li><\/ul><\/li><li><a href=\"#En_Iyi_Underscorejs_Fonksiyonlari_Pratikleri\"><span class=\"toc_number toc_depth_1\">3<\/span> En \u0130yi Underscore.js Fonksiyonlar\u0131 Pratikleri<\/a><\/li><li><a href=\"#En_Iyi_jQuery_Pratikleri\"><span class=\"toc_number toc_depth_1\">4<\/span> En \u0130yi jQuery Pratikleri<\/a><ul><li><a href=\"#Temamiza_jQuery_Kutuphanesini_Ekleme\"><span class=\"toc_number toc_depth_2\">4.1<\/span> Temam\u0131za jQuery K\u00fct\u00fcphanesini Ekleme<\/a><\/li><li><a href=\"#jQuery_Kodlarinda_Isaretini_Kullanma\"><span class=\"toc_number toc_depth_2\">4.2<\/span> jQuery Kodlar\u0131nda $ \u0130\u015faretini Kullanma<\/a><\/li><li><a href=\"#jQuery_Nesnelerini_Dongusu\"><span class=\"toc_number toc_depth_2\">4.3<\/span> jQuery Nesnelerini D\u00f6ng\u00fcs\u00fc<\/a><\/li><li><a href=\"#Seciciler_Selector\"><span class=\"toc_number toc_depth_2\">4.4<\/span> Se\u00e7iciler (Selector)<\/a><\/li><li><a href=\"#Hareket_Yakalama_Event_Handling\"><span class=\"toc_number toc_depth_2\">4.5<\/span> Hareket Yakalama (Event Handling)<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n<p><strong>JavaScript<\/strong>, D\u00fcnya&#8217;da en yayg\u0131n kullan\u0131lan dilidir. WordPress de, <strong>JavaScript<\/strong> dilini yo\u011fun olarak kullanmaktad\u0131r. \u00d6zellikle <em>Gutenberg Editor\u00fc<\/em> ile birlikte bu yo\u011funluk daha da artm\u0131\u015ft\u0131r. Bu derste bahsedece\u011fimiz hususlar, bir <strong>WordPress temas\u0131 yaparken<\/strong>, kullanaca\u011f\u0131n\u0131z JavaScript kodlar\u0131n\u0131n, di\u011fer i\u00e7erik ya da eklentiler ile \u00e7ak\u0131\u015fma ya\u015famamas\u0131 i\u00e7in yapmam\u0131z gerekenlerdir.<\/p>\n\n\n\n<p>\u00d6ncelikle, WordPress&#8217;in, JavaScript kodlarken bizden bekledi\u011fi standartlar\u0131 g\u00f6relim.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"JavaScript_Kodlama_Standartlari\">JavaScript Kodlama Standartlar\u0131<\/span><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>&#8220;Ka\u00e7 farkl\u0131 ki\u015fi kodlarsa kodlas\u0131n, bak\u0131ld\u0131\u011f\u0131 zaman tek bir ki\u015fi kodlam\u0131\u015f gibi g\u00f6r\u00fcnmelidir.&#8221;<\/p><\/blockquote>\n\n\n\n<p>Yukar\u0131daki s\u00f6z, JavaScript kodlarken, belli standartlara uyman\u0131n ne demek oldu\u011funu etkili bir \u015fekilde ifade etmektedir.<\/p>\n\n\n\n<p>Burada bahsedece\u011fimiz standartlar, baz\u0131 k\u00fc\u00e7\u00fck farkl\u0131l\u0131klar d\u0131\u015f\u0131nda, <a rel=\"noreferrer noopener\" aria-label=\"jQuery-JavaScript standartlar\u0131ndan (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/contribute.jquery.org\/style-guide\/js\/\" target=\"_blank\">jQuery-JavaScript stil rehberinden<\/a> al\u0131nm\u0131\u015f standartlard\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Bosluklar\">Bo\u015fluklar<\/span><\/h3>\n\n\n\n<p>Kodlar\u0131m\u0131z\u0131n okunabilir olmas\u0131 i\u00e7in, bo\u015fluklar \u00f6nemlidir. Fakat, bo\u015fluklar\u0131 minimize etmek de, taray\u0131c\u0131lar\u0131n i\u015fini kolayla\u015ft\u0131r\u0131r ve temam\u0131z\u0131 h\u0131zland\u0131r\u0131r.<\/p>\n\n\n\n<p>Bo\u015fluk, <em>tab <\/em>tu\u015fu ile veya <em>space <\/em>tu\u015fu ile olu\u015fturulur. <em>Space <\/em>tu\u015fu ile olu\u015fturulan bo\u015flu\u011fa <em>bo\u015f karakter<\/em> denir.<\/p>\n\n\n\n<p>Bo\u015fluklar ile ilgili WordPress-JavaScript standartlar\u0131 \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Kodlar\u0131n\u0131zdaki sat\u0131r ba\u015f\u0131 girintilerini, <em>tab <\/em>tu\u015fu ile b\u0131rak\u0131n.<\/li><li>Sat\u0131r sonlar\u0131nda veya bo\u015f sat\u0131rlarda bo\u015f karakter b\u0131rakmay\u0131n.<\/li><li>Sat\u0131rlar\u0131m\u0131z 80 karakterden uzun olmamal\u0131, 100 karakteri a\u015fmamal\u0131d\u0131r. Bu kat\u0131 bir kural de\u011fildir fakat, uzun sat\u0131rlar kodumuzun karma\u015f\u0131k g\u00f6r\u00fcnmesine sebep olacakt\u0131r.<\/li><li><code>if<\/code>\/<code>else<\/code>\/<code>for<\/code>\/<code>while<\/code>\/<code>try<\/code>&nbsp;bloklar\u0131, her zaman parantezli olmal\u0131 ve birden fazla sat\u0131ra yay\u0131lmal\u0131d\u0131r.<\/li><li><code>++<\/code> ve <code>--<\/code> gibi tekli \u00f6zel karakter operat\u00f6rleri kendilerinden sonra bo\u015fluk i\u00e7eremezler.<\/li><li><code>,<\/code> ve <code>;<\/code> i\u015faretlerinden \u00f6nce bo\u015fluk olmaz.<\/li><li><code>;<\/code> bir kod ifadesinin sonland\u0131\u011f\u0131n\u0131 belirtir ve her zaman sat\u0131r\u0131n en sonunda olur.<\/li><li>JavaScript objelerinde kullan\u0131lan <code>:<\/code> i\u015faretinden \u00f6nce bo\u015fluk kullan\u0131lmaz.<\/li><li>\u00dc\u00e7l\u00fc ko\u015ful yap\u0131lar\u0131nda kullan\u0131lan <code>?<\/code> ve <code>:<\/code> i\u015faretlerinin her iki taraf\u0131nda da birer bo\u015fluk kullan\u0131l\u0131r.<\/li><li>Parantezlerin &#8211;<code>(), [], {}<\/code>&#8211; i\u00e7inde herhangi bir ifade yoksa bo\u015fluk da olmaz.<\/li><li>Dosyalar\u0131n sonunda, yeni -bo\u015f- bir sat\u0131r bulunmal\u0131d\u0131r.<\/li><li>\u00dcnlem i\u015faretlerinin (<code>!<\/code>) ard\u0131nda bir bo\u015fluk karakteri kullan\u0131lmal\u0131d\u0131r.<\/li><li>Fonksiyon g\u00f6vdeleri bir girinti i\u00e7ermelidir.<\/li><li>Sat\u0131r ba\u015f\u0131nda b\u0131rak\u0131lan bo\u015fluklar i\u00e7in <em>tab<\/em> tu\u015fu kullan\u0131lmal\u0131d\u0131r, <em>space<\/em> tu\u015fu de\u011fil.<\/li><\/ul>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Objects_8211_JavaScript_Nesneleri\">Objects &#8211; JavaScript Nesneleri<\/span><\/h3>\n\n\n\n<p>K\u0131sa bir nesne olu\u015fturacaksan\u0131z, nesneyi tek bir sat\u0131rda olu\u015fturabilirsiniz. Fakat uzun bir nesne olacaksa, her bir eleman\u0131 bir sat\u0131rda olacak \u015fekilde nesneyi sat\u0131rlara yayman\u0131z do\u011fru olacakt\u0131r. Nesne sat\u0131rlara yay\u0131l\u0131rken, ilk sat\u0131rda nesnenin ba\u015flang\u0131\u00e7 parantezinden sonras\u0131 bo\u015f b\u0131rak\u0131lmal\u0131d\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Tercih edilen\nvar obj = {\n    ready: 9,\n    when: 4,\n    'you are': 15,\n};\nvar arr = [\n    9,\n    4,\n    15,\n];\n  \n\/\/ Kabul edilebilir nesne ve diziler\nvar obj = { ready: 9, when: 4, 'you are': 15 };\nvar arr = [ 9, 4, 15 ];\n  \n\/\/ K\u00f6t\u00fc \u00d6rnek\nvar obj = { ready: 9,\n    when: 4, 'you are': 15 };\nvar arr = [ 9,\n    4, 15 ];<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Dizi_ve_Fonksiyonlari_Cagirma\">Dizi ve Fonksiyonlar\u0131 \u00c7a\u011f\u0131rma<\/span><\/h3>\n\n\n\n<p>Dizi ve fonksiyonlar\u0131 olu\u015ftururken-\u00e7a\u011f\u0131r\u0131rken-kullan\u0131rken, arg\u00fcmanlar\u0131n sa\u011f\u0131nda ve solunda birer bo\u015fluk b\u0131rak\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>array = [ a, b ];\n  \nfoo( arg );\n  \nfoo( 'string', object );\n  \nfoo( options, object[ property ] );\n  \nfoo( node, 'property', 2 );\n  \nprop = object[ 'default' ];\n  \nfirstArrayElement = arr[ 0 ];<\/code><\/pre>\n\n\n\n<p>Do\u011fru bo\u015fluk \u00f6rnekleri:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var i;\n \nif ( ko\u015ful ) {\n    bi\u015feyYap( 'bu yaz\u0131 ile' );\n} else if ( di\u011ferKo\u015ful ) {\n    ba\u015fkaBi\u015feyYap( {\n        anahtar: de\u011fer,\n        di\u011ferAnahtar: diperDe\u011fer\n    } );\n} else {\n    yoksa\u015eu( true );\n}\n \n\/\/ jQuery den farkl\u0131 olarak WordPress, ! i\u015faretinden sonra bir bo\u015fluk\n\/\/ b\u0131rak\u0131lmas\u0131n\u0131 tavsiye eder. Bu, PHP standartlar\u0131 ile de uyumluluk sa\u011flar.\nwhile ( ! ko\u015ful ) {\n    yineleme++;\n}\n \nfor ( i = 0; i &lt; 100; i++ ) {\n    nesne[ array[ i ] ] = birFonksiyon( i );\n    $( '.container' ).val( array[ i ] );\n}\n \ntry {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n} catch ( e ) {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Noktali_Virgul\">Noktal\u0131 Virg\u00fcl (;)<\/span><\/h3>\n\n\n\n<p>Her zaman elle at\u0131n. Otomatik olu\u015fturuculara g\u00fcvenmeyin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Satir_Basi_ve_Satir_Sonu\">Sat\u0131r Ba\u015f\u0131 ve Sat\u0131r Sonu<\/span><\/h3>\n\n\n\n<p>Sat\u0131r ba\u015flar\u0131 ve sat\u0131r sonlar\u0131, kodunuzun daha okunakl\u0131 olmas\u0131n\u0131 sa\u011flar. her bir fonksiyon ba\u015flang\u0131c\u0131n\u0131 di\u011ferinden bir <em>tab<\/em> i\u00e7eride, fonksiyon i\u00e7eriklerini de fonksiyonun kendisinden bir <em>tab<\/em> i\u00e7eride ba\u015flat\u0131n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>( function( $ ) {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n \n    function doSomething() {\n        \/\/ Kod ifadeleri buradan ba\u015flar\n    }\n} )( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kod_Bloklari_ve_Suslu_Parantezler\">Kod Bloklar\u0131 ve S\u00fcsl\u00fc Parantezler<\/span><\/h3>\n\n\n\n<p><code>if<\/code>,&nbsp;<code>else<\/code>,&nbsp;<code>for<\/code>,&nbsp;<code>while<\/code>, ve <code>try<\/code>&nbsp;gibi kod bloklar\u0131 ve bu bloklar\u0131n s\u00fcsl\u00fc parantezleri \u015fu \u015fekilde kodlan\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var a, b, c;\n \nif ( myFunction() ) {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n} else if ( ( a &amp;&amp; b ) || c ) {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n} else {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Cok_Satirli_Ifadeler\">\u00c7ok Sat\u0131rl\u0131 \u0130fadeler<\/span><\/h3>\n\n\n\n<p>Bazen, tek bir sat\u0131ra s\u0131\u011fmayacak kadar uzun c\u00fcmleler ile \u00e7al\u0131\u015fabiliriz. B\u00f6yle bir durumda, c\u00fcmleyi b\u00f6lerken operat\u00f6rlerden sonra b\u00f6lmek daha do\u011frdur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bad\nvar html = '&lt;p>The sum of ' + a + ' and ' + b + ' plus ' + c\n    + ' is ' + ( a + b + c ) + '&lt;\/p>';\n \n\/\/ Good\nvar html = '&lt;p>The sum of ' + a + ' and ' + b + ' plus ' + c +\n    ' is ' + ( a + b + c ) + '&lt;\/p>';<\/code><\/pre>\n\n\n\n<p>\u0130fadeler mant\u0131kl\u0131 olarak b\u00f6l\u00fcnmelidir ki daha okunakl\u0131 olsun:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Kabul edilebilir bir yeni sat\u0131ra ge\u00e7i\u015f\nvar baz = ( true === conditionalStatement() ) ? 'thing 1' : 'thing 2';\n \n\/\/ Daha iyisi\nvar baz = firstCondition( foo ) &amp;&amp; secondCondition( bar ) ?\n    qux( foo, bar ) :\n    foo;<\/code><\/pre>\n\n\n\n<p>Ko\u015fullu ifadenin ko\u015fulu \u00e7ok uzunsa, \u015f\u00f6yle yaz\u0131l\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (\n    firstCondition() &amp;&amp;\n    secondCondition() &amp;&amp;\n    thirdCondition()\n) {\n    doStuff();\n}<\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Metotlarin_Zincirleme_Cagirilmasi\">Metotlar\u0131n Zincirleme \u00c7a\u011f\u0131r\u0131lmas\u0131<\/span><\/h3>\n\n\n\n<p>Tek bir sat\u0131ra s\u0131\u011fmayacak kadar \u00e7ok metodu birbirine ba\u011flaman\u0131z gerekti\u011finde, a\u015fa\u011f\u0131daki stili kullan\u0131rs\u0131n\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>elements\n    .addClass( 'foo' )\n    .children()\n        .html( 'hello' )\n    .end()\n    .appendTo( 'body' );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Const_ve_let_Kullanarak_Degisken_Olusturma\"><em>Const<\/em> ve <em>let<\/em> Kullanarak De\u011fi\u015fken Olu\u015fturma<\/span><\/h3>\n\n\n\n<p>ES2015 ve sonras\u0131 ile kod yazarken, de\u011fi\u015fken tan\u0131mlamak i\u00e7in, t\u0131pk\u0131 <code>var<\/code> gibi <code>const<\/code> ve <code>let<\/code> ifadeleri de kullan\u0131labilir.<\/p>\n\n\n\n<p>Bir JavaScript de\u011fi\u015fkeni olu\u015fturma i\u015flemi i\u00e7in a\u015fa\u011f\u0131daki kodu inceleyiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u0130yi\nvar k, m, length,\n    \/\/ Alt metin sat\u0131rlar\u0131n\u0131 bir tab ile girintileyin\n    value = 'WordPress';\n \n\/\/ K\u00f6t\u00fc\nvar foo = true;\nvar bar = false;\nvar a;\nvar b;\nvar c;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"JavaScript_Global_Degiskenleri\">JavaScript Global De\u011fi\u015fkenleri<\/span><\/h3>\n\n\n\n<p>Global de\u011fi\u015fkenler, herhangi bir fonksiyonun i\u00e7inde tan\u0131mlanmayan de\u011fi\u015fkenlerdir. Birden \u00e7ok global de\u011fi\u015fken, dosyan\u0131n \u00fcst\u00fcnde ve aralar\u0131na virg\u00fcl konularak tan\u0131mlanabilir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Genel_Kutuphaneler\">Genel K\u00fct\u00fcphaneler<\/span><\/h4>\n\n\n\n<p>WordPress bir \u00e7ok JavaScript k\u00fct\u00fcphanesi ile birlikte gelir. Bunlardan <em>Backbone <\/em>ve <em>Underscore <\/em>gibilerine her zaman eri\u015filebilirken, jQuery k\u00fct\u00fcphanesine eri\u015fmek i\u00e7in a\u015fa\u011f\u0131daki \u00e7er\u00e7eveyi kullanmam\u0131z gerekir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>( function( $ ) {\n    \/\/ Kod ifadeleri buradan ba\u015flar\n} )( jQuery );<\/code><\/pre>\n\n\n\n<p>WordPress&#8217;in bir JavaScript nesnesi olan <em>wp<\/em>, her zaman her yerden ula\u015f\u0131labilen bir nesnedir. Bu nesneye sa\u011fl\u0131kl\u0131 bir \u015fekilde ula\u015fmak i\u00e7in a\u015fa\u011f\u0131da kodu kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Dosyan\u0131n en \u00fcst\u00fcnde, varsa \u00f6nceden ald\u0131\u011f\u0131 de\u011fer ile birlikte wp nesnesi\nwindow.wp = window.wp || {};<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Adlandirma_Gelenekleri\">Adland\u0131rma Gelenekleri<\/span><\/h3>\n\n\n\n<p>JavaScript kodlar\u0131na veya de\u011fi\u015fkenlerine verdi\u011fimiz isimler, k\u00fc\u00e7\u00fck harflerden olu\u015fmal\u0131 ve yeni bir kelimeye ba\u015flarken, kelimenin ilk harfi b\u00fcy\u00fck yaz\u0131lmal\u0131d\u0131r (<em>camel case<\/em>).<\/p>\n\n\n\n<p><strong>\u00d6rnek<\/strong>: <code>benimFonksiyonum()<\/code>, <code>var benimDegiskenim<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Kisaltmalar_Acronyms\">K\u0131saltmalar ( Acronyms)<\/span><\/h3>\n\n\n\n<p>E\u011fer bir k\u0131saltma, ba\u015f harflerin bir araya gelmesi ile olu\u015fuyorsa (<em>Acronyms<\/em>) bu k\u0131saltma b\u00fcy\u00fck harflerle yaz\u0131l\u0131r. Bunun d\u0131\u015f\u0131ndaki k\u0131saltmalar, <em>camel case <\/em>tarz\u0131nda yaz\u0131l\u0131r, fakat fonksiyon isimlerinden farkl\u0131 olarak k\u0131saltmalar\u0131n ilk harfi b\u00fcy\u00fck ba\u015flar.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da baz\u0131 k\u0131saltma \u00f6rnekleri verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \"Id\" ifadesi \"Identifier\" kelimesinin k\u0131saltmas\u0131d\u0131r:\nconst userId = 1;\n  \n\/\/ \"DOM\" ifadesi \"Document Object Model\" ifadesinin k\u0131saltmas\u0131d\u0131r:\nconst currentDOMDocument = window.document;\n  \n\/\/ Yukar\u0131daki k\u0131saltmalar ile olu\u015fturulan de\u011fi\u015fken ve s\u0131n\u0131flar \nconst domDocument = window.document;\nclass DOMDocument {}\nclass IdCollection {}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"JavaScript_Sinifi_Class_Olusturma\">JavaScript S\u0131n\u0131f\u0131 (Class) Olu\u015fturma<\/span><\/h3>\n\n\n\n<p><code>new<\/code> ifadesi ile kullan\u0131lmak \u00fczere olu\u015fturulan yap\u0131lar b\u00fcy\u00fck harf ile ba\u015flayan <em>camel case<\/em> tarz\u0131nda (<em>UpperCamelCase<\/em>) adland\u0131r\u0131l\u0131r. Bu kurala b\u00fct\u00fcn JavaScript s\u0131n\u0131flar\u0131 da dahildir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Earth {\n    static addHuman( human ) {\n        Earth.humans.push( human );\n    }\n \n    static getHumans() {\n        return Earth.humans;\n    }\n}\n  \nEarth.humans = [];<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Sabitler\">Sabitler<\/span><\/h3>\n\n\n\n<p>JavaScript sabitleri, <code>BEN_BIR_SABITIM<\/code> (<em>screaming snake case<\/em>) format\u0131nda yaz\u0131l\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Yorumlar\">Yorumlar<\/span><\/h3>\n\n\n\n<p>Tek sat\u0131rl\u0131k yorumlar \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Ben tek sat\u0131rl\u0131k bir yorumum\n\n\/\/ Ben tek sat\u0131ra s\u0131\u011fmayacak kadar uzun bir yorumum ve devam\u0131m\n\/\/ var. Ben tek sat\u0131ra s\u0131\u011fmam<\/code><\/pre>\n\n\n\n<p>\u00c7ok sat\u0131rl\u0131 bir yorum yapacaksan\u0131z <code>\/**<\/code> \u015feklinde ba\u015flars\u0131n\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/** Ben tek sat\u0131ra s\u0131\u011fmayacak kadar uzun bir yorumum ve devam\u0131m\n* Ben tek sat\u0131ra s\u0131\u011fmayacak kadar uzun bir yorumum ve devam\u0131m\n*\/<\/code><\/pre>\n\n\n\n<p>Sat\u0131r i\u00e7i yorumlar \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function foo( types, selector, data, fn, \/* SATI \u0130\u00c7\u0130 YORUM *\/ one ) {\n    \/\/ Kodlar buraya...\n}\n<\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Esitlik\">E\u015fitlik<\/span><\/h3>\n\n\n\n<p>M\u00fcmk\u00fcn olan her durumda, tipi ile birlikte e\u015fitlik ifadesi (<code>===<\/code>) ikili e\u015fitlik ifadesine (<code>==<\/code>) tercih edilmelidir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Tip_Kontrolu\">Tip Kontrol\u00fc<\/span><\/h3>\n\n\n\n<p>Bir JavaScript varl\u0131\u011f\u0131n\u0131n tipini kontrol etmek i\u00e7in tercih edilebilecek bir \u00e7ok yol vard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>String:&nbsp;<code>typeof object === 'string'<\/code><\/li><li><em>Number<\/em>:&nbsp;<code>typeof object === 'number'<\/code><\/li><li><em>Boolean<\/em>:&nbsp;<code>typeof object === 'boolean'<\/code><\/li><li><em>Object<\/em>:&nbsp;<code>typeof object === 'object'<\/code>&nbsp;veya <code>_.isObject( object )<\/code><\/li><li><em>Plain Object<\/em>:&nbsp;<code>jQuery.isPlainObject( object )<\/code><\/li><li><em>Function<\/em>:&nbsp;<code>_.isFunction( object )<\/code>&nbsp;veya <code>jQuery.isFunction( object )<\/code><\/li><li><em>Array<\/em>:&nbsp;<code>_.isArray( object )<\/code>&nbsp;veya <code>jQuery.isArray( object )<\/code><\/li><li>Element:&nbsp;<code>object.nodeType<\/code>&nbsp;veya <code>_.isElement( object )<\/code><\/li><li>null:&nbsp;<code>object === null<\/code><\/li><li><em>null <\/em>veya <em>undefined<\/em>:&nbsp;<code>object == null<\/code><\/li><li><em>undefined<\/em>:<ul><li><em>Global Variables<\/em>:&nbsp;<code>typeof variable === 'undefined'<\/code><\/li><li><em>Local Variables<\/em>:&nbsp;<code>variable === undefined<\/code><\/li><li><em>Properties<\/em>:&nbsp;<code>object.prop === undefined<\/code><\/li><li>Yukar\u0131dakilerin yerine:&nbsp;<code>_.isUndefined( object )<\/code><\/li><\/ul><\/li><\/ul>\n\n\n\n<p><em>Backbone <\/em>ve <em>Underscore <\/em>k\u00fct\u00fcphanelerinin kullan\u0131labildi\u011fi her yerde, tip kontrol\u00fc i\u00e7in <em>jQuery <\/em>k\u00fct\u00fcphanesi yerine <a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"http:\/\/underscorejs.org\/#isElement\" target=\"_blank\">Underscore.js<\/a> kullanman\u0131z tavsiye edilir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"String_Ifadeler\">String \u0130fadeler<\/span><\/h3>\n\n\n\n<p>String ifadeleri tek t\u0131rnak i\u00e7inde g\u00f6sterin.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var myStr = 'strings should be contained in single quotes';<\/code><\/pre>\n\n\n\n<p>String ifadesinin kendisinde bir tek t\u0131rnak varsa, ka\u00e7\u0131\u015f karakterini (<code>\\<\/code>) kullanal\u0131m.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ String ifadelerinde tek t\u0131rnaktan ka\u00e7\u0131\u015f:\nvar myStr = 'JavaScript\\'in ustas\u0131d\u0131r G\u00f6kalp\\'im.';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Switch_Ifadeleri\">Switch \u0130fadeleri<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131da \u00f6rnek bir switch blo\u011fu verilmi\u015ftir. Kodlardan ziyade, stiline dikkat edelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>switch ( event.keyCode ) {\n    \/\/ ENTER ve SPACE de\u011ferleri, x() fonksiyonunu tetikler\n    case $.ui.keyCode.ENTER:\n    case $.ui.keyCode.SPACE:\n        x();\n        break;\n    case $.ui.keyCode.ESCAPE:\n        y();\n        break;\n    default:\n        z();\n}<\/code><\/pre>\n\n\n\n<p>A\u015fa\u011f\u0131da, bir fonksiyon i\u00e7inde iken <em>switch <\/em>ifadesinin kullan\u0131m\u0131n\u0131 g\u00f6r\u00fcyorsunuz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function getKeyCode( keyCode ) {\n    var result;\n \n    switch ( event.keyCode ) {\n        case $.ui.keyCode.ENTER:\n        case $.ui.keyCode.SPACE:\n            result = 'commit';\n            break;\n        case $.ui.keyCode.ESCAPE:\n            result = 'exit';\n            break;\n        default:\n            result = 'default';\n    }\n \n    return result;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"En_Iyi_JavaScript_Pratikleri\">En \u0130yi JavaScript Pratikleri<\/span><\/h2>\n\n\n\n<p>A\u015fa\u011f\u0131da verilen \u00f6rnekler, tavsiye edilen kodlama stilleridir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Diziler\">Diziler<\/span><\/h3>\n\n\n\n<p>Bir dizi olu\u015fturma:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var myArray = [];<\/code><\/pre>\n\n\n\n<p>Diziyi olu\u015ftururken doldurabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var myArray = [ 1, 'WordPress', 2, 'Blog' ];<\/code><\/pre>\n\n\n\n<p>JavaScript, birle\u015fmi\u015f diziler i\u00e7ermez, birle\u015fmi\u015f diziler <em>object <\/em>(nesne) olarak olu\u015fturulur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Nesneler_Objects\">Nesneler (Objects)<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131da, bir nesne olu\u015fturma, ya da bir nesneden de\u011fer getirme stillerine \u00f6rnekler verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Bo\u015f bir nesne olu\u015fturulur\nvar myObj = {};\n\/\/ Bir nesne bir de\u011fi\u015fkene y\u00fcklenir\nvar myObj = new ConstructorMethod();\n\/\/ Bir nesneden de\u011ferler al\u0131n\u0131r\nprop = object.propertyName;\nprop = object[ variableKey ];\nprop = object['key-with-hyphens'];<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Donguler\">D\u00f6ng\u00fcler<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u0130yi &amp; Etkili:\nvar i, max;\n \n\/\/ getItemCount() gets called once\nfor ( i = 0, max = getItemCount(); i &lt; max; i++ ) {\n    \/\/ Kodlar...\n}\n \n\/\/ K\u00f6t\u00fc &amp; Muhtemelen verimsiz:\n\/\/ getItemCount() fonksiyonu her defas\u0131nda \u00e7a\u011fr\u0131lmak zorunda kal\u0131r\nfor ( i = 0; i &lt; getItemCount(); i++ ) {\n    \/\/ Kodlar...\n}<\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"En_Iyi_Underscorejs_Fonksiyonlari_Pratikleri\">En \u0130yi Underscore.js Fonksiyonlar\u0131 Pratikleri<\/span><\/h2>\n\n\n\n<p>Underscore.js k\u00fct\u00fcphanesi bir \u00e7ok a\u00e7\u0131dan i\u015fimizi kolayla\u015ft\u0131r\u0131r. A\u015fa\u011f\u0131da bu k\u00fct\u00fcphaneye ait fonksiyonlar\u0131 kullan\u0131rken uyaca\u011f\u0131m\u0131z stile bir \u00f6rnek verilmi\u015ftir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var obj = {\n    first: 'thing 1',\n    second: 'thing 2',\n    third: 'lox'\n};\n \nvar arr = _.chain( obj )\n    .keys()\n    .map( function( key ) {\n        return key + ' comes ' + obj[ key ];\n    } )\n    \/\/ Zincirden (.chain()) \u00e7\u0131k\n    .value();\n \n\/\/ Yukar\u0131daki kodlar\u0131n olu\u015fturdu\u011fu \"arr\" de\u011fi\u015fkeni \u015f\u00f6yle olur:\n\/\/ arr === [ 'first comes thing 1', 'second comes thing 2', 'third comes lox' ]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"En_Iyi_jQuery_Pratikleri\">En \u0130yi jQuery Pratikleri<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Temamiza_jQuery_Kutuphanesini_Ekleme\">Temam\u0131za jQuery K\u00fct\u00fcphanesini Ekleme<\/span><\/h3>\n\n\n\n<p>Temam\u0131za jQuery k\u00fct\u00fcphanesini eklemek demek, temam\u0131zda kullanaca\u011f\u0131m\u0131z herhangi bir <code>benim-dosyam.js<\/code> dosyas\u0131nda jQuery kullanmak demektir. Bir JS dosyas\u0131n\u0131 temam\u0131za eklerken, jQuery k\u00fct\u00fcphanesini kullanabilsin ko\u015fulu ile ekleyebiliriz. Bunun i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabiliriz:<\/p>\n\n\n\n<p><code>functions.php<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function tema_scriptleri() {\n     wp_enqueue_script( 'slider-icin', get_template_directory_uri() . '\/js\/benim-dosyam.js', array ( 'jquery' ), 1.0, true);\n}\nadd_action( 'wp_enqueue_scripts', 'tema_scriptleri' );<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, temam\u0131z\u0131n ana dizininde bulunan js klas\u00f6r\u00fcn\u00fcn i\u00e7inde olu\u015fturulmu\u015f bemim-dosyam.js dosyas\u0131n\u0131, jQuery k\u00fct\u00fcphanesi kullan\u0131m\u0131na m\u00fcsait bir \u015fekilde temaya ekler.<\/p>\n\n\n\n<p>WordPress temalar\u0131na JS dosyalar\u0131 eklemek ile ilgili detayl\u0131 bilgi i\u00e7in <a rel=\"noreferrer noopener\" aria-label=\"CSS ve JavaScript Dosyalar\u0131 Ekleme (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-12-css-ve-javascript-dosyalarini-ekleme\/\" target=\"_blank\">CSS ve JavaScript Dosyalar\u0131 Ekleme<\/a> dersimizi okuyabilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"jQuery_Kodlarinda_Isaretini_Kullanma\">jQuery Kodlar\u0131nda $ \u0130\u015faretini Kullanma<\/span><\/h3>\n\n\n\n<p>jQuery k\u00fct\u00fcphanesinin sembol\u00fc olan $ i\u015faretini bir karga\u015faya meydan vermeden kullanabilmek i\u00e7in, jQuery kodlar\u0131m\u0131z\u0131 \u015fu \u015fekilde bir \u00e7er\u00e7eve fonksiyonun i\u00e7inde yazmal\u0131y\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>( function( $ ) {\n    \/\/ Kodlar burada...\n} )( jQuery );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"jQuery_Nesnelerini_Dongusu\">jQuery Nesnelerini D\u00f6ng\u00fcs\u00fc<\/span><\/h3>\n\n\n\n<p>jQuery ile bir d\u00f6ng\u00fc olu\u015fturmak i\u00e7in sadece jQuery nesnelerini kullanabiliriz, JavaScript nesneleri i\u00e7in jQuery d\u00f6ng\u00fcleri kuramay\u0131z.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da bir jQuery d\u00f6ng\u00fcs\u00fc verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$tabs.each( function( index, element ) {\n    var $element = $( element );\n \n    \/\/ Kodlar burada...\n} );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Seciciler_Selector\">Se\u00e7iciler (Selector)<\/span><\/h3>\n\n\n\n<p>Bir HTML eleman\u0131n\u0131 se\u00e7mek i\u00e7in her defas\u0131nda se\u00e7ici kullanmak yerine bu eleman\u0131 bir de\u011fi\u015fkene y\u00fckleyip ihtiya\u00e7 halinde bu de\u011fi\u015fkeni kullanmak daha do\u011frudur. A\u015fa\u011f\u0131da, bu duruma ait \u00f6rnekler verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ K\u00f6t\u00fc \u00d6rnek\n$('.post img').addClass('theme-image');\n$('.post img').on('click', function() { \/* ... *\/ });\n\n\/\/ \u0130yi \u00d6rnek\nvar $postImage = $('.post img');\n$postImage.addClass('theme-image');\n$postImage.on('click', function() { \/* ... *\/ });<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Hareket_Yakalama_Event_Handling\">Hareket Yakalama (Event Handling)<\/span><\/h3>\n\n\n\n<p>Bir fare t\u0131klamas\u0131n\u0131 yakalamak i\u00e7in \u015fu kodu kullanmak do\u011fru de\u011fildir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ K\u00f6t\u00fc \u00d6rnek\n$('a').click( logClick );<\/code><\/pre>\n\n\n\n<p>Onun yerine, taray\u0131c\u0131n\u0131z\u0131 daha az yoran \u015fu kodu kullanmam\u0131z tavsiye edilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u0130yi \u00d6rnek\n$(document).on('click', 'a', logClick);<\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>WordPress temas\u0131nda JavaScript kodlarken dikkat etmemiz gereken durumlar a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[229,230],"class_list":["post-5085","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-javascript-kullanimi","tag-jquery-kullanimi"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=5085"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/5085\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=5085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=5085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=5085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}