Bu hiyerar\u015fik yap\u0131 sayesinde, bir elementin ebeveynine, \u00e7ocuklar\u0131na veya karde\u015flerine kolayca eri\u015febiliriz. \u00d6rne\u011fin, bir <\/p>\n
<\/code> elementinin t\u00fcm alt elementlerini se\u00e7ip \u00fczerlerinde i\u015flem yapabiliriz. Bu a\u011fa\u00e7 yap\u0131s\u0131, JavaScript’in sayfa \u00fczerindeki her bir bile\u015feni hedeflemesini ve manip\u00fcle etmesini sa\u011flayan g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Geli\u015ftiriciler olarak, bu a\u011fa\u00e7 yap\u0131s\u0131n\u0131 zihnimizde canland\u0131rmak, hedefledi\u011fimiz elementlere do\u011fru yollarla ula\u015fmam\u0131z\u0131 ve bekledi\u011fimiz de\u011fi\u015fiklikleri yapmam\u0131z\u0131 sa\u011flar. Bir elementin parentNode<\/code>, children<\/code>, nextElementSibling<\/code> gibi \u00f6zellikleri, bu a\u011fa\u00e7ta gezinmemizi sa\u011flayan temel ara\u00e7lard\u0131r. Her bir d\u00fc\u011f\u00fcm, kendi i\u00e7inde farkl\u0131 \u00f6zelliklere ve metotlara sahiptir, bu da bize geni\u015f bir manip\u00fclasyon yelpazesi sunar.<\/p>\nDOM Manip\u00fclasyonunun Temelleri: Elementlere Eri\u015fim ve De\u011fi\u015fiklik<\/h3>\nJavaScript ile DOM \u00fczerinde i\u015flem yapabilmek i\u00e7in \u00f6ncelikle elementlere eri\u015fmemiz gerekir. Bunun i\u00e7in \u00e7e\u015fitli metotlar bulunur:<\/p>\n
\ngetElementById()<\/code>:<\/strong> Belirli bir id<\/code> niteli\u011fine sahip elementi se\u00e7er. En h\u0131zl\u0131 ve en spesifik y\u00f6ntemdir.<\/li>\n
getElementsByClassName()<\/code>:<\/strong> Belirli bir class<\/code> niteli\u011fine sahip t\u00fcm elementleri bir HTML koleksiyonu olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n
getElementsByTagName()<\/code>:<\/strong> Belirli bir etiket ad\u0131na sahip t\u00fcm elementleri d\u00f6nd\u00fcr\u00fcr.<\/li>\n
querySelector()<\/code>:<\/strong> CSS se\u00e7ici kullanarak belirtilen kritere uyan ilk elementi d\u00f6nd\u00fcr\u00fcr.<\/li>\n
querySelectorAll()<\/code>:<\/strong> CSS se\u00e7ici kullanarak belirtilen kritere uyan t\u00fcm elementleri bir NodeList olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\nBir elemente eri\u015fim sa\u011flad\u0131ktan sonra, onu de\u011fi\u015ftirebiliriz. \u0130\u015fte baz\u0131 temel manip\u00fclasyon \u00f6rnekleri:<\/p>\n
\n\/\/ HTML'deki bir div elementine eri\u015fim\nconst myDiv = document.getElementById('myDiv');\n\n\/\/ \u0130\u00e7eri\u011fini de\u011fi\u015ftirme\nmyDiv.innerHTML = 'Yeni Ba\u015fl\u0131k<\/h3>Bu i\u00e7erik JavaScript ile eklendi.<\/p>';\n\/\/ veya daha g\u00fcvenli bir \u015fekilde sadece metin i\u00e7eri\u011fi i\u00e7in:\n\/\/ myDiv.textContent = 'Sadece metin i\u00e7eri\u011fi.';\n\n\/\/ Stilini de\u011fi\u015ftirme\nmyDiv.style.backgroundColor = 'lightblue';\nmyDiv.style.color = 'darkblue';\n\n\/\/ Yeni bir element olu\u015fturma ve ekleme\nconst newParagraph = document.createElement('p');\nnewParagraph.textContent = 'Dynamik olarak olu\u015fturulan bir paragraf.';\nmyDiv.appendChild(newParagraph); \/\/ myDiv i\u00e7ine ekle\n\n\/\/ Bir class ekleme veya kald\u0131rma\nmyDiv.classList.add('active');\n\/\/ myDiv.classList.remove('active');\n\/\/ myDiv.classList.toggle('active'); \/\/ E\u011fer varsa kald\u0131r\u0131r, yoksa ekler.\n\n\/\/ Bir elementi kald\u0131rma\n\/\/ newParagraph.remove(); \/\/ ES6 sonras\u0131\n\/\/ myDiv.removeChild(newParagraph); \/\/ Daha eski y\u00f6ntem\n<\/pre>\n
<\/code><\/p>\n
Bu \u00f6rnekler, JavaScript'in DOM \u00fczerindeki g\u00fcc\u00fcn\u00fc net bir \u015fekilde g\u00f6stermektedir. Bir web sayfas\u0131n\u0131n i\u00e7eri\u011fini, stilini ve yap\u0131s\u0131n\u0131 tamamen dinamik olarak kontrol edebiliriz. Bu da bize s\u0131n\u0131rs\u0131z tasar\u0131m ve etkile\u015fim olanaklar\u0131 sunar. Daha karma\u015f\u0131k senaryolarda, bu temel manip\u00fclasyonlar\u0131 bir araya getirerek \u00e7ok daha zengin kullan\u0131c\u0131 deneyimleri yaratmak m\u00fcmk\u00fcnd\u00fcr. \u00d6rne\u011fin, bir kullan\u0131c\u0131 bir butona t\u0131klad\u0131\u011f\u0131nda, yeni bir modal pencere a\u00e7abilir, i\u00e7indeki verileri dinamik olarak doldurabilir ve pencere kapat\u0131ld\u0131\u011f\u0131nda onu DOM'dan kald\u0131rabiliriz. Bu t\u00fcr i\u015flemler, modern web uygulamalar\u0131n\u0131n temelini olu\u015fturur ve geli\u015ftiricilerin, son kullan\u0131c\u0131ya ki\u015fiselle\u015ftirilmi\u015f ve ak\u0131c\u0131 bir deneyim sunmas\u0131na olanak tan\u0131r.<\/p>\n
T\u0131klama Olaylar\u0131: Kullan\u0131c\u0131 Etkile\u015fimini Nas\u0131l Yakalar\u0131z?<\/h2>\nKullan\u0131c\u0131 etkile\u015fiminin en temel bi\u00e7imlerinden biri, bir elemente t\u0131klamakt\u0131r. T\u0131klama olaylar\u0131, web sayfalar\u0131n\u0131z\u0131n dinamik ve responsif olmas\u0131n\u0131 sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. JavaScript, DOM elementleri \u00fczerindeki bu t\u00fcr olaylar\u0131 dinlemek ve bunlara yan\u0131t vermek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar.<\/p>\n
addEventListener<\/code> ile Olay Dinleme: Basit Bir Uygulama<\/h3>\nBir elementin t\u0131klama olay\u0131n\u0131 yakalamak i\u00e7in en modern ve \u00f6nerilen y\u00f6ntem addEventListener()<\/code> metodunu kullanmakt\u0131r. Bu metot, bir elemente belirli bir olay t\u00fcr\u00fc (\u00f6rne\u011fin, 'click') meydana geldi\u011finde \u00e7al\u0131\u015facak bir fonksiyon (olay i\u015fleyici - event handler) ataman\u0131z\u0131 sa\u011flar.<\/p>\n
\n\/\/ HTML'de id'si 'myButton' olan bir buton oldu\u011funu varsayal\u0131m\nconst myButton = document.getElementById('myButton');\n\n\/\/ Butona t\u0131klama olay\u0131 dinleyicisi ekleyelim\nmyButton.addEventListener('click', function() {\n    alert('Butona t\u0131klad\u0131n\u0131z!');\n    \/\/ T\u0131klama sonras\u0131 ba\u015fka DOM manip\u00fclasyonlar\u0131 da yapabiliriz\n    const messageDiv = document.getElementById('messageArea');\n    if (messageDiv) {\n        messageDiv.textContent = 'Te\u015fekk\u00fcrler, i\u015fleminiz ba\u015far\u0131yla kaydedildi.';\n        messageDiv.style.color = 'green';\n    }\n});\n<\/pre>\n<\/code><\/p>\n
addEventListener()<\/code> metodunun avantajlar\u0131 \u015funlard\u0131r:<\/p>\n
\nBir elemente birden fazla olay i\u015fleyici ekleyebilirsiniz (\u00f6rne\u011fin, hem t\u0131klama hem de mouse \u00fczerine gelme olaylar\u0131 i\u00e7in).<\/li>\n
Olaylar\u0131 \"yakalama\" (capturing) veya \"kabarc\u0131kland\u0131rma\" (bubbling) a\u015famalar\u0131nda dinleyebilirsiniz (\u00fc\u00e7\u00fcnc\u00fc parametre ile kontrol edilir, varsay\u0131lan olarak bubbling'dir).<\/li>\n
Olay i\u015fleyicilerini removeEventListener()<\/code> ile kolayca kald\u0131rabilirsiniz.<\/li>\n<\/ul>\nBu esneklik, \u00f6zellikle karma\u015f\u0131k etkile\u015fimler ve performans optimizasyonu gerektiren durumlarda \u00e7ok \u00f6nemlidir. Ayr\u0131ca, tek bir olay i\u015fleyici i\u00e7inde birden fazla i\u015flemi tetikleyerek kodunuzu daha d\u00fczenli ve y\u00f6netilebilir hale getirebilirsiniz. Bir butona t\u0131kland\u0131\u011f\u0131nda sadece bir mesaj g\u00f6stermekle kalmay\u0131p, bir formun g\u00f6nderilmesini sa\u011flayabilir, bir animasyonu ba\u015flatabilir veya sunucuya bir veri iste\u011fi g\u00f6nderebilirsiniz. addEventListener<\/code> sayesinde, bu t\u00fcr karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131n\u0131 sorunsuz bir \u015fekilde y\u00f6netmek m\u00fcmk\u00fcn hale gelir.<\/p>\n
Olay Nesnesi (Event Object) ve Faydalar\u0131: Etkile\u015fimi Derinlemesine Anlamak<\/h3>\nBir olay meydana geldi\u011finde, olay i\u015fleyici fonksiyonuna otomatik olarak bir \"olay nesnesi\" (event object) parametre olarak iletilir. Bu nesne, olay hakk\u0131nda \u00e7ok de\u011ferli bilgiler i\u00e7erir ve bize olayla ilgili daha spesifik i\u015flemler yapma imkan\u0131 sunar.<\/p>\n
\nconst myLink = document.getElementById('myLink');\n\nmyLink.addEventListener('click', function(event) {\n    \/\/ Varsay\u0131lan davran\u0131\u015f\u0131 engelle (\u00f6rne\u011fin, linkin yeni sayfaya gitmesini engelle)\n    event.preventDefault(); \n\n    console.log('T\u0131klanan element:', event.target); \/\/ T\u0131klanan HTML elementini verir\n    console.log('Olay t\u00fcr\u00fc:', event.type); \/\/ \"click\"\n    console.log('Fare X koordinat\u0131:', event.clientX);\n    console.log('Fare Y koordinat\u0131:', event.clientY);\n\n    \/\/ Ba\u015fka bir elementin i\u00e7eri\u011fini g\u00fcncelle\n    document.getElementById('status').textContent = Linke t\u0131kland\u0131! Koordinatlar: (${event.clientX}, ${event.clientY})<\/code>;\n});\n<\/pre>\n<\/code><\/p>\n
Olay nesnesinin yayg\u0131n kullan\u0131lan \u00f6zellikleri ve metotlar\u0131:<\/p>\n
\nevent.target<\/code>:<\/strong> Olay\u0131 tetikleyen DOM elementini d\u00f6nd\u00fcr\u00fcr.<\/li>\n
event.currentTarget<\/code>:<\/strong> Olay dinleyicisinin ba\u011fl\u0131 oldu\u011fu elementi d\u00f6nd\u00fcr\u00fcr. (Event bubbling'de fark yarat\u0131r)<\/li>\n
event.type<\/code>:<\/strong> Olay\u0131n t\u00fcr\u00fcn\u00fc d\u00f6nd\u00fcr\u00fcr (\u00f6rne\u011fin, 'click', 'mouseover', 'submit').<\/li>\n
event.preventDefault()<\/code>:<\/strong> Olay\u0131n varsay\u0131lan eylemini engeller. \u00d6rne\u011fin, bir formun g\u00f6nderilmesini veya bir ba\u011flant\u0131n\u0131n yeni bir sayfaya y\u00f6nlendirmesini engelleyebilir.<\/li>\n
event.stopPropagation()<\/code>:<\/strong> Olay\u0131n DOM a\u011fac\u0131nda yukar\u0131 do\u011fru \"kabarc\u0131kland\u0131rmas\u0131n\u0131\" (bubbling) durdurur. Bu, i\u00e7 i\u00e7e elementlerde istenmeyen olay tetiklemelerini \u00f6nlemek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ul>\nevent<\/code> nesnesi, kullan\u0131c\u0131 etkile\u015fimini anlamak ve ona daha ak\u0131ll\u0131ca yan\u0131t vermek i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u00d6zellikle form do\u011frulamalar\u0131, s\u00fcr\u00fckle-b\u0131rak i\u015flevleri veya karma\u015f\u0131k aray\u00fcz elementleri geli\u015ftirirken bu nesnenin sundu\u011fu bilgiler hayati \u00f6nem ta\u015f\u0131r. Bu nesneyi etkin bir \u015fekilde kullanmak, kullan\u0131c\u0131 etkile\u015fimlerini daha hassas bir \u015fekilde kontrol etmenizi ve daha zengin uygulamalar geli\u015ftirmenizi sa\u011flar.<\/p>\n
Web API'leri ile G\u00fcc\u00fc Art\u0131rma: Taray\u0131c\u0131n\u0131n Gizli Yetenekleri Nelerdir?<\/h2>\nTaray\u0131c\u0131lar, sadece HTML, CSS ve JavaScript \u00e7al\u0131\u015ft\u0131rmakla kalmaz; ayn\u0131 zamanda geli\u015ftiricilere \u00e7ok \u00e7e\u015fitli \"Web API'leri\" (Application Programming Interfaces) arac\u0131l\u0131\u011f\u0131yla zengin i\u015flevsellik sunar. Bu API'leri kullanarak konum bilgisi, kamera eri\u015fimi, depolama, bildirimler ve daha bir\u00e7ok taray\u0131c\u0131 \u00f6zelli\u011fine JavaScript arac\u0131l\u0131\u011f\u0131yla eri\u015febiliriz. Web API'leri, web uygulamalar\u0131n\u0131n yeteneklerini geleneksel masa\u00fcst\u00fc uygulamalar\u0131 seviyesine yakla\u015ft\u0131ran, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir.<\/p>\n
Fetch API ile Veri \u00c7ekme: Harici Kaynaklar\u0131 Uygulamaya Entegre Etme<\/h3>\nWeb uygulamalar\u0131n\u0131n \u00e7o\u011funda, dinamik i\u00e7erik sa\u011flamak i\u00e7in sunuculardan veri \u00e7ekmemiz gerekir. Eskiden AJAX (Asynchronous JavaScript and XML) ve XMLHttpRequest<\/code> nesnesi bu i\u015f i\u00e7in kullan\u0131l\u0131rd\u0131. Ancak g\u00fcn\u00fcm\u00fczde, daha modern ve esnek bir y\u00f6ntem olan Fetch API tercih edilmektedir. Fetch API, a\u011f istekleri yapmak i\u00e7in Promise tabanl\u0131 bir aray\u00fcz sa\u011flar, bu da asenkron veri i\u015flemlerini \u00e7ok daha okunabilir ve y\u00f6netilebilir hale getirir.<\/p>\n
\nconst dataContainer = document.getElementById('data-container');\nconst fetchButton = document.getElementById('fetch-data-button');\n\nfetchButton.addEventListener('click', () => {\n    \/\/ Bir JSON Placeholder API'den g\u00f6nderi verilerini \u00e7ekelim\n    fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1')\n        .then(response => {\n            \/\/ Yan\u0131t\u0131n ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n            if (!response.ok) {\n                throw new Error(HTTP hata! Durum: ${response.status}<\/code>);\n            }\n            return response.json(); \/\/ Yan\u0131t\u0131 JSON olarak ayr\u0131\u015ft\u0131r\n        })\n        .then(data => {\n            \/\/ Gelen veriyi DOM'a yans\u0131t\n            dataContainer.innerHTML = Ba\u015fl\u0131k: ${data.title}<\/h3>\n                \u0130\u00e7erik: ${data.body}<\/p><\/code>;\n            dataContainer.style.backgroundColor = '#e6ffe6';\n            dataContainer.style.border = '1px solid green';\n            dataContainer.style.padding = '15px';\n            dataContainer.style.marginTop = '10px';\n        })\n        .catch(error => {\n            \/\/ Hata durumunda konsola yazd\u0131r veya kullan\u0131c\u0131ya g\u00f6ster\n            console.error('Veri \u00e7ekme hatas\u0131:', error);\n            dataContainer.innerHTML = 
Veri y\u00fcklenirken bir hata olu\u015ftu: ${error.message}<\/p><\/code>;\n        });\n});\n<\/pre>\n
<\/code><\/p>\n
Fetch API ile sadece GET<\/code> istekleri yapmakla kalmaz, ayn\u0131 zamanda POST<\/code>, PUT<\/code>, DELETE<\/code> gibi di\u011fer HTTP metotlar\u0131yla sunucuya veri g\u00f6nderebilirsiniz. Bu, kullan\u0131c\u0131lar\u0131n veri girebildi\u011fi, g\u00fcncelleyebildi\u011fi veya silebildi\u011fi dinamik uygulamalar geli\u015ftirmek i\u00e7in kritik \u00f6neme sahiptir. Fetch API, modern web uygulamalar\u0131nda veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek i\u00e7in en \u00e7ok kullan\u0131lan ve en g\u00fc\u00e7l\u00fc Web API'lerinden biridir. Asenkron yap\u0131s\u0131 sayesinde, veri \u00e7ekme i\u015flemleri kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) bloklamaz, b\u00f6ylece kullan\u0131c\u0131lar verilerin y\u00fcklenmesini beklerken bile sayfayla etkile\u015fime devam edebilirler. Bu da daha ak\u0131c\u0131 ve tepkisel bir kullan\u0131c\u0131 deneyimi sa\u011flar.<\/p>\n
Geolocation API ile Konum Servisleri: Kullan\u0131c\u0131 Deneyimini Zenginle\u015ftirme<\/h3>\nWeb API'lerinin bir ba\u015fka harika \u00f6rne\u011fi de Geolocation API'dir. Bu API, kullan\u0131c\u0131n\u0131n izniyle taray\u0131c\u0131n\u0131n co\u011frafi konum bilgilerine (enlem, boylam) eri\u015fmemizi sa\u011flar. Bu \u00f6zellik, harita uygulamalar\u0131, yerel i\u015fletme bulucular veya hava durumu uygulamalar\u0131 gibi konuma dayal\u0131 servisler geli\u015ftirmek i\u00e7in paha bi\u00e7ilmezdir.<\/p>\n
\nconst locationInfo = document.getElementById('location-info');\nconst getLocationButton = document.getElementById('get-location-button');\n\ngetLocationButton.addEventListener('click', () => {\n    if ('geolocation' in navigator) {\n        \/\/ Co\u011frafi konum API'si destekleniyor\n        locationInfo.textContent = 'Konum al\u0131n\u0131yor...';\n        navigator.geolocation.getCurrentPosition(\n            (position) => {\n                \/\/ Ba\u015far\u0131l\u0131 olursa\n                const latitude = position.coords.latitude;\n                const longitude = position.coords.longitude;\n                locationInfo.innerHTML = Enlem: ${latitude}<\/strong><\/p>\n                    
Boylam: ${longitude}<\/strong><\/p>\n                    
Bu konum bilgileri, harita uygulamalar\u0131nda veya yerel hizmetleri bulmak i\u00e7in kullan\u0131labilir.<\/p><\/code>;\n                locationInfo.style.backgroundColor = '#e6f7ff';\n                locationInfo.style.border = '1px solid #3399ff';\n                locationInfo.style.padding = '15px';\n                locationInfo.style.marginTop = '10px';\n            },\n            (error) => {\n                \/\/ Hata olursa\n                let errorMessage;\n                switch (error.code) {\n                    case error.PERMISSION_DENIED:\n                        errorMessage = 'Kullan\u0131c\u0131 konum iznini reddetti.';\n                        break;\n                    case error.POSITION_UNAVAILABLE:\n                        errorMessage = 'Konum bilgisi mevcut de\u011fil.';\n                        break;\n                    case error.TIMEOUT:\n                        errorMessage = 'Konum iste\u011fi zaman a\u015f\u0131m\u0131na u\u011frad\u0131.';\n                        break;\n                    default:\n                        errorMessage = 'Bilinmeyen bir hata olu\u015ftu.';\n                        break;\n                }\n                locationInfo.innerHTML = 
Konum al\u0131namad\u0131: ${errorMessage}<\/p><\/code>;\n                console.error('Konum hatas\u0131:', error);\n            },\n            {\n                enableHighAccuracy: true, \/\/ Daha y\u00fcksek do\u011fruluk iste\n                timeout: 5000,           \/\/ 5 saniye i\u00e7inde yan\u0131t bekle\n                maximumAge: 0            \/\/ \u00d6nbelle\u011fe al\u0131nm\u0131\u015f konum kullanma\n            }\n        );\n    } else {\n        \/\/ Taray\u0131c\u0131 desteklemiyor\n        locationInfo.innerHTML = '
Taray\u0131c\u0131n\u0131z co\u011frafi konum API\\'sini desteklemiyor.<\/p>';\n    }\n});\n<\/pre>\n
<\/code><\/p>\n
Geolocation API, kullan\u0131c\u0131 gizlili\u011fi a\u00e7\u0131s\u0131ndan \u00f6nemlidir ve bu nedenle kullan\u0131c\u0131n\u0131n a\u00e7\u0131k r\u0131zas\u0131n\u0131 gerektirir. Kullan\u0131c\u0131 izin vermedi\u011fi s\u00fcrece konum bilgisine eri\u015filemez. Bu API'nin sundu\u011fu olanaklar, web uygulamalar\u0131n\u0131 masa\u00fcst\u00fc ve mobil uygulamalarla rekabet edebilir hale getiren \u00f6nemli bir fakt\u00f6rd\u00fcr. Haritalar \u00fczerinde i\u015faret\u00e7iler g\u00f6stermek, belirli bir konuma yak\u0131n etkinlikleri listelemek veya hatta art\u0131r\u0131lm\u0131\u015f ger\u00e7eklik (AR) deneyimleri i\u00e7in temel verileri sa\u011flamak gibi bir\u00e7ok senaryoda kullan\u0131labilir. Taray\u0131c\u0131lar\u0131n sundu\u011fu bu t\u00fcr API'ler, web geli\u015ftirmenin gelece\u011finde merkezi bir rol oynamaya devam edecektir.<\/p>\n
Uzman \u0130pucu: Web API'lerini kullan\u0131rken her zaman hata denetimi (error handling) yapmaya \u00f6zen g\u00f6sterin. Kullan\u0131c\u0131 izinleri, a\u011f ba\u011flant\u0131s\u0131 sorunlar\u0131 veya API'nin taray\u0131c\u0131 deste\u011fi gibi fakt\u00f6rler, uygulaman\u0131z\u0131n beklenmedik \u015fekillerde davranmas\u0131na neden olabilir. G\u00fc\u00e7l\u00fc try...catch<\/code> bloklar\u0131 ve if ('API_ad\u0131' in navigator)<\/code> gibi kontrollerle uygulaman\u0131z\u0131 daha sa\u011flam hale getirebilirsiniz.<\/div>\nGeli\u015fmi\u015f Teknikler ve Performans: Daha Verimli Etkile\u015fimler \u0130\u00e7in \u0130pu\u00e7lar\u0131<\/h2>\nB\u00fcy\u00fck ve karma\u015f\u0131k web uygulamalar\u0131nda, temel DOM manip\u00fclasyonlar\u0131 ve olay dinleyicileri performans sorunlar\u0131na yol a\u00e7abilir. Bu nedenle, daha verimli ve optimize edilmi\u015f etkile\u015fimler sa\u011flamak i\u00e7in baz\u0131 ileri d\u00fczey teknikleri bilmek \u00f6nemlidir.<\/p>\n
Event Delegation: Performans Optimizasyonu \u0130\u00e7in Kritik Bir Yakla\u015f\u0131m<\/h3>\nBir listedeki her bir \u00f6\u011feye ayr\u0131 ayr\u0131 t\u0131klama olay\u0131 dinleyicisi eklemek yerine, bu \u00f6\u011felerin ortak ebeveynine tek bir olay dinleyicisi ekleyerek performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabiliriz. Bu tekni\u011fe \"Event Delegation\" (Olay Delegasyonu) denir. Olaylar, DOM a\u011fac\u0131nda yukar\u0131 do\u011fru \"kabarc\u0131klan\u0131r\" (bubbling). Yani, bir alt elementte bir olay tetiklendi\u011finde, bu olay ebeveyn elementlerine do\u011fru yay\u0131l\u0131r. Event Delegation, bu kabarc\u0131klanma \u00f6zelli\u011finden yararlanarak, tek bir olay dinleyicisi ile bir\u00e7ok alt elementi y\u00f6netmemizi sa\u011flar.<\/p>\n
\n\/\/ HTML'de id'si 'myList' olan bir ul listesi oldu\u011funu varsayal\u0131m\nconst myList = document.getElementById('myList');\n\n\/\/ Her bir li elementine tek tek dinleyici eklemek yerine, ul elementine ekleyelim\nmyList.addEventListener('click', function(event) {\n    \/\/ T\u0131klanan elementin bir li elementi olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n    if (event.target.tagName === 'LI') {\n        const clickedItem = event.target;\n        alert(T\u0131klad\u0131\u011f\u0131n\u0131z liste \u00f6\u011fesi: ${clickedItem.textContent}<\/code>);\n        clickedItem.style.backgroundColor = '#f0f8ff'; \/\/ T\u0131klanan \u00f6\u011fenin rengini de\u011fi\u015ftir\n        clickedItem.style.fontWeight = 'bold';\n    }\n});\n<\/pre>\n<\/code><\/p>\n
Bu yakla\u015f\u0131m\u0131n faydalar\u0131:<\/p>\n
\nBellek Tasarrufu:<\/strong> Y\u00fczlerce veya binlerce \u00f6\u011feye ayr\u0131 ayr\u0131 olay dinleyicileri eklemek yerine, sadece bir tane ekleyerek bellek kullan\u0131m\u0131n\u0131 azalt\u0131r\u0131z.<\/li>\n
Dinamik \u0130\u00e7erik Y\u00f6netimi:<\/strong> Listeye yeni \u00f6\u011feler eklendi\u011finde veya mevcutlar kald\u0131r\u0131ld\u0131\u011f\u0131nda, yeni olay dinleyicileri eklemeye veya mevcutlar\u0131 kald\u0131rmaya gerek kalmaz. Ebeveyn element \u00fczerindeki tek dinleyici, yeni \u00f6\u011feler i\u00e7in de \u00e7al\u0131\u015f\u0131r.<\/li>\n
Performans Art\u0131\u015f\u0131:<\/strong> Daha az olay dinleyici, sayfa y\u00fckleme s\u00fcresini ve \u00e7al\u0131\u015fma zaman\u0131 performans\u0131n\u0131 iyile\u015ftirir.<\/li>\n<\/ul>\nEvent Delegation, \u00f6zellikle dinamik olarak de\u011fi\u015fen listeler, tablolar veya men\u00fcler gibi bile\u015fenlerde \u00e7ok g\u00fc\u00e7l\u00fc bir tekniktir. Bu y\u00f6ntem, uygulaman\u0131z\u0131n daha az kaynak t\u00fcketmesini ve daha ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayarak genel kullan\u0131c\u0131 deneyimini art\u0131r\u0131r.<\/p>\n
Mobil Uyumlu Tasar\u0131m ve Etkile\u015fim: Her Cihazda Kusursuz Deneyim<\/h3>\nG\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131lar\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131 web sitelerine mobil cihazlardan eri\u015fiyor. Bu nedenle, web uygulamalar\u0131m\u0131z\u0131n mobil uyumlu (responsive) olmas\u0131 ve farkl\u0131 ekran boyutlar\u0131nda do\u011fru \u015fekilde \u00e7al\u0131\u015fmas\u0131 kritik \u00f6neme sahiptir. DOM, t\u0131klama olaylar\u0131 ve Web API'leri mobil cihazlarda da ayn\u0131 prensiplerle \u00e7al\u0131\u015f\u0131r, ancak baz\u0131 ek noktalar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak gerekir:<\/p>\n
\nDokunmatik Olaylar:<\/strong> Mobil cihazlarda \"click\" olay\u0131n\u0131n yan\u0131 s\u0131ra \"touchstart\", \"touchmove\", \"touchend\" gibi dokunmatik olaylar\u0131 da kullanmak gerekebilir. Bu olaylar, daha hassas dokunmatik etkile\u015fimler sa\u011flamak i\u00e7in faydal\u0131d\u0131r.<\/li>\n
Performans:<\/strong> Mobil cihazlar\u0131n i\u015flem g\u00fcc\u00fc ve a\u011f ba\u011flant\u0131s\u0131 masa\u00fcst\u00fc cihazlara g\u00f6re daha k\u0131s\u0131tl\u0131 olabilir. B\u00fcy\u00fck DOM manip\u00fclasyonlar\u0131ndan veya yo\u011fun API \u00e7a\u011fr\u0131lar\u0131ndan ka\u00e7\u0131nmak, mobil performans\u0131 art\u0131racakt\u0131r. Animasyonlar\u0131 ve ge\u00e7i\u015fleri CSS ile y\u00f6netmek genellikle JavaScript ile y\u00f6netmekten daha performansl\u0131d\u0131r.<\/li>\n
Duyarl\u0131 Tasar\u0131m (Responsive Design):<\/strong> CSS media query'leri kullanarak farkl\u0131 ekran boyutlar\u0131na g\u00f6re stil ve hatta DOM yap\u0131s\u0131n\u0131 de\u011fi\u015ftirebiliriz. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda men\u00fcleri gizleyip bir \"hamburger men\u00fc\" ikonu ile a\u00e7\u0131lmalar\u0131n\u0131 sa\u011flayabiliriz.<\/li>\n<\/ol>\n\n\/* CSS dosyas\u0131nda veya