[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri":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},36795,"Adım Adım JavaScript Temelleri: Kısa ve Çalışır Kod Örnekleri","Bu makale, yeni başlayanlar için JavaScript temellerini adım adım açıklayan kısa ve çalışır kod örnekleri sunar. Ayrıca DOM, asenkron programlama ve hata yakalama konuları için pratik adımlar ve kaynaklar içerir.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>Bu rehber, sıfırdan JavaScript öğrenmek isteyenler için kısa ve çalışır örneklerle temel kavramları adım adım açıklar. Örnekler tarayıcı konsolunda veya basit bir HTML dosyasında kolayca çalıştırılacak şekilde hazırlandı. Temel tanımlar ve daha derin okumalar için MDN Web Docs ve JavaScript.info gibi kaynaklara başvurmanızı öneririm; bu kaynaklar dili kapsamlı ve adım adım ele alır (\u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide'>MDN Web Docs\u003C/a>, \u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info\u003C/a>).\u003C/p>\n\n\u003Ch2>JavaScript nedir ve nerelerde kullanılır?\u003C/h2>\n\u003Cp>JavaScript, web sayfalarında etkileşim eklemek için en yaygın kullanılan programlama dillerinden biridir. Hem tarayıcı içinde (DOM manipülasyonu, olay işleme) hem de sunucu tarafında (Node.js) çalışır. Dili öğrenirken önce temel sözdizimini, veri tiplerini ve kontrol akışını öğrenmek, ardından DOM ve asenkron işlemlere geçmek pratik olur (özet kaynak: \u003Ca href='https://web.dev/learn/javascript/welcome'>web.dev\u003C/a>, \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide'>MDN Web Docs\u003C/a>).\u003C/p>\n\n\u003Ch2>Çalışma ortamları: Tarayıcı konsolu ve Node.js\u003C/h2>\n\u003Cp>Basit kodları tarayıcı konsolunda (Developer Tools) doğrudan çalıştırabilirsiniz. Daha geniş projeler veya sunucu tarafı kod için Node.js kullanılır. Tarayıcı ve Node ortamı arasındaki farklar, DOM erişiminin tarayıcıya özel olması gibi konularda önem taşır; bu farkları öğrenmek ileride hata çıkmasını azaltır (ayrıntılar için: \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide'>MDN\u003C/a>).\u003C/p>\n\n\u003Ch2>Hızlı Başlangıç: Konsolda 'Merhaba Dünya'\u003C/h2>\n\u003Cp>Tarayıcı konsolunda denemek için en basit örnek:\u003C/p>\n\u003Cblockquote>console.log('Merhaba, dünya!');\u003C/blockquote>\n\u003Cp>Bu satır konsola metin yazdırır. console.log, hata ayıklama ve çıktı kontrolü için en sık kullanılan araçlardan biridir.\u003C/p>\n\n\u003Ch3>Değişkenler ve veri tipleri\u003C/h3>\n\u003Cp>JavaScript'te değişkenleri \u003Cstrong>let\u003C/strong>, \u003Cstrong>const\u003C/strong> veya (eski kodlarda) \u003Cstrong>var\u003C/strong> ile tanımlarsınız. Temel veri tipleri: string, number, boolean, null, undefined, object ve symbol. Kısa örnekler:\u003C/p>\n\u003Cblockquote>// Değişken tanımlama\nconst isim = 'Ayşe';\nlet yas = 25;\nlet aktif = true;\n\n// Şablon stringleri\nconsole.log(`Merhaba ${isim}, yaşın ${yas}`);\n\u003C/blockquote>\n\u003Cp>\u003Cem>const\u003C/em> sabit atama için, \u003Cem>let\u003C/em> ise yeniden atama gerektiren durumlar için uygundur. (Kaynak: \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types'>MDN - Types\u003C/a>).\u003C/p>\n\n\u003Ch3>Fonksiyonlar, koşullar ve döngüler\u003C/h3>\n\u003Cp>Fonksiyonlar kodu yeniden kullanmanızı sağlar. Koşullar ve döngüler kontrol akışını yönetir. Örnek:\u003C/p>\n\u003Cblockquote>// Fonksiyon\nfunction topla(a, b) {\n  return a + b;\n}\n\n// Koşul\nif (topla(2, 3) > 4) {\n  console.log('Sonuç 4 ten büyük');\n}\n\n// Döngü\nfor (let i = 0; i \u003C 3; i++) {\n  console.log(i);\n}\n\u003C/blockquote>\n\u003Cp>Fonksiyonları arrow function biçiminde de yazabilirsiniz: \u003Cem>const kare = x => x * x;\u003C/em>.\u003C/p>\n\n\u003Ch3>Diziler ve nesneler\u003C/h3>\n\u003Cp>Diziler koleksiyonları, nesneler ise anahtar-değer çiftlerini tutar. Kısa örnek:\u003C/p>\n\u003Cblockquote>const sayilar = [1, 2, 3, 4];\nconst kareler = sayilar.map(x => x * x);\nconsole.log(kareler);\n\nconst kisi = { isim: 'Mehmet', yas: 30 };\nconsole.log(kisi.isim);\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>map\u003C/strong>, \u003Cstrong>filter\u003C/strong>, \u003Cstrong>reduce\u003C/strong> gibi metotlar dizilerle çalışırken sık kullanılır ve fonksiyonel bir yaklaşım sağlar.\u003C/p>\n\n\u003Ch2>DOM ile basit etkileşim örneği\u003C/h2>\n\u003Cp>Aşağıdaki örnek, bir butona tıklandığında metni değiştirmek için kullanılabilir. Bu kodu bir HTML dosyasında script içinde veya konsolda uygun şekilde çalıştırabilirsiniz.\u003C/p>\n\u003Cblockquote>// Buton ve paragraf seçme\nconst btn = document.querySelector('#myButton');\nconst p = document.querySelector('#myText');\n\nbtn.addEventListener('click', () => {\n  p.textContent = 'Butona tıkladınız!';\n});\n\u003C/blockquote>\n\u003Cp>DOM seçimi ve olay dinleme hakkında daha fazla bilgi için MDN'in DOM rehberine bakabilirsiniz: \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction'>MDN - DOM\u003C/a>.\u003C/p>\n\n\u003Ch2>Asenkron JavaScript: Promise ve async/await\u003C/h2>\n\u003Cp>Uzun süren işlemler (API çağrıları, dosya okuma vb.) asenkron olarak ele alınır. Promise yapısı veya async/await sözdizimi daha temiz kod sağlar. Kısa bir örnek (tarayıcıda çalıştırılabilir):\u003C/p>\n\u003Cblockquote>// Promise örneği\nfunction bekle(ms) {\n  return new Promise(resolve => setTimeout(resolve, ms));\n}\n\nasync function calistir() {\n  console.log('Başladı');\n  await bekle(500);\n  console.log('500 ms sonra devam');\n}\n\ncalistir();\n\u003C/blockquote>\n\u003Cp>Gerçek API çağrılarında \u003Cstrong>fetch\u003C/strong> kullanılır; detaylı kullanım ve tarayıcı farklılıkları için web.dev ve MDN kaynaklarına bakınız (\u003Ca href='https://web.dev/learn/javascript/'>web.dev\u003C/a>, \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'>MDN - Fetch API\u003C/a>).\u003C/p>\n\n\u003Ch2>Hata yakalama ve debug\u003C/h2>\n\u003Cp>Hata yakalamak için \u003Cstrong>try/catch\u003C/strong> kullanılır; console ve tarayıcı geliştirici araçları (DevTools) hata ayıklamada temel araçlardır. Örnek:\u003C/p>\n\u003Cblockquote>try {\n  JSON.parse('geçersiz json');\n} catch (e) {\n  console.error('JSON parse hatası:', e.message);\n}\n\u003C/blockquote>\n\u003Cp>DevTools ile değişkenleri inceleyebilir, breakpoint ekleyebilir ve çağrı yığınını görebilirsiniz. Bu, davranışı anlamak için en etkili yöntemlerden biridir.\u003C/p>\n\n\u003Ch2>Küçük proje fikirleri ve uygulama adımları\u003C/h2>\n\u003Cp>Pratik yaparken öğrenme hızınız artar. Başlangıç için önerilen mini projeler:\u003C/p>\n\u003Cul>\n  \u003Cli>To‑do listesi: görev ekleme, silme, tamamlandı işareti. Adımlar: HTML iskeleti → DOM seçimi → olay dinleyiciler → yerel depolama (localStorage).\u003C/li>\n  \u003Cli>Hava durumu uygulaması: ücretsiz bir API'den veri çekme → fetch ile veriyi gösterme → hata durumunu ele alma.\u003C/li>\n  \u003Cli>Basit hesap makinesi: olay tabanlı girişler → operatörlerin uygulanması → sonuç gösterimi.\u003C/li>\n  \u003Cli>Görsel galeri: küçük resim tıklanınca büyük resmi gösterme → basit CSS ile düzenleme.\u003C/li>\n\u003C/ul>\n\u003Cp>Her proje için önce küçük bir adım atın, sonra özellik ekleyin. Kaynakların adım adım kılavuzları öğrenmeyi hızlandırır (\u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info\u003C/a>).\u003C/p>\n\n\u003Ch2>İyi uygulamalar: kısa kontrol listesi\u003C/h2>\n\u003Cul>\n  \u003Cli>Önce \u003Cstrong>const\u003C/strong>, sonra \u003Cstrong>let\u003C/strong> kullanın; global değişkenlerden kaçının.\u003C/li>\n  \u003Cli>Fonksiyonları küçük ve tek sorumluluklu tutun.\u003C/li>\n  \u003Cli>Asenkron kodda hata yakalamayı unutmayın (try/catch veya .catch()).\u003C/li>\n  \u003Cli>Tarayıcı uyumluluğu gerekiyorsa polyfill veya transpilasyon (Babel) düşünün.\u003C/li>\n  \u003Cli>DevTools ve console ile düzenli olarak test edin.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kaynaklar ve sonraki adımlar\u003C/h2>\n\u003Cp>Daha derin bilgi için şu kaynakları öneririm: MDN Web Docs (genel referans ve API açıklamaları), JavaScript.info (temel ve örnek odaklı), Eloquent JavaScript (konsept derinliği) ve web.dev (modern web uygulamaları için rehberler).\u003C/p>\n\u003Cp>Önerilen bağlantılar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide'>MDN Web Docs - JavaScript Guide\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info - İlk Adımlar\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://eloquentjavascript.net/'>Eloquent JavaScript\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://web.dev/learn/javascript/welcome'>web.dev - Learn JavaScript\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>Bu makaledeki örnekler öğrenme amaçlıdır. Gerçek dünyada üretim (production) projelerinde performans, güvenlik ve tarayıcı uyumluluğu gibi ek adımlar gerekir. Başlarken küçük projelerle pratik yapın ve kaynaklara sık başvurun.\u003C/p>\n","Adım Adım JavaScript Temelleri: Kısa ve Çalışır Kod Örnekler","Yeni başlayanlar için hazırlanmış bu rehber, JavaScript temellerini adım adım, kısa ve çalışır kod örnekleriyle açıklar; değişkenler, fonksiyonlar, DOM, asenkro","JavaScript Temelleri, javascript başlangıç kodları, kolay kod örnekleri, adım adım javascript, JS öğrenme","adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri","2026-05-20T12:42:21.000Z",{"id":16,"title":17,"slug":18},201,"JavaScript Temelleri","javascript-temelleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/1b4fb3f708cf6f62fa786fa584d4939b.jpg","/media/blog/1b4fb3f708cf6f62fa786fa584d4939b_thumb.jpg","/media/blog/1b4fb3f708cf6f62fa786fa584d4939b.webp","/media/blog/1b4fb3f708cf6f62fa786fa584d4939b_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,792,0,"4 dk okuma süresi","/blog/javascript-temelleri/adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri",[],["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/1b4fb3f708cf6f62fa786fa584d4939b.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri",{"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/javascript-temelleri/adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri",["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/mert-kilicoglu",{"@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,113],{"@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":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/javascript-temelleri",{"@type":102,"position":30,"name":7,"item":65}]