jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.<\/p>\n

Y\u0131llar boyunca jQuery, web geli\u015ftiricileri i\u00e7in vazge\u00e7ilmez bir ara\u00e7 oldu. DOM manip\u00fclasyonu, olay y\u00f6netimi ve AJAX istekleri gibi karma\u015f\u0131k g\u00f6revleri basitle\u015ftirerek geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rd\u0131. Ancak modern web taray\u0131c\u0131lar\u0131n\u0131n h\u0131zla geli\u015fmesiyle birlikte, jQuery’nin sundu\u011fu pek \u00e7ok \u00f6zelli\u011fin art\u0131k taray\u0131c\u0131lar\u0131n yerel JavaScript motorlar\u0131 taraf\u0131ndan do\u011frudan ve daha verimli bir \u015fekilde desteklendi\u011fini g\u00f6r\u00fcyoruz. Bu durum, “jQuery’ye hala ihtiyac\u0131m\u0131z var m\u0131?” sorusunu g\u00fcndeme getiriyor.<\/p>\n

jQuery kullanman\u0131n getirdi\u011fi en b\u00fcy\u00fck dezavantajlardan biri, projenize ekledi\u011fi dosya boyutudur. Her ne kadar s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f ve CDN’lerden servis edilebilen k\u00fc\u00e7\u00fck bir k\u00fct\u00fcphane olsa da, her bir kilobyte mobil cihazlarda sayfa y\u00fckleme s\u00fcresi \u00fczerinde \u00f6nemli bir etki yaratabilir. Vanilla JavaScript (yani saf JavaScript) kullanmak, bu ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 ortadan kald\u0131rarak sayfa boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve dolay\u0131s\u0131yla uygulaman\u0131z\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Performans optimizasyonu g\u00fcn\u00fcm\u00fcz web d\u00fcnyas\u0131nda kritik bir \u00f6neme sahiptir ve her ge\u00e7en g\u00fcn kullan\u0131c\u0131lar daha h\u0131zl\u0131 deneyimler beklemektedir. jQuery’nin sundu\u011fu bir\u00e7ok kolayl\u0131k art\u0131k Vanilla JS’in yerle\u015fik \u00f6zellikleriyle e\u015fde\u011fer veya onlardan daha iyi hale geldi. \u00d6rne\u011fin,

querySelector<\/code> ve querySelectorAll<\/code> gibi DOM se\u00e7ici metodlar\u0131, jQuery’nin $()<\/code> fonksiyonuna benzer bir kolayl\u0131k sunarken, fetch<\/code> API’si AJAX isteklerini \u00e7ok daha modern ve esnek bir \u015fekilde ele almam\u0131z\u0131 sa\u011fl\u0131yor.<\/p>\n

Ayr\u0131ca, b\u00fcy\u00fck bir k\u00fct\u00fcphaneye olan ba\u011f\u0131ml\u0131l\u0131k, potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 veya k\u00fct\u00fcphanenin gelecekteki bak\u0131m durumunu da beraberinde getirir. Vanilla JS ile \u00e7al\u0131\u015fmak, kod taban\u0131n\u0131z \u00fczerinde tam kontrol sahibi olman\u0131z\u0131 sa\u011flar ve projenizi gereksiz d\u0131\u015f ba\u011f\u0131ml\u0131l\u0131klardan ar\u0131nd\u0131r\u0131r. Bu durum, uzun vadede projenin s\u00fcrd\u00fcr\u00fclebilirli\u011fini ve bak\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Geli\u015ftiriciler olarak, s\u00fcrekli de\u011fi\u015fen web standartlar\u0131na ayak uydurmak ve en g\u00fcncel teknolojileri benimsemek \u00f6nemlidir. Modern JavaScript ekosistemi, ES6+ \u00f6zellikleriyle birlikte \u00e7ok daha g\u00fc\u00e7l\u00fc, okunabilir ve y\u00f6netilebilir bir kod yazma imkan\u0131 sunuyor. Bu \u00f6zellikler sayesinde, eskiden jQuery ile yap\u0131lan bir\u00e7ok i\u015flem art\u0131k \u00e7ok daha zarif ve performansl\u0131 bir \u015fekilde Vanilla JS ile ger\u00e7ekle\u015ftirilebilmektedir. Mobil uyumluluk ve Progressive Web Apps (PWA) gibi konular\u0131n giderek daha fazla \u00f6nem kazand\u0131\u011f\u0131 bir d\u00f6nemde, performans\u0131 ve ba\u011f\u0131ms\u0131zl\u0131\u011f\u0131 \u00f6n planda tutan bir geli\u015ftirme yakla\u015f\u0131m\u0131 benimsemek ka\u00e7\u0131n\u0131lmaz hale geliyor. Bu nedenle, jQuery’den uzakla\u015farak Vanilla JS’in g\u00fcc\u00fcn\u00fc ke\u015ffetmek, hem ki\u015fisel geli\u015fiminiz hem de projelerinizin gelece\u011fi i\u00e7in atabilece\u011finiz en iyi ad\u0131mlardan biridir.<\/p>\n

\n        Uzman \u0130pucu: Projenizde jQuery kullanmaya devam etmek zorunda de\u011filsiniz. Ancak mevcut bir projeyi Vanilla JS’e ta\u015f\u0131rken kademeli bir yakla\u015f\u0131m izlemek, olas\u0131 hatalar\u0131 minimize eder ve ge\u00e7i\u015f s\u00fcrecini daha y\u00f6netilebilir k\u0131lar. Yeni \u00f6zellikler i\u00e7in Vanilla JS kullanmaya ba\u015flay\u0131p, eski jQuery kodlar\u0131n\u0131 zamanla refactor edebilirsiniz.\n    <\/div>\nModern JavaScript Se\u00e7icilerin Temelleri: querySelector<\/code> ve querySelectorAll<\/code><\/h2>\njQuery’nin en \u00e7ok kullan\u0131lan \u00f6zelliklerinden biri, CSS se\u00e7icilerini kullanarak DOM’daki elementleri kolayca se\u00e7ebilme yetene\u011fiydi. Modern JavaScript bu \u00f6zelli\u011fi document.querySelector()<\/code> ve document.querySelectorAll()<\/code> metodlar\u0131yla do\u011frudan taray\u0131c\u0131lara entegre etmi\u015ftir. Bu iki metod, herhangi bir harici k\u00fct\u00fcphaneye ihtiya\u00e7 duymadan, g\u00fc\u00e7l\u00fc CSS se\u00e7icileri kullanarak web sayfan\u0131zdaki elementleri hedeflemenizi sa\u011flar. Asl\u0131nda, jQuery’nin arkas\u0131ndaki motorlardan biri de bu yerel DOM se\u00e7ici API’leri kullanmaktad\u0131r, bu y\u00fczden Vanilla JS’e ge\u00e7mek, performans a\u00e7\u0131s\u0131ndan bir avantaj sa\u011flayabilir \u00e7\u00fcnk\u00fc aradaki soyutlama katman\u0131n\u0131 ortadan kald\u0131rm\u0131\u015f olursunuz. Bu sayede, taray\u0131c\u0131n\u0131n yerel ve optimize edilmi\u015f kodunu do\u011frudan kullanm\u0131\u015f olursunuz.<\/p>\n
Bu metodlar\u0131n temel prensibi olduk\u00e7a basittir: CSS se\u00e7icilerini parametre olarak al\u0131rlar ve e\u015fle\u015fen DOM elementlerini d\u00f6nd\u00fcr\u00fcrler. Bu sayede, HTML yap\u0131n\u0131zda ne kadar karma\u015f\u0131k olursa olsun, belirli bir ID’ye, s\u0131n\u0131fa, etikete veya attribute’a sahip elementleri kolayca bulabilirsiniz. \u00d6rne\u011fin, bir formdaki t\u00fcm input elementlerini se\u00e7mek, belirli bir navigasyon men\u00fcs\u00fcndeki linkleri yakalamak veya belirli bir veri \u00f6zelli\u011fine sahip elementleri filtrelemek art\u0131k standart JavaScript ile \u00e7ok daha eri\u015filebilir hale gelmi\u015ftir. Bu metodlar sadece document<\/code> nesnesi \u00fczerinde de\u011fil, ayn\u0131 zamanda herhangi bir elementin kendisi \u00fczerinde de \u00e7a\u011fr\u0131labilir. Bu, belirli bir kapsay\u0131c\u0131n\u0131n (parent element) alt\u0131ndaki elementleri aramak istedi\u011finizde olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r ve arama kapsam\u0131n\u0131 daraltarak performans\u0131 art\u0131rabilir.<\/p>\n
Vanilla JavaScript’in bu se\u00e7ici metodlar\u0131, sadece element se\u00e7mekle kalmaz, ayn\u0131 zamanda bu elementler \u00fczerinde \u00e7e\u015fitli manip\u00fclasyonlar yapman\u0131za da olanak tan\u0131r. Se\u00e7ilen elementlerin i\u00e7eri\u011fini de\u011fi\u015ftirebilir, stil \u00f6zelliklerini g\u00fcncelleyebilir, yeni elementler ekleyebilir veya mevcut elementleri silebilirsiniz. T\u00fcm bu i\u015flemler, do\u011frudan taray\u0131c\u0131n\u0131n sundu\u011fu yerel DOM API’leri arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir. Bu, gereksiz ba\u011f\u0131ml\u0131l\u0131klardan ka\u00e7\u0131narak daha hafif, daha h\u0131zl\u0131 ve daha g\u00fcvenilir web uygulamalar\u0131 geli\u015ftirmenizi sa\u011flar. Geli\u015ftirme s\u00fcrecinde esneklik kazanmak ve daha g\u00fcncel web standartlar\u0131n\u0131 benimsemek isteyen herkes i\u00e7in querySelector<\/code> ve querySelectorAll<\/code>, temel ta\u015flardan biridir. Bu metodlar\u0131 etkin bir \u015fekilde kullanabilmek, modern web geli\u015ftirme yeteneklerinizin vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015ftir ve sizi bir ad\u0131m \u00f6ne ta\u015f\u0131yacakt\u0131r.<\/p>\n
Tekil Element Se\u00e7imi: document.querySelector()<\/code> Nas\u0131l Kullan\u0131l\u0131r?<\/h3>\ndocument.querySelector()<\/code> metodu, sa\u011flad\u0131\u011f\u0131n\u0131z CSS se\u00e7iciyle e\u015fle\u015fen *ilk* elementi d\u00f6nd\u00fcr\u00fcr. E\u011fer hi\u00e7bir element e\u015fle\u015fmezse null<\/code> de\u011ferini d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle benzersiz bir ID’ye sahip bir elementi veya bir s\u0131n\u0131fa sahip birden fazla element aras\u0131ndan sadece ilkini hedeflemek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. ID se\u00e7icileri (#myId<\/code>) genellikle en h\u0131zl\u0131 olanlard\u0131r \u00e7\u00fcnk\u00fc taray\u0131c\u0131lar bu elementleri do\u011frudan bir hash tablosu gibi bir yap\u0131 \u00fczerinden eri\u015febilirler.<\/p>\n
Kullan\u0131m\u0131 olduk\u00e7a basittir:<\/p>\n
\nconst baslikElementi = document.querySelector('#anaBaslik');\nconsole.log(baslikElementi); \/\/ Ana ba\u015fl\u0131k elementini d\u00f6nd\u00fcr\u00fcr\n\nconst ilkParagraf = document.querySelector('.metin-paragraf');\nconsole.log(ilkParagraf); \/\/ 'metin-paragraf' s\u0131n\u0131f\u0131na sahip ilk paragraf\u0131 d\u00f6nd\u00fcr\u00fcr\n\nconst ilkDiv = document.querySelector('div');\nconsole.log(ilkDiv); \/\/ Sayfadaki ilk div elementini d\u00f6nd\u00fcr\u00fcr\n\nconst ozellikliElement = document.querySelector('[data-id=\"urun-123\"]');\nconsole.log(ozellikliElement); \/\/ data-id=\"urun-123\" \u00f6zniteli\u011fine sahip elementi d\u00f6nd\u00fcr\u00fcr\n    <\/pre>\n<\/code><\/p>\n
Yukar\u0131daki \u00f6rneklerde g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, querySelector<\/code> ile CSS'te kulland\u0131\u011f\u0131m\u0131z t\u00fcm se\u00e7icileri kullanabiliriz: ID (#), s\u0131n\u0131f (.), etiket ad\u0131, \u00f6znitelik se\u00e7iciler ve hatta daha karma\u015f\u0131k birle\u015fik se\u00e7iciler (\u00f6rne\u011fin, div > p.highlight<\/code>). Bu esneklik, belirli bir elementi hedefleme konusunda bize b\u00fcy\u00fck bir g\u00fc\u00e7 sa\u011flar. Unutulmamal\u0131d\u0131r ki, querySelector<\/code> her zaman ilk e\u015fle\u015fmeyi d\u00f6nd\u00fcr\u00fcr. E\u011fer ayn\u0131 se\u00e7iciye sahip birden fazla element varsa ve siz hepsine eri\u015fmek istiyorsan\u0131z, o zaman querySelectorAll<\/code> kullanman\u0131z gerekecektir. Bu metodun h\u0131zl\u0131 ve do\u011frudan eri\u015fim sa\u011flamas\u0131, \u00f6zellikle tekil element manip\u00fclasyonlar\u0131 i\u00e7in idealdir.<\/p>\n
\u00c7oklu Element Se\u00e7imi: document.querySelectorAll()<\/code> ve Dizi Benzeri Koleksiyonlar<\/h3>\ndocument.querySelectorAll()<\/code> metodu, sa\u011flad\u0131\u011f\u0131n\u0131z CSS se\u00e7iciyle e\u015fle\u015fen *t\u00fcm* elementleri i\u00e7eren bir NodeList<\/code> nesnesi d\u00f6nd\u00fcr\u00fcr. E\u011fer hi\u00e7bir element e\u015fle\u015fmezse, bo\u015f bir NodeList<\/code> d\u00f6nd\u00fcr\u00fcr. NodeList<\/code>, bir dizi (Array) gibi g\u00f6r\u00fcnse de, asl\u0131nda bir dizi de\u011fildir; daha do\u011frusu dizi benzeri bir koleksiyondur. Bu, do\u011frudan dizi metodlar\u0131n\u0131 (.map()<\/code>, .filter()<\/code>, .reduce()<\/code>) kullanamayaca\u011f\u0131n\u0131z anlam\u0131na gelir. Ancak NodeList<\/code> \u00fczerinde d\u00f6ng\u00fc (for...of<\/code>, .forEach()<\/code>) yapabilir ve elementlere indeks numaralar\u0131yla eri\u015febilirsiniz.<\/p>\n
E\u011fer bir NodeList<\/code>'i ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrmek isterseniz, JavaScript'in modern \u00f6zelliklerinden faydalanabilirsiniz:<\/p>\n
\nconst tumParagraflar = document.querySelectorAll('.metin-paragraf');\nconsole.log(tumParagraflar); \/\/ 'metin-paragraf' s\u0131n\u0131f\u0131na sahip t\u00fcm paragraflar\u0131 i\u00e7eren NodeList\n\n\/\/ NodeList \u00fczerinde d\u00f6ng\u00fc yapmak\ntumParagraflar.forEach(p => {\n    p.style.backgroundColor = '#e0ffe0';\n});\n\n\/\/ NodeList'i ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrme (yayma operat\u00f6r\u00fc ile)\nconst paragrafDizisi = [...tumParagraflar];\nparagrafDizisi.map(p => console.log(p.textContent));\n\n\/\/ Veya Array.from() metodu ile\nconst paragrafDizisi2 = Array.from(tumParagraflar);\nparagrafDizisi2.filter(p => p.textContent.length > 50).forEach(p => p.style.border = '1px solid blue');\n    <\/pre>\n<\/code><\/p>\n
Bu metod, bir sayfadaki belirli bir kategorideki t\u00fcm \u00fcr\u00fcnleri se\u00e7mek, bir men\u00fcdeki t\u00fcm ba\u011flant\u0131lara olay dinleyicileri eklemek veya belirli bir stile sahip t\u00fcm \u00f6\u011feleri g\u00fcncellemek gibi durumlarda olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr. querySelectorAll<\/code> ile elde etti\u011finiz NodeList<\/code> canl\u0131 bir koleksiyon de\u011fildir, yani sayfa \u00fczerinde DOM de\u011fi\u015fiklikleri yapsan\u0131z bile, NodeList<\/code> i\u00e7eri\u011fi otomatik olarak g\u00fcncellenmez. Bu, baz\u0131 durumlarda beklenen davran\u0131\u015ftan farkl\u0131 olabilir; bu nedenle dinamik olarak de\u011fi\u015fen DOM \u00fczerinde i\u015flem yaparken bu \u00f6zelli\u011fi g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir. \u00d6rne\u011fin, bir liste \u00f6\u011fesi ekledi\u011finizde veya sildi\u011finizde, querySelectorAll<\/code>'\u0131 tekrar \u00e7a\u011f\u0131rman\u0131z gerekebilir. Bu, jQuery'nin baz\u0131 \"canl\u0131\" koleksiyon davran\u0131\u015flar\u0131ndan farkl\u0131d\u0131r ve bu fark\u0131n fark\u0131nda olmak hatalar\u0131n \u00f6n\u00fcne ge\u00e7ecektir. Ger\u00e7ek d\u00fcnya uygulamalar\u0131nda bu durum, \u00f6zellikle kullan\u0131c\u0131 etkile\u015fimiyle DOM'un s\u0131k s\u0131k de\u011fi\u015fti\u011fi yerlerde \u00f6nemli hale gelir. Dolay\u0131s\u0131yla, querySelectorAll<\/code> ile elde edilen sonu\u00e7lar\u0131n anl\u0131k bir \"snapshot\" oldu\u011funu anlamak, do\u011fru ve performansl\u0131 kod yaz\u0131m\u0131 i\u00e7in kritik bir bilgidir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131nda Se\u00e7iciler: Pratik Uygulamalar ve Vaka Analizleri<\/h2>\njQuery'den vazge\u00e7ip Vanilla JavaScript se\u00e7icilerine ge\u00e7i\u015fin pratik faydalar\u0131n\u0131 g\u00f6rmek i\u00e7in, g\u00fcnl\u00fck geli\u015ftirme g\u00f6revlerinde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan senaryolara yak\u0131ndan bakal\u0131m. Bu senaryolar, sadece elementleri nas\u0131l se\u00e7ece\u011fimizi de\u011fil, ayn\u0131 zamanda se\u00e7ilen elementler \u00fczerinde nas\u0131l etkile\u015fim kuraca\u011f\u0131m\u0131z\u0131 ve DOM'u nas\u0131l manip\u00fcle edece\u011fimizi de g\u00f6sterecek. Bu, sadece teorik bilgiden \u00f6teye ge\u00e7erek, ger\u00e7ek projelerde kar\u015f\u0131la\u015fabilece\u011finiz sorunlara \u00e7\u00f6z\u00fcm \u00fcretmenizi sa\u011flayacakt\u0131r.<\/p>\n
Bir e-ticaret sitesi geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131lar bir \u00fcr\u00fcn listesinde filtreleme yapmak istiyor, sepetlerine \u00fcr\u00fcn ekliyorlar veya bir form dolduruyorlar. T\u00fcm bu etkile\u015fimler, DOM elementlerinin se\u00e7ilmesini, \u00f6zelliklerinin de\u011fi\u015ftirilmesini ve olaylara tepki verilmesini gerektirir. jQuery ile bu i\u015flemler genellikle tek bir $()<\/code> fonksiyonu \u00e7a\u011fr\u0131s\u0131 ile ba\u015flard\u0131. Vanilla JS'te ise, querySelector<\/code> ve querySelectorAll<\/code> ile elementleri se\u00e7ip, ard\u0131ndan standart DOM API metodlar\u0131n\u0131 kullanarak i\u015flemlerimizi ger\u00e7ekle\u015ftiririz. Bu yakla\u015f\u0131m, kodu daha \u015feffaf hale getirir ve taray\u0131c\u0131n\u0131n yerel yeteneklerinden tam olarak faydalanmam\u0131z\u0131 sa\u011flar.<\/p>\n
\u00d6rne\u011fin, bir filtreleme i\u015flemi i\u00e7in, t\u00fcm filtre se\u00e7eneklerini se\u00e7ip her birine bir olay dinleyicisi ekleyebiliriz. Ya da bir sepete ekle butonuna t\u0131kland\u0131\u011f\u0131nda, ilgili \u00fcr\u00fcn bilgilerini al\u0131p bir HTML \u015fablonu olu\u015fturarak sepet div'ine ekleyebiliriz. T\u00fcm bu i\u015flemler, do\u011frudan taray\u0131c\u0131n\u0131n sundu\u011fu ara\u00e7larla, ek bir soyutlama katman\u0131 olmaks\u0131z\u0131n yap\u0131labilir. Bu, sadece performans avantaj\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda kodun daha temiz, daha kolay anla\u015f\u0131l\u0131r ve daha s\u00fcrd\u00fcr\u00fclebilir olmas\u0131na da yard\u0131mc\u0131 olur. Ayr\u0131ca, bu yakla\u015f\u0131mla, taray\u0131c\u0131lar\u0131n gelecekteki performans iyile\u015ftirmelerinden do\u011frudan faydalanabilirsiniz, \u00e7\u00fcnk\u00fc kodunuz do\u011frudan taray\u0131c\u0131n\u0131n en optimize edilmi\u015f API'lerini kullanacakt\u0131r. Bu b\u00f6l\u00fcmde, form y\u00f6netimi ve dinamik listeler gibi yayg\u0131n senaryolar \u00fczerinde durarak, se\u00e7icilerin ne kadar g\u00fc\u00e7l\u00fc ve esnek oldu\u011funu detayl\u0131 \u00f6rneklerle g\u00f6zler \u00f6n\u00fcne serece\u011fiz. Bu vaka analizleri, Vanilla JS ile neler yapabilece\u011finizi somutla\u015ft\u0131racak ve kendi projelerinizde benzer \u00e7\u00f6z\u00fcmleri uygulaman\u0131z i\u00e7in size ilham verecektir.<\/p>\n
Form Y\u00f6netiminde Se\u00e7icilerin G\u00fcc\u00fc<\/h3>\nWeb formlar\u0131, kullan\u0131c\u0131 etkile\u015fiminin temel ta\u015flar\u0131ndan biridir ve JavaScript ile dinamik olarak y\u00f6netilmeleri gerekir. Vanilla JS se\u00e7icileriyle form elementlerini se\u00e7mek ve onlar\u0131n de\u011ferlerini okumak veya de\u011fi\u015ftirmek olduk\u00e7a kolayd\u0131r. \u00d6rne\u011fin, bir kay\u0131t formundaki t\u00fcm input alanlar\u0131n\u0131 veya sadece belirli bir t\u00fcre sahip inputlar\u0131 se\u00e7ebiliriz.<\/p>\n
\n\n    \n    \n    \n    <\/textarea>\n    <select name=\"ulke\">\n        <option value=\"tr\">T\u00fcrkiye<\/option>\n        <option value=\"us\">Amerika<\/option>\n    <\/select>\n    <input type=\"checkbox\" name=\"kosulOnay\" id=\"kosulOnay\">\n    <label for=\"kosulOnay\">\u015eartlar\u0131 kabul ediyorum.<\/label>\n    <button type=\"submit\">Kaydol<\/button>\n<\/form>\n\n<script>\n    const kayitFormu = document.querySelector('#kayitFormu');\n\n    if (kayitFormu) { \/\/ Elementin varl\u0131\u011f\u0131n\u0131 kontrol etmek iyi bir pratiktir\n        kayitFormu.addEventListener('submit', function(event) {\n            event.preventDefault(); \/\/ Formun varsay\u0131lan g\u00f6nderimini engelle\n\n            const kullaniciAdi = kayitFormu.querySelector('[name=\"kullaniciAdi\"]').value;\n            const eposta = kayitFormu.querySelector('input[type=\"email\"]').value; \/\/ Tip se\u00e7ici\n            const sifre = kayitFormu.querySelector('input[name=\"sifre\"]').value;\n            const adres = kayitFormu.querySelector('textarea').value;\n            const ulke = kayitFormu.querySelector('select[name=\"ulke\"]').value;\n            const kosulOnay = kayitFormu.querySelector('#kosulOnay').checked;\n\n            console.log('Kullan\u0131c\u0131 Ad\u0131:', kullaniciAdi);\n            console.log('E-posta:', eposta);\n            console.log('\u015eifre:', sifre);\n            console.log('Adres:', adres);\n            console.log('\u00dclke:', ulke);\n            console.log('Ko\u015fullar Onayland\u0131:', kosulOnay);\n\n            \/\/ Daha karma\u015f\u0131k senaryolar i\u00e7in t\u00fcm form elementlerini se\u00e7ip d\u00f6ng\u00fcye alabiliriz:\n            const formElements = kayitFormu.querySelectorAll('input, textarea, select');\n            let formData = {};\n            formElements.forEach(element => {\n                if (element.name) { \/\/ Sadece 'name' \u00f6zniteli\u011fi olan elementleri i\u015fle\n                    if (element.type === 'checkbox') {\n                        formData[element.name] = element.checked;\n                    } else {\n                        formData[element.name] = element.value;\n                    }\n                }\n            });\n            console.log('T\u00fcm Form Verileri:', formData);\n\n            \/\/ Formu temizle\n            \/\/ kayitFormu.reset(); \/\/ Bu, formu varsay\u0131lan haline d\u00f6nd\u00fcr\u00fcr\n            \/\/ Veya her bir elementi manuel olarak temizle:\n            \/\/ kayitFormu.querySelectorAll('input:not([type=\"submit\"]), textarea, select').forEach(el => {\n            \/\/     if (el.type === 'checkbox' || el.type === 'radio') {\n            \/\/         el.checked = false;\n            \/\/     } else {\n            \/\/         el.value = '';\n            \/\/     }\n            \/\/ });\n        });\n    }\n<\/script>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>kayitFormu<\/code> ID'sine sahip formu se\u00e7ip bir 'submit' olay dinleyicisi ekledik. Ard\u0131ndan, formun i\u00e7indeki farkl\u0131 input elementlerini, <code>name<\/code> \u00f6zniteliklerini veya <code>type<\/code> \u00f6zniteliklerini kullanarak se\u00e7tik. <code>querySelector<\/code> metodunu bir elementin \u00fczerinde \u00e7a\u011f\u0131rd\u0131\u011f\u0131m\u0131zda, arama sadece o elementin alt elementleri aras\u0131nda yap\u0131l\u0131r. Bu, daha spesifik ve performansl\u0131 se\u00e7imler yapmam\u0131z\u0131 sa\u011flar. Son olarak, t\u00fcm form elementlerini se\u00e7ip bir <code>NodeList<\/code> elde ettik ve bu liste \u00fczerinde d\u00f6ng\u00fc yaparak t\u00fcm form verilerini bir objede toplad\u0131k. Bu yakla\u015f\u0131m, form do\u011frulama, dinamik alan ekleme\/\u00e7\u0131karma veya \u00e7oklu ad\u0131m formlar\u0131 gibi karma\u015f\u0131k senaryolarda olduk\u00e7a g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n<h3>Dinamik Liste ve Tablo \u0130\u015flemleri<\/h3>\n<p>Web uygulamalar\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir ba\u015fka senaryo da dinamik olarak listeler veya tablolar olu\u015fturmak ve bu elementler \u00fczerinde i\u015flem yapmakt\u0131r. \u00d6rne\u011fin, bir \u00fcr\u00fcn listesini filtrelemek, s\u0131ralamak veya pagination (sayfalama) uygulamak isteyebiliriz. Vanilla JS se\u00e7icileri ve DOM manip\u00fclasyonu ile bu i\u015flemleri kolayca yapabiliriz.<\/p>\n<pre><code>\n<div id=\"urunListesiKapsayici\">\n    <ul id=\"urunListesi\">\n        <li class=\"urun-item\" data-kategori=\"elektronik\" data-fiyat=\"1200\">Laptop<\/li>\n        <li class=\"urun-item\" data-kategori=\"giyim\" data-fiyat=\"250\">T-shirt<\/li>\n        <li class=\"urun-item\" data-kategori=\"elektronik\" data-fiyat=\"800\">Tablet<\/li>\n        <li class=\"urun-item\" data-kategori=\"kitap\" data-fiyat=\"50\">Roman<\/li>\n        <li class=\"urun-item\" data-kategori=\"giyim\" data-fiyat=\"400\">Ceket<\/li>\n    <\/ul>\n    <button id=\"filtreleButton\">Elektronik \u00dcr\u00fcnleri G\u00f6ster<\/button>\n    <button id=\"fiyatSiralaButton\">Fiyata G\u00f6re S\u0131rala (Artan)<\/button>\n<\/div>\n\n<script>\n    const urunListesi = document.querySelector('#urunListesi');\n    const filtreleButton = document.querySelector('#filtreleButton');\n    const fiyatSiralaButton = document.querySelector('#fiyatSiralaButton');\n\n    if (filtreleButton) {\n        filtreleButton.addEventListener('click', function() {\n            const tumUrunler = urunListesi.querySelectorAll('.urun-item');\n            tumUrunler.forEach(urun => {\n                if (urun.dataset.kategori === 'elektronik') {\n                    urun.style.display = ''; \/\/ G\u00f6ster\n                } else {\n                    urun.style.display = 'none'; \/\/ Gizle\n                }\n            });\n        });\n    }\n\n    if (fiyatSiralaButton) {\n        fiyatSiralaButton.addEventListener('click', function() {\n            const tumUrunler = Array.from(urunListesi.querySelectorAll('.urun-item'));\n\n            tumUrunler.sort((a, b) => {\n                const fiyatA = parseInt(a.dataset.fiyat);\n                const fiyatB = parseInt(b.dataset.fiyat);\n                return fiyatA - fiyatB;\n            });\n\n            \/\/ S\u0131ralanm\u0131\u015f elemanlar\u0131 DOM'da yeniden konumland\u0131r\n            tumUrunler.forEach(urun => urunListesi.appendChild(urun));\n            console.log(\"\u00dcr\u00fcnler fiyata g\u00f6re s\u0131raland\u0131.\");\n        });\n    }\n\n    \/\/ Yeni \u00fcr\u00fcn ekleme \u00f6rne\u011fi\n    function yeniUrunEkle(ad, kategori, fiyat) {\n        const yeniLi = document.createElement('li');\n        yeniLi.className = 'urun-item';\n        yeniLi.dataset.kategori = kategori;\n        yeniLi.dataset.fiyat = fiyat;\n        yeniLi.textContent = ad;\n        urunListesi.appendChild(yeniLi);\n    }\n\n    \/\/ yeniUrunEkle('Kamera', 'elektronik', 600);\n    \/\/ yeniUrunEkle('Kazak', 'giyim', 300);\n<\/script>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu vaka analizinde, \u00fcr\u00fcn listesindeki \u00f6\u011feleri <code>data-kategori<\/code> \u00f6zniteli\u011fine g\u00f6re filtreleyebilir veya <code>data-fiyat<\/code> \u00f6zniteli\u011fine g\u00f6re s\u0131ralayabiliriz. <code>querySelectorAll<\/code> ile t\u00fcm \u00fcr\u00fcn \u00f6\u011felerini se\u00e7tikten sonra, <code>forEach<\/code> d\u00f6ng\u00fcs\u00fc ile her bir \u00f6\u011fe \u00fczerinde i\u015flem yapabiliriz. <code>dataset<\/code> \u00f6zelli\u011fi, HTML5'in <code>data-<\/code> \u00f6zniteliklerine kolayca eri\u015fmemizi sa\u011flar. S\u0131ralama \u00f6rne\u011finde, <code>NodeList<\/code>'i \u00f6nce ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrd\u00fck (<code>Array.from()<\/code> kullanarak), ard\u0131ndan <code>sort()<\/code> metodunu uygulad\u0131k ve son olarak s\u0131ralanm\u0131\u015f elementleri DOM'a tekrar ekledik. DOM manip\u00fclasyonu yaparken, <code>appendChild()<\/code> veya <code>insertBefore()<\/code> gibi metodlar\u0131 kullanarak elementlerin konumunu de\u011fi\u015ftirebiliriz. Bu t\u00fcr dinamik i\u015flemler, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve uygulaman\u0131n interaktifli\u011fini art\u0131r\u0131r.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: Dinamik DOM manip\u00fclasyonlar\u0131nda, \u00f6zellikle b\u00fcy\u00fck listelerde performans\u0131 art\u0131rmak i\u00e7in Sanal DOM (Virtual DOM) k\u00fct\u00fcphaneleri (React, Vue gibi) veya belge par\u00e7alar\u0131 (Document Fragments) kullanmak faydal\u0131 olabilir. Tek seferde birden fazla DOM g\u00fcncellemesi yapmak yerine, t\u00fcm de\u011fi\u015fiklikleri bir <code>DocumentFragment<\/code> \u00fczerinde yap\u0131p tek seferde DOM'a eklemek, yeniden \u00e7izim (reflow\/repaint) say\u0131s\u0131n\u0131 azaltarak performans\u0131 art\u0131r\u0131r.\n    <\/div>\n<h2>Performans \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar: H\u0131zl\u0131 ve Verimli Kod Yaz\u0131m\u0131<\/h2>\n<p>Vanilla JavaScript ile element se\u00e7imi ve DOM manip\u00fclasyonu yaparken performans, her zaman g\u00f6z \u00f6n\u00fcnde bulundurmam\u0131z gereken kritik bir fakt\u00f6rd\u00fcr. Yanl\u0131\u015f uygulamalar, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k web sayfalar\u0131nda ciddi performans sorunlar\u0131na yol a\u00e7abilir. Bu nedenle, se\u00e7icileri ve DOM i\u015flemlerini en verimli \u015fekilde kullanman\u0131n yollar\u0131n\u0131 anlamak, modern web geli\u015ftiricili\u011finin temelini olu\u015fturur. jQuery'den Vanilla JS'e ge\u00e7i\u015f yaparken elde etti\u011finiz performans avantaj\u0131n\u0131 korumak ve hatta daha da art\u0131rmak i\u00e7in baz\u0131 \u00f6nemli ipu\u00e7lar\u0131 ve en iyi uygulamalar mevcuttur. Bu b\u00f6l\u00fcmde, kodunuzu h\u0131zland\u0131rman\u0131n ve gereksiz kaynak t\u00fcketimini \u00f6nlemenin yollar\u0131n\u0131 detayl\u0131 olarak inceleyece\u011fiz. Ayr\u0131ca, mobil cihazlarda da sorunsuz bir deneyim sunmak i\u00e7in CSS ve JavaScript se\u00e7icilerini bir arada nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 da ele alaca\u011f\u0131z.<\/p>\n<p>Performans\u0131 etkileyen temel fakt\u00f6rlerden biri, DOM'da ne s\u0131kl\u0131kla arama yapt\u0131\u011f\u0131n\u0131z ve ne kadar geni\u015f bir alanda arama yapt\u0131\u011f\u0131n\u0131zd\u0131r. Her <code>querySelector<\/code> veya <code>querySelectorAll<\/code> \u00e7a\u011fr\u0131s\u0131, taray\u0131c\u0131n\u0131n DOM a\u011fac\u0131nda gezinmesini gerektirir. Bu i\u015flem, \u00f6zellikle \u00e7ok say\u0131da element i\u00e7eren sayfalarda pahal\u0131 olabilir. Bu nedenle, se\u00e7ici \u00e7a\u011fr\u0131lar\u0131n\u0131 minimize etmek ve m\u00fcmk\u00fcn oldu\u011funca belirli bir kapsamda (\u00f6rne\u011fin, bir elementin alt\u0131ndaki di\u011fer elementleri se\u00e7mek) arama yapmak \u00f6nemlidir. Ayr\u0131ca, se\u00e7icilerinizin ne kadar \u00f6zg\u00fcl oldu\u011fu da performans\u0131 etkiler; \u00e7ok genel se\u00e7iciler (<code>*<\/code> gibi) veya \u00e7ok karma\u015f\u0131k birle\u015fik se\u00e7iciler, daha fazla i\u015fleme s\u00fcresi gerektirebilir. Performans optimizasyonu sadece kodunuzun h\u0131zl\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n daha ak\u0131c\u0131 bir deneyim ya\u015famas\u0131n\u0131 ve sayfa y\u00fckleme s\u00fcrelerinin k\u0131salmas\u0131n\u0131 da sa\u011flar. Bu da SEO a\u00e7\u0131s\u0131ndan da olumlu bir etki yarat\u0131r, \u00e7\u00fcnk\u00fc arama motorlar\u0131 h\u0131zl\u0131 y\u00fcklenen sayfalar\u0131 daha \u00fcst s\u0131ralarda g\u00f6sterebilir. Dolay\u0131s\u0131yla, sadece fonksiyonellik de\u011fil, performans da g\u00f6z \u00f6n\u00fcnde bulundurularak kod yazmak, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r.<\/p>\n<h3>Se\u00e7ici Performans\u0131n\u0131 Art\u0131rmak \u0130\u00e7in Nelere Dikkat Etmeli?<\/h3>\n<ol>\n<li><strong>En \u00d6zg\u00fcl Se\u00e7iciyi Kullan\u0131n:<\/strong> M\u00fcmk\u00fcnse ID se\u00e7icilerini (<code>#myId<\/code>) kullan\u0131n, bunlar en h\u0131zl\u0131s\u0131d\u0131r. Ard\u0131ndan s\u0131n\u0131f se\u00e7icileri (<code>.myClass<\/code>) ve son olarak etiket se\u00e7iciler (<code>div<\/code>). Daha karma\u015f\u0131k se\u00e7iciler (\u00f6rne\u011fin, <code>div.container > p.item[data-status=\"active\"]<\/code>) daha yava\u015f olabilir.<\/li>\n<li><strong>Arama Kapsam\u0131n\u0131 Daralt\u0131n:<\/strong> <code>document<\/code> yerine, m\u00fcmk\u00fcnse daha k\u00fc\u00e7\u00fck bir kapsay\u0131c\u0131 element \u00fczerinde <code>querySelector<\/code> veya <code>querySelectorAll<\/code> kullan\u0131n. \u00d6rne\u011fin:\n<pre><code>\nconst container = document.querySelector('#sidebar');\nconst items = container.querySelectorAll('.menu-item'); \/\/ Sadece #sidebar i\u00e7indeki .menu-item'lar\u0131 arar\n            <\/pre>\n<p><\/code>\n        <\/li>\n<li><strong>Se\u00e7ici Sonu\u00e7lar\u0131n\u0131 \u00d6nbelle\u011fe Al\u0131n:<\/strong> Ayn\u0131 elementi veya element koleksiyonunu birden fazla kez kullanacaksan\u0131z, ilk se\u00e7imden sonra bir de\u011fi\u015fkende saklay\u0131n. Her seferinde DOM'u tekrar sorgulamaktan ka\u00e7\u0131n\u0131n.\n<pre><code>\nconst myButton = document.querySelector('#myButton'); \/\/ Sadece bir kez se\u00e7ildi\nmyButton.addEventListener('click', () => {\n    \/\/ \u0130\u015flem yap\n});\n\/\/ Ba\u015fka bir yerde myButton'\u0131 tekrar kullanmak i\u00e7in tekrar sorgulamaya gerek yok\nmyButton.textContent = 'T\u0131kland\u0131!';\n            <\/pre>\n<p><\/code>\n        <\/li>\n<li><strong>Canl\u0131 Koleksiyonlardan Ka\u00e7\u0131n\u0131n (Gereksizse):<\/strong> <code>document.getElementsByClassName()<\/code> veya <code>document.getElementsByTagName()<\/code> gibi metodlar \"canl\u0131\" <code>HTMLCollection<\/code>'lar d\u00f6nd\u00fcr\u00fcr, yani DOM de\u011fi\u015fti\u011finde koleksiyon otomatik olarak g\u00fcncellenir. Bu, baz\u0131 durumlarda avantajl\u0131 olsa da, her eri\u015fimde koleksiyonun yeniden hesaplanmas\u0131na neden olabilece\u011fi i\u00e7in performans maliyeti olu\u015fturabilir. <code>querySelectorAll<\/code>'\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc <code>NodeList<\/code> ise \"statiktir\" ve performans genellikle daha tahmin edilebilirdir.<\/li>\n<li><strong>Minimum DOM Manip\u00fclasyonu:<\/strong> Birden fazla DOM de\u011fi\u015fikli\u011fi yapman\u0131z gerekti\u011finde, bu de\u011fi\u015fiklikleri bir araya getirin. \u00d6rne\u011fin, bir liste eleman\u0131na 10 adet <code>\n<li><\/code> ekleyecekseniz, her <code>\n<li><\/code>'yi ayr\u0131 ayr\u0131 eklemek yerine, \u00f6nce bir <code>DocumentFragment<\/code> olu\u015fturup t\u00fcm <code>\n<li><\/code>'leri ona ekleyin ve sonra <code>DocumentFragment<\/code>'i tek seferde DOM'a ekleyin. Bu, taray\u0131c\u0131n\u0131n yeniden \u00e7izim (reflow ve repaint) i\u015flemlerini minimize eder.<\/li>\n<li><strong>Debouncing ve Throttling Kullan\u0131n:<\/strong> \u00d6zellikle <code>scroll<\/code>, <code>resize<\/code> veya <code>mousemove<\/code> gibi s\u0131k tetiklenen olay dinleyicilerinde, performans sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in debouncing veya throttling tekniklerini kullan\u0131n. Bu, olay i\u015fleyicilerinin belirli bir zaman aral\u0131\u011f\u0131nda sadece bir kez veya maksimum bir kere tetiklenmesini sa\u011flar.<\/li>\n<\/ol>\n<p>Bu ipu\u00e7lar\u0131n\u0131 uygulayarak, Vanilla JS kodunuzu hem daha h\u0131zl\u0131 hem de daha verimli hale getirebilirsiniz. Unutmay\u0131n, iyi performans sadece teknik bir gereklilik de\u011fil, ayn\u0131 zamanda daha iyi bir kullan\u0131c\u0131 deneyimi sunman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h3>Mobil Uyumluluk \u0130\u00e7in CSS ve JS Se\u00e7icileri Bir Arada Kullanmak<\/h3>\n<p>Mobil \u00f6ncelikli tasar\u0131m (mobile-first design) yakla\u015f\u0131m\u0131 g\u00fcn\u00fcm\u00fcz web geli\u015ftirmenin temelini olu\u015fturuyor. Mobil cihazlarda, daha k\u0131s\u0131tl\u0131 i\u015flem g\u00fcc\u00fc ve bant geni\u015fli\u011fi oldu\u011fundan, performans optimizasyonlar\u0131 daha da kritik hale geliyor. CSS medya sorgular\u0131 (media queries) ve JavaScript se\u00e7icilerini bir arada kullanarak mobil uyumlu ve performansl\u0131 uygulamalar geli\u015ftirebiliriz.<\/p>\n<p>Bir \u00f6rnekle a\u00e7\u0131klayal\u0131m: Geni\u015f ekranlarda bir navigasyon men\u00fcs\u00fcn\u00fc yatay olarak g\u00f6stermek, mobil ekranlarda ise dikey olarak a\u00e7\u0131l\u0131r (hamburger men\u00fc) \u015fekilde gizleyip g\u00f6stermek isteyebiliriz. CSS medya sorgular\u0131 ile men\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirebilirken, JavaScript ile hamburger butonuna t\u0131klama olay\u0131n\u0131 y\u00f6netiriz.<\/p>\n<pre><code>\n<!-- HTML Yap\u0131s\u0131 -->\n<nav class=\"ana-nav\">\n    <button class=\"hamburger-menu\" aria-expanded=\"false\" aria-controls=\"menuList\">\n        <span class=\"sr-only\">Men\u00fcy\u00fc A\u00e7\/Kapat<\/span>\n        <div class=\"bar\"><\/div>\n        <div class=\"bar\"><\/div>\n        <div class=\"bar\"><\/div>\n    <\/button>\n    <ul id=\"menuList\" class=\"nav-list\">\n        <li><a href=\"#\">Anasayfa<\/a><\/li>\n        <li><a href=\"#\">Hakk\u0131m\u0131zda<\/a><\/li>\n        <li><a href=\"#\">Hizmetler<\/a><\/li>\n        <li><a href=\"#\">\u0130leti\u015fim<\/a><\/li>\n    <\/ul>\n<\/nav>\n\n<!-- CSS \u00d6rne\u011fi (Mobil \u00f6ncelikli) -->\n<style>\n    .nav-list {\n        display: none; \/* Mobil varsay\u0131lan\u0131 gizli *\/\n        flex-direction: column;\n        width: 100%;\n        list-style: none;\n        padding: 0;\n        margin: 0;\n    }\n\n    .nav-list.active {\n        display: flex; \/* Aktif oldu\u011funda g\u00f6ster *\/\n    }\n\n    .hamburger-menu {\n        display: block; \/* Mobil varsay\u0131lan\u0131 g\u00f6ster *\/\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 10px;\n        z-index: 10;\n    }\n\n    .hamburger-menu .bar {\n        width: 25px;\n        height: 3px;\n        background-color: #333;\n        margin: 5px 0;\n        transition: 0.4s;\n    }\n\n    \/* B\u00fcy\u00fck ekranlar i\u00e7in medya sorgusu *\/\n    @media (min-width: 768px) {\n        .nav-list {\n            display: flex; \/* Geni\u015f ekranda yatay g\u00f6ster *\/\n            flex-direction: row;\n            justify-content: flex-end;\n            gap: 20px;\n        }\n\n        .hamburger-menu {\n            display: none; \/* Geni\u015f ekranda gizle *\/\n        }\n    }\n<\/style>\n\n<!-- JavaScript Kodu -->\n<script>\n    const hamburgerButton = document.querySelector('.hamburger-menu');\n    const navList = document.querySelector('#menuList');\n\n    if (hamburgerButton && navList) {\n        hamburgerButton.addEventListener('click', function() {\n            const isExpanded = this.getAttribute('aria-expanded') === 'true' || false;\n            this.setAttribute('aria-expanded', !isExpanded);\n            navList.classList.toggle('active'); \/\/ CSS s\u0131n\u0131f\u0131n\u0131 de\u011fi\u015ftir\n        });\n    }\n\n    \/\/ Ekran boyutu de\u011fi\u015fti\u011finde men\u00fc durumunu s\u0131f\u0131rlayabiliriz\n    window.addEventListener('resize', () => {\n        if (window.innerWidth >= 768) {\n            navList.classList.remove('active');\n            if (hamburgerButton) {\n                hamburgerButton.setAttribute('aria-expanded', 'false');\n            }\n        }\n    });\n<\/script>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, CSS medya sorgular\u0131yla men\u00fcn\u00fcn varsay\u0131lan g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc (mobil i\u00e7in gizli, masa\u00fcst\u00fc i\u00e7in g\u00f6r\u00fcn\u00fcr) ayarl\u0131yoruz. JavaScript taraf\u0131nda ise, <code>querySelector<\/code> ile hamburger butonunu ve navigasyon listesini se\u00e7ip, butona t\u0131klama olay\u0131nda <code>navList<\/code> elementinin <code>active<\/code> s\u0131n\u0131f\u0131n\u0131 <code>toggle<\/code> ediyoruz. Bu s\u0131n\u0131f\u0131n varl\u0131\u011f\u0131 veya yoklu\u011fu, CSS ile men\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol ediyor. <code>aria-expanded<\/code> gibi eri\u015filebilirlik \u00f6zniteliklerini g\u00fcncellemek de iyi bir pratiktir.<\/p>\n<p><code>window.addEventListener('resize')<\/code> ile ekran boyutu de\u011fi\u015fti\u011finde men\u00fcn\u00fcn durumunu s\u0131f\u0131rlayarak, cihaz dikeyden yataya veya tersine d\u00f6nd\u00fc\u011f\u00fcnde kullan\u0131c\u0131 deneyiminin tutarl\u0131 kalmas\u0131n\u0131 sa\u011fl\u0131yoruz. Bu yakla\u015f\u0131m, hem g\u00f6rsel tutarl\u0131l\u0131k hem de performans a\u00e7\u0131s\u0131ndan olduk\u00e7a etkilidir. JavaScript'i sadece etkile\u015fim i\u00e7in kullan\u0131rken, g\u00f6r\u00fcn\u00fcm ve yerle\u015fimi CSS'e b\u0131rakmak, taray\u0131c\u0131n\u0131n render motorunu daha verimli kullanmas\u0131n\u0131 sa\u011flar ve gereksiz JavaScript hesaplamalar\u0131ndan ka\u00e7\u0131n\u0131r\u0131z. Bu birle\u015fme, modern, responsive ve y\u00fcksek performansl\u0131 web siteleri olu\u015fturman\u0131n anahtar\u0131d\u0131r.<\/p>\n<h2>jQuery Kodunu Vanilla JS'e D\u00f6n\u00fc\u015ft\u00fcrme: Ad\u0131m Ad\u0131m Rehber<\/h2>\n<p>Mevcut bir jQuery projeniz varsa veya eski jQuery kodlar\u0131n\u0131 modern Vanilla JavaScript'e ta\u015f\u0131mak istiyorsan\u0131z, bu b\u00f6l\u00fcm size yol g\u00f6sterecektir. D\u00f6n\u00fc\u015f\u00fcm s\u00fcreci korkutucu g\u00f6r\u00fcnse de, jQuery'nin yapt\u0131\u011f\u0131 \u00e7o\u011fu \u015feyin arkas\u0131nda asl\u0131nda taray\u0131c\u0131n\u0131n yerel DOM API'leri yatar. Bu nedenle, jQuery kodunu anlamak ve onu e\u015fde\u011fer Vanilla JS koduna \u00e7evirmek genellikle d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczden daha kolayd\u0131r. Anahtar nokta, jQuery'nin sundu\u011fu her bir metodun Vanilla JS'deki kar\u015f\u0131l\u0131\u011f\u0131n\u0131 bilmek ve bu ge\u00e7i\u015fi ad\u0131m ad\u0131m, kontroll\u00fc bir \u015fekilde yapmakt\u0131r. Bu d\u00f6n\u00fc\u015f\u00fcm, projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 azaltacak, performans\u0131n\u0131 art\u0131racak ve modern web standartlar\u0131na uygun hale getirecektir. Ayr\u0131ca, Vanilla JS'e hakim olmak, React, Vue veya Angular gibi modern k\u00fct\u00fcphane ve framework'leri \u00f6\u011frenmeniz i\u00e7in de sa\u011flam bir temel olu\u015fturacakt\u0131r.<\/p>\n<p>jQuery, bir\u00e7ok fonksiyonu zincirleme (chaining) imkan\u0131 sunarak kod yazmay\u0131 kolayla\u015ft\u0131r\u0131r. Vanilla JS'de bu t\u00fcr zincirleme her zaman m\u00fcmk\u00fcn olmasa da, modern JavaScript'in getirdi\u011fi kolayl\u0131klarla (\u00f6rne\u011fin, yayma operat\u00f6r\u00fc, <code>forEach<\/code> gibi Array metodlar\u0131) benzer sonu\u00e7lara ula\u015fabiliriz. D\u00f6n\u00fc\u015f\u00fcm s\u00fcrecinde dikkat etmeniz gereken en \u00f6nemli noktalardan biri, jQuery'nin her zaman bir \"jQuery nesnesi\" d\u00f6nd\u00fcrmesidir. Bu nesne, \u00fczerinde birden fazla eleman olsa bile tek bir elemanm\u0131\u015f gibi i\u015flem yapman\u0131z\u0131 sa\u011flar. Vanilla JS'de ise <code>querySelector<\/code> tek bir element, <code>querySelectorAll<\/code> ise bir <code>NodeList<\/code> (dizi benzeri bir koleksiyon) d\u00f6nd\u00fcr\u00fcr. Bu farkl\u0131l\u0131\u011f\u0131 g\u00f6z \u00f6n\u00fcnde bulundurarak kod yazman\u0131z gerekmektedir. \u015eimdi, s\u0131k\u00e7a kullan\u0131lan jQuery metodlar\u0131n\u0131n Vanilla JS kar\u015f\u0131l\u0131klar\u0131na ve d\u00f6n\u00fc\u015f\u00fcm stratejilerine bakal\u0131m.<\/p>\n<table border=\"1\" style=\"width:100%; border-collapse: collapse; margin-top: 20px;\">\n<thead>\n<tr>\n<th>jQuery Kodu<\/th>\n<th>Vanilla JS Kar\u015f\u0131l\u0131\u011f\u0131<\/th>\n<th>A\u00e7\u0131klama<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>$('#id')<\/code><\/td>\n<td><code>document.querySelector('#id')<\/code><\/td>\n<td>ID ile tekil element se\u00e7imi.<\/td>\n<\/tr>\n<tr>\n<td><code>$('.class')<\/code><\/td>\n<td><code>document.querySelectorAll('.class')<\/code><\/td>\n<td>S\u0131n\u0131f ile \u00e7oklu element se\u00e7imi. Bir NodeList d\u00f6nd\u00fcr\u00fcr.<\/td>\n<\/tr>\n<tr>\n<td><code>$('div')<\/code><\/td>\n<td><code>document.querySelectorAll('div')<\/code><\/td>\n<td>Etiket ad\u0131 ile \u00e7oklu element se\u00e7imi.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').text()<\/code><\/td>\n<td><code>element.textContent<\/code><\/td>\n<td>Elementin metin i\u00e7eri\u011fini alma\/ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').text('Yeni Metin')<\/code><\/td>\n<td><code>element.textContent = 'Yeni Metin'<\/code><\/td>\n<td>Elementin metin i\u00e7eri\u011fini ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').html()<\/code><\/td>\n<td><code>element.innerHTML<\/code><\/td>\n<td>Elementin HTML i\u00e7eri\u011fini alma\/ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').html('<span>Yeni HTML<\/span>')<\/code><\/td>\n<td><code>element.innerHTML = '<span>Yeni HTML<\/span>'<\/code><\/td>\n<td>Elementin HTML i\u00e7eri\u011fini ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').val()<\/code><\/td>\n<td><code>element.value<\/code><\/td>\n<td>Form elementlerinin de\u011ferini alma\/ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').val('yeniDeger')<\/code><\/td>\n<td><code>element.value = 'yeniDeger'<\/code><\/td>\n<td>Form elementlerinin de\u011ferini ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').attr('href')<\/code><\/td>\n<td><code>element.getAttribute('href')<\/code><\/td>\n<td>\u00d6znitelik de\u011ferini alma.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').attr('href', '\/yeni-link')<\/code><\/td>\n<td><code>element.setAttribute('href', '\/yeni-link')<\/code><\/td>\n<td>\u00d6znitelik de\u011ferini ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').addClass('aktif')<\/code><\/td>\n<td><code>element.classList.add('aktif')<\/code><\/td>\n<td>S\u0131n\u0131f ekleme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').removeClass('aktif')<\/code><\/td>\n<td><code>element.classList.remove('aktif')<\/code><\/td>\n<td>S\u0131n\u0131f kald\u0131rma.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').toggleClass('aktif')<\/code><\/td>\n<td><code>element.classList.toggle('aktif')<\/code><\/td>\n<td>S\u0131n\u0131f\u0131 a\u00e7\u0131p kapama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').hasClass('aktif')<\/code><\/td>\n<td><code>element.classList.contains('aktif')<\/code><\/td>\n<td>Elementin s\u0131n\u0131f i\u00e7erip i\u00e7ermedi\u011fini kontrol etme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').css('color')<\/code><\/td>\n<td><code>getComputedStyle(element).color<\/code><\/td>\n<td>Hesaplanm\u0131\u015f stil de\u011ferini alma.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').css('color', 'red')<\/code><\/td>\n<td><code>element.style.color = 'red'<\/code><\/td>\n<td>Elementin stilini ayarlama.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').hide()<\/code><\/td>\n<td><code>element.style.display = 'none'<\/code><\/td>\n<td>Elementi gizleme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').show()<\/code><\/td>\n<td><code>element.style.display = ''<\/code> (veya uygun bir de\u011fer)<\/td>\n<td>Elementi g\u00f6sterme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').on('click', handler)<\/code><\/td>\n<td><code>element.addEventListener('click', handler)<\/code><\/td>\n<td>Olay dinleyicisi ekleme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').click(handler)<\/code><\/td>\n<td><code>element.addEventListener('click', handler)<\/code><\/td>\n<td>K\u0131sayol olay dinleyicisi.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#id').off('click', handler)<\/code><\/td>\n<td><code>element.removeEventListener('click', handler)<\/code><\/td>\n<td>Olay dinleyicisi kald\u0131rma.<\/td>\n<\/tr>\n<tr>\n<td><code>$('div').each(function() { ... })<\/code><\/td>\n<td><code>document.querySelectorAll('div').forEach(element => { ... })<\/code><\/td>\n<td>Koleksiyon \u00fczerinde d\u00f6ng\u00fc.<\/td>\n<\/tr>\n<tr>\n<td><code>$('<\/p>\n<div>')<\/code><\/td>\n<td><code>document.createElement('div')<\/code><\/td>\n<td>Yeni element olu\u015fturma.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#parent').append($newEl)<\/code><\/td>\n<td><code>parentEl.appendChild(newEl)<\/code><\/td>\n<td>Element ekleme.<\/td>\n<\/tr>\n<tr>\n<td><code>$('#element').remove()<\/code><\/td>\n<td><code>element.remove()<\/code><\/td>\n<td>Elementi kald\u0131rma.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Bu tablo, en yayg\u0131n jQuery metodlar\u0131n\u0131n Vanilla JS kar\u015f\u0131l\u0131klar\u0131n\u0131 g\u00f6stermektedir. D\u00f6n\u00fc\u015f\u00fcm yaparken bu tabloyu bir ba\u015fvuru noktas\u0131 olarak kullanabilirsiniz. jQuery'nin <code>data()<\/code> metodu, Vanilla JS'de <code>element.dataset<\/code> ile kolayca eri\u015filebilen <code>data-<\/code> \u00f6znitelikleriyle e\u015fde\u011ferdir. Animasyonlar gibi daha karma\u015f\u0131k jQuery efektleri i\u00e7in ise CSS ge\u00e7i\u015fleri (transitions) ve anahtar kare animasyonlar\u0131 (keyframe animations) veya <code>Web Animations API<\/code> gibi modern taray\u0131c\u0131 API'leri kullan\u0131labilir. Bu API'ler, taray\u0131c\u0131n\u0131n yerel h\u0131zland\u0131rmalar\u0131n\u0131 kullanarak daha ak\u0131c\u0131 ve performansl\u0131 animasyonlar sunar.<\/p>\n<div class=\"expert-tip\">\n        Uzman \u0130pucu: jQuery'den tamamen kurtulmak yerine, projelerinizde ihtiyac\u0131n\u0131z olan jQuery fonksiyonlar\u0131n\u0131 (\u00f6rne\u011fin, <code>$().ajax()<\/code> veya <code>$().animate()<\/code>) Vanilla JS muadilleriyle (<code>fetch API<\/code>, <code>Web Animations API<\/code>) de\u011fi\u015ftirerek kademeli bir ge\u00e7i\u015f yapabilirsiniz. Bu, daha b\u00fcy\u00fck kod tabanlar\u0131nda daha g\u00fcvenli bir yakla\u015f\u0131md\u0131r.\n    <\/div>\n<h2>Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Modern web geli\u015ftirme d\u00fcnyas\u0131nda, jQuery gibi k\u00fct\u00fcphanelere olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n azalmas\u0131 bir trend haline gelmi\u015ftir. Taray\u0131c\u0131lar\u0131n yerel JavaScript yeteneklerinin geli\u015fmesiyle birlikte, <code>document.querySelector()<\/code> ve <code>document.querySelectorAll()<\/code> gibi g\u00fc\u00e7l\u00fc se\u00e7iciler arac\u0131l\u0131\u011f\u0131yla DOM manip\u00fclasyonu, olay y\u00f6netimi ve di\u011fer bir\u00e7ok g\u00f6rev art\u0131k Vanilla JavaScript ile daha verimli ve do\u011frudan ger\u00e7ekle\u015ftirilebilmektedir. Bu makale boyunca, jQuery'den vazge\u00e7menin nedenlerini, Vanilla JS se\u00e7icilerinin temellerini, ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, performans optimizasyon ipu\u00e7lar\u0131n\u0131 ve jQuery kodunu Vanilla JS'e nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011fimizi detayl\u0131 bir \u015fekilde inceledik. Amac\u0131m\u0131z, web geli\u015ftiricilerine daha hafif, daha h\u0131zl\u0131 ve daha s\u00fcrd\u00fcr\u00fclebilir uygulamalar olu\u015fturmalar\u0131 i\u00e7in gerekli bilgi ve ara\u00e7lar\u0131 sunmakt\u0131. Ba\u011f\u0131ml\u0131l\u0131klardan ar\u0131nmak, projenizin uzun vadeli bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131rken, ayn\u0131 zamanda taray\u0131c\u0131lar\u0131n sundu\u011fu en g\u00fcncel ve optimize edilmi\u015f API'lerden faydalanman\u0131z\u0131 sa\u011flar. Bu d\u00f6n\u00fc\u015f\u00fcm, sadece bir teknoloji se\u00e7imi de\u011fil, ayn\u0131 zamanda web geli\u015ftirme felsefenizin bir evrimidir.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li><strong>S: jQuery'siz JavaScript se\u00e7icileri kullanmak performans\u0131m\u0131 ne kadar art\u0131r\u0131r?<\/strong>\n<p><strong>C:<\/strong> Performans art\u0131\u015f\u0131, projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve jQuery kullan\u0131m yo\u011funlu\u011funa ba\u011fl\u0131 olarak de\u011fi\u015fir. Ancak, jQuery'nin getirdi\u011fi ek dosya boyutunu ortadan kald\u0131rmak ve taray\u0131c\u0131n\u0131n yerel DOM API'lerini do\u011frudan kullanmak genellikle sayfa y\u00fckleme s\u00fcresini h\u0131zland\u0131r\u0131r ve \u00e7al\u0131\u015fma zaman\u0131 performans\u0131n\u0131 iyile\u015ftirir. B\u00fcy\u00fck projelerde bu fark daha belirgin olabilir.<\/p>\n<\/li>\n<li><strong>S: <code>querySelector<\/code> ve <code>querySelectorAll<\/code> aras\u0131ndaki temel fark nedir?<\/strong>\n<p><strong>C:<\/strong> <code>querySelector()<\/code> sa\u011flanan CSS se\u00e7iciyle e\u015fle\u015fen *ilk* elementi d\u00f6nd\u00fcr\u00fcr veya e\u015fle\u015fme yoksa <code>null<\/code> d\u00f6nd\u00fcr\u00fcr. <code>querySelectorAll()<\/code> ise e\u015fle\u015fen *t\u00fcm* elementleri i\u00e7eren bir <code>NodeList<\/code> nesnesi d\u00f6nd\u00fcr\u00fcr veya e\u015fle\u015fme yoksa bo\u015f bir <code>NodeList<\/code> d\u00f6nd\u00fcr\u00fcr.<\/p>\n<\/li>\n<li><strong>S: <code>NodeList<\/code> bir dizi (Array) midir? Dizi metodlar\u0131n\u0131 kullanabilir miyim?<\/strong>\n<p><strong>C:<\/strong> <code>NodeList<\/code> bir dizi benzeri (array-like) koleksiyondur, ancak do\u011frudan bir JavaScript dizisi de\u011fildir. Bu nedenle, <code>map()<\/code>, <code>filter()<\/code> gibi do\u011frudan dizi metodlar\u0131n\u0131 kullanamazs\u0131n\u0131z. Ancak <code>forEach()<\/code> metodu ile \u00fczerinde d\u00f6ng\u00fc yapabilir veya <code>Array.from(nodeList)<\/code> ya da yayma operat\u00f6r\u00fc (<code>[...nodeList]<\/code>) kullanarak ger\u00e7ek bir diziye d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n<\/li>\n<li><strong>S: Eski taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in ne yapmal\u0131y\u0131m?<\/strong>\n<p><strong>C:<\/strong> <code>querySelector<\/code> ve <code>querySelectorAll<\/code> gibi metodlar modern taray\u0131c\u0131lar\u0131n \u00e7o\u011funda geni\u015f \u00e7apl\u0131 deste\u011fe sahiptir (IE8+). Daha eski taray\u0131c\u0131lar i\u00e7in (e\u011fer projenizin hedef kitlesi bunu gerektiriyorsa), <code>document.getElementById()<\/code>, <code>document.getElementsByClassName()<\/code> veya <code>document.getElementsByTagName()<\/code> gibi daha eski DOM API'lerini kullanman\u0131z veya bir polifil (polyfill) k\u00fct\u00fcphanesi entegre etmeniz gerekebilir. Ancak \u00e7o\u011fu modern web projesi i\u00e7in bu endi\u015feler ge\u00e7erli de\u011fildir.<\/p>\n<\/li>\n<li><strong>S: Animasyonlar ve AJAX istekleri gibi karma\u015f\u0131k jQuery \u00f6zelliklerini nas\u0131l Vanilla JS'e d\u00f6n\u00fc\u015ft\u00fcrebilirim?<\/strong>\n<p><strong>C:<\/strong> AJAX istekleri i\u00e7in <code>fetch API<\/code> veya <code>XMLHttpRequest<\/code> objesini kullanabilirsiniz. Animasyonlar i\u00e7in CSS ge\u00e7i\u015fleri (<code>transition<\/code>), CSS anahtar kare animasyonlar\u0131 (<code>@keyframes<\/code>) veya daha geli\u015fmi\u015f animasyonlar i\u00e7in <code>Web Animations API<\/code> kullan\u0131labilir. Bu yerel API'ler genellikle jQuery'den daha performansl\u0131 ve esnektir.<\/p>\n<\/li>\n<\/ul>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-34463","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber<\/title>\n<meta name=\"description\" content=\"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-16T22:31:11+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"jQuery’siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber\",\"datePublished\":\"2025-11-16T22:31:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\"},\"wordCount\":4513,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\",\"name\":\"jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-16T22:31:11+00:00\",\"description\":\"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery’siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber","description":"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber","og_description":"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.","og_url":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-16T22:31:11+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"25 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"jQuery’siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber","datePublished":"2025-11-16T22:31:11+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/"},"wordCount":4513,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/","name":"jQuery'siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-16T22:31:11+00:00","description":"jQuery ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131zdan kurtulmak ve web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak m\u0131 istiyorsunuz? Bu kapsaml\u0131 rehberde, modern JavaScript se\u00e7icilerini kullanarak performansl\u0131 ve bak\u0131m\u0131 kolay web uygulamalar\u0131 geli\u015ftirmeyi ad\u0131m ad\u0131m \u00f6\u011frenecek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla bilginizi peki\u015ftireceksiniz. Sayfa y\u00fckleme h\u0131z\u0131ndan kod temizli\u011fine kadar bir\u00e7ok alanda fark yaratacak bu yakla\u015f\u0131ma derinlemesine dalmaya haz\u0131r olun.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/jquerysiz-javascript-secicilerle-modern-web-gelistirme-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery’siz JavaScript Se\u00e7icilerle Modern Web Geli\u015ftirme: Kapsaml\u0131 Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34463"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34463\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}