[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-dom-manipulasyonunda-pratik-mini-projeler-ile-javascript-etkinliklerini-kesfedin":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},10906,"DOM Manipülasyonunda Pratik Mini Projeler ile JavaScript Etkinliklerini Keşfedin","DOM manipülasyonu ve JavaScript etkinlikleri üzerine pratik mini projelerle web geliştirme becerilerinizi geliştirin. Bu rehberde, temel kavramlardan başlayarak etkili mini projeler yapmayı öğreneceksiniz.","\u003Ch1>DOM Manipülasyonunda Pratik Mini Projeler ile JavaScript Etkinliklerini Keşfedin\u003C/h1>\u003Cp>Web geliştirme dünyasında \u003Cstrong>DOM\u003C/strong> (Document Object Model) ve \u003Cstrong>JavaScript\u003C/strong> etkinlikleri, interaktif ve dinamik kullanıcı deneyimleri oluşturmanın temel taşlarıdır. \u003Cstrong>Manipülasyon\u003C/strong> teknikleri sayesinde sayfa içeriğini değiştirebilir, kullanıcı etkileşimlerine anında yanıt verebilirsiniz. Bu yazıda, \u003Cstrong>DOM\u003C/strong> manipülasyonu ve \u003Cstrong>JavaScript\u003C/strong> etkinliklerini kullanarak gerçekleştirebileceğiniz pratik \u003Cstrong>mini projeler\u003C/strong> ile becerilerinizi geliştireceksiniz.\u003C/p>\u003Ch2>DOM ve JavaScript Etkinliklerine Giriş\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong>, web sayfasının yapısını temsil eden bir ağaç yapısıdır. Her HTML elementi bir düğüm olarak kabul edilir ve JavaScript ile bu düğümler üzerinde değişiklik yapabilir, yeni öğeler ekleyebilir veya silebilirsiniz. \u003Cstrong>JavaScript\u003C/strong> etkinlikleri ise kullanıcıların fare tıklaması, klavye kullanımı, sayfa yüklenmesi gibi hareketlerine tepki vermenizi sağlar. Bu iki kavramı birleştirerek interaktif web sayfaları oluşturabilirsiniz.\u003C/p>\u003Ch3>Temel DOM Manipülasyon Teknikleri\u003C/h3>\u003Cp>Başlangıç olarak, aşağıdaki temel yöntemlerle \u003Cstrong>DOM\u003C/strong> üzerinde çalışabilirsiniz:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>getElementById\u003C/strong>: Belirli bir id'ye sahip elementi seçer.\u003C/li>\u003Cli>\u003Cstrong>getElementsByClassName\u003C/strong>: Belirli bir sınıfa sahip elementleri seçer.\u003C/li>\u003Cli>\u003Cstrong>querySelector\u003C/strong> ve \u003Cstrong>querySelectorAll\u003C/strong>: CSS seçicilerine göre elementleri seçer.\u003C/li>\u003Cli>\u003Cstrong>innerHTML\u003C/strong> ve \u003Cstrong>textContent\u003C/strong>: Elementin içeriğini değiştirmek için kullanılır.\u003C/li>\u003Cli>\u003Cstrong>createElement\u003C/strong> ve \u003Cstrong>appendChild\u003C/strong>: Yeni elementler oluşturup DOM'a eklemek için kullanılır.\u003C/li>\u003C/ul>\u003Ch3>JavaScript Etkinlikleri ile Etkileşim\u003C/h3>\u003Cp>\u003Cstrong>Etkinlikler\u003C/strong>, kullanıcıların sayfa ile olan etkileşimlerini yakalamanızı sağlar. Örneğin:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>click\u003C/strong>: Bir elemente tıklanması.\u003C/li>\u003Cli>\u003Cstrong>mouseover\u003C/strong>: Fare bir elementin üzerine geldiğinde.\u003C/li>\u003Cli>\u003Cstrong>keydown\u003C/strong>: Klavyeden bir tuşa basılması.\u003C/li>\u003Cli>\u003Cstrong>submit\u003C/strong>: Form gönderimi.\u003C/li>\u003C/ul>\u003Cp>Bu etkinlikleri \u003Cstrong>addEventListener\u003C/strong> metodu ile dinleyebilir ve uygun fonksiyonları çalıştırabilirsiniz.\u003C/p>\u003Ch2>Pratik Mini Projelerle DOM Manipülasyonu\u003C/h2>\u003Cp>Aşağıda, \u003Cstrong>DOM\u003C/strong> ve \u003Cstrong>JavaScript\u003C/strong> etkinliklerini kullanarak yapabileceğiniz bazı pratik \u003Cstrong>mini projeler\u003C/strong> yer almaktadır. Bu projeler, hem temel hem de ileri seviye becerilerinizi geliştirmenize yardımcı olacaktır.\u003C/p>\u003Ch3>1. Dinamik Görev Listesi\u003C/h3>\u003Cp>Bu projede kullanıcı, bir metin kutusuna görev yazıp ekle butonuna tıkladığında, görev listesine yeni bir madde eklenir. Ayrıca, görevler tamamlandığında üzeri çizilebilir veya silinebilir.\u003C/p>\u003Cp>\u003Cstrong>Özellikler:\u003C/strong>\u003C/p>\u003Cul>\u003Cli>Görev ekleme\u003C/li>\u003Cli>Görev tamamlandığında stil değişikliği\u003C/li>\u003Cli>Görev silme\u003C/li>\u003C/ul>\u003Cp>Bu proje, \u003Cstrong>DOM\u003C/strong> öğelerinin dinamik olarak oluşturulması ve \u003Cstrong>click\u003C/strong> etkinliklerinin kullanılması açısından faydalıdır.\u003C/p>\u003Ch3>2. Renk Değiştiren Buton\u003C/h3>\u003Cp>Kullanıcı bir butona tıkladığında, sayfanın arka plan rengi rastgele bir renge dönüşür. Bu proje, \u003Cstrong>JavaScript\u003C/strong> ile stil manipülasyonunu ve \u003Cstrong>click\u003C/strong> etkinliğini öğrenmek için idealdir.\u003C/p>\u003Ch3>3. Canlı Arama Filtreleme\u003C/h3>\u003Cp>Bir liste içerisinden kullanıcı yazdıkça arama yapar ve eşleşen öğeleri gösterir. \u003Cstrong>keyup\u003C/strong> etkinliği ile kullanıcı yazdıkça filtreleme yapılır.\u003C/p>\u003Ch3>4. Açılır Menü (Dropdown) Kontrolü\u003C/h3>\u003Cp>Bir menü butonuna tıklandığında, alt menü açılır veya kapanır. Bu, \u003Cstrong>toggle\u003C/strong> sınıfı ekleyip kaldırarak yapılabilir ve \u003Cstrong>click\u003C/strong> etkinliği ile kontrol edilir.\u003C/p>\u003Ch3>5. Sayfa Kaydırma Butonu\u003C/h3>\u003Cp>Kullanıcı sayfayı belli bir miktar kaydırdığında, sayfanın en üstüne dönmek için bir buton görünür. Bu buton tıklandığında sayfa yukarı kayar. \u003Cstrong>scroll\u003C/strong> ve \u003Cstrong>click\u003C/strong> etkinlikleri kullanılır.\u003C/p>\u003Ch2>Mini Projelerde Başarı İçin İpuçları\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong> manipülasyonu ve \u003Cstrong>JavaScript\u003C/strong> etkinliklerini kullanırken aşağıdaki noktalara dikkat etmek, projelerinizin başarısını artırır:\u003C/p>\u003Cul>\u003Cli>\u003Cstrong>Elementleri doğru seçin:\u003C/strong> Seçicilerinizin doğru ve özgün olmasına dikkat edin.\u003C/li>\u003Cli>\u003Cstrong>Etkinlikleri verimli kullanın:\u003C/strong> Gereksiz etkinlik dinleyicilerinden kaçının.\u003C/li>\u003Cli>\u003Cstrong>Fonksiyonları modüler yazın:\u003C/strong> Kodunuzu küçük ve tekrar kullanılabilir parçalara bölün.\u003C/li>\u003Cli>\u003Cstrong>Hata kontrolü yapın:\u003C/strong> Kullanıcıdan gelen verileri kontrol ederek hataları önleyin.\u003C/li>\u003Cli>\u003Cstrong>Performansa dikkat edin:\u003C/strong> Çok fazla DOM manipülasyonundan kaçının, toplu güncellemeler yapın.\u003C/li>\u003C/ul>\u003Ch2>Sonuç\u003C/h2>\u003Cp>\u003Cstrong>DOM\u003C/strong> manipülasyonu ve \u003Cstrong>JavaScript\u003C/strong> etkinlikleri, modern web geliştirme için vazgeçilmez araçlardır. Bu yazıda bahsedilen pratik \u003Cstrong>mini projeler\u003C/strong> ile hem temel kavramları pekiştirebilir hem de gerçek dünya uygulamaları için sağlam bir temel oluşturabilirsiniz. Başlangıç Seviyesi Kod & Snippet Rehberi olarak, bu tür projelerle öğrenme sürecinizi desteklemeyi hedefliyoruz. Siz de bu mini projeleri deneyerek, kendi interaktif web sayfalarınızı kolayca oluşturabilirsiniz.\u003C/p>","Yazılım Öğrenme Rehberi: Yeni Başlayanlara Adım Adım Pratik Yazılım Projeleri [Kolay Anlatım]","DOM manipülasyonu ve JavaScript etkinlikleri ile pratik mini projeler yaparak web geliştirme becerilerinizi artırın. Adım adım rehber burada!","DOM, JavaScript, Manipulasyon, Mini Projeler, Etkinlikler, Web Geliirme, Kodlama, JavaScript Etkinlikleri","dom-manipulasyonunda-pratik-mini-projeler-ile-javascript-etkinliklerini-kesfedin","2026-01-21T09:57:31.000Z",{"id":16,"title":17,"slug":18},219,"JS Event ve DOM Mini Projeleri","js-event-dom-mini-projeleri",{"id":20,"name":21,"nickname":22,"slug":23},94,"Caner Şimşek","CodeSprout","caner-simsek","/media/blog/97adf8322e3b85a8a971bb0b46adfc4f.jpg","/media/blog/97adf8322e3b85a8a971bb0b46adfc4f_thumb.jpg","/media/blog/97adf8322e3b85a8a971bb0b46adfc4f.webp","/media/blog/97adf8322e3b85a8a971bb0b46adfc4f_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},3,500,0,"3 dk okuma süresi","/blog/js-event-dom-mini-projeleri/dom-manipulasyonunda-pratik-mini-projeler-ile-javascript-etkinliklerini-kesfedin",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/97adf8322e3b85a8a971bb0b46adfc4f.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-event-dom-mini-projeleri/dom-manipulasyonunda-pratik-mini-projeler-ile-javascript-etkinliklerini-kesfedin",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-event-dom-mini-projeleri/dom-manipulasyonunda-pratik-mini-projeler-ile-javascript-etkinliklerini-kesfedin",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/caner-simsek",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,112],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":30,"name":17,"item":111},"https://kodogreniyorum.com/blog/js-event-dom-mini-projeleri",{"@type":102,"position":113,"name":7,"item":65},4]