[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-yeni-baslayanlar-icin-javascript-temelleri-adim-adim-kilavuz":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},24874,"Yeni Başlayanlar için JavaScript Temelleri: Adım Adım Kılavuz","Bu kılavuz, JavaScript'e yeni başlayanlar için temel kavramları, değişkenleri, fonksiyonları ve basit örnekleri adım adım açıklar.","\u003Ch2>Yeni Başlayanlar için JavaScript Temelleri: Adım Adım Kılavuz\u003C/h2>\n\u003Cp>JavaScript, web sayfalarını etkileşimli hale getirmek için yaygın olarak kullanılan bir programlama dilidir. Bu kılavuz, \"javascript başlangıç kodları\" arayan yeni başlayanlara yönelik olarak temel kavramları, pratik örnekleri ve küçük bir proje adımlarını sunar. Amacımız kısa zamanda çalışır durumda örnekler görmek ve öğrenme temellerinizi sağlamlaştırmaktır.\u003C/p>\n\n\u003Ch3>Bu kılavuzda neler var?\u003C/h3>\n\u003Cul>\n\u003Cli>Kurulum ve hemen deneme\u003C/li>\n\u003Cli>Değişkenler, veri tipleri ve operatörler\u003C/li>\n\u003Cli>Fonksiyonlar, kontrol akışı ve döngüler\u003C/li>\n\u003Cli>Diziler, nesneler ve DOM etkileşimi\u003C/li>\n\u003Cli>Basit bir to‑do uygulaması için adımlar ve iyi uygulamalar\u003C/li>\n\u003C/ul>\n\n\u003Ch3>JavaScript nedir ve nerede kullanılır?\u003C/h3>\n\u003Cp>JavaScript hem tarayıcıda çalışan hem de sunucu tarafında (örneğin Node.js ile) kullanılabilen bir dildir. Tarayıcı tarafında sayfa güncellemeleri, form doğrulamaları, animasyonlar ve kullanıcı etkileşimleri için kullanılır. Daha teknik detaylar ve referans örnekleri için MDN Web Docs kaynaklarını inceleyebilirsiniz: \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toWellFormed'>toWellFormed()\u003C/a>, \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/isWellFormed'>isWellFormed()\u003C/a> ve \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets'>unicodeSets\u003C/a>.\u003C/p>\n\n\u003Ch3>Hemen denemek için hazırlık\u003C/h3>\n\u003Cp>Denemeye başlamak için iki kolay yol vardır:\u003C/p>\n\u003Col>\n\u003Cli>Tarayıcı konsolu: Herhangi bir tarayıcıda geliştirici araçlarını açın ve Console sekmesinde kod çalıştırın (örneğin sağ tık > İncele / Inspect).\u003C/li>\n\u003Cli>Node.js: Yerel ortama Node.js kurup terminalde node komutunu kullanarak dosyalarınızı çalıştırın (https://nodejs.org adresinden resmi kurulum yapılabilir).\u003C/li>\n\u003C/ol>\n\u003Cp>İlk küçük alıştırma:\u003C/p>\n\u003Cblockquote>\u003Cp>console.log('Merhaba Dünya');\u003C/p>\u003C/blockquote>\n\n\u003Ch3>Değişkenler: let, const ve var\u003C/h3>\n\u003Cp>Veri saklamak için değişkenler kullanılır. Modern JavaScript'te \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> tercih edilir. Özet:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>const\u003C/strong>: Atandıktan sonra yeniden atanmaz; sabit değerler için kullanılır.\u003C/li>\n\u003Cli>\u003Cstrong>let\u003C/strong>: Blok kapsamlı (block-scoped) değişken, yeniden atanabilir.\u003C/li>\n\u003Cli>\u003Cstrong>var\u003C/strong>: Fonksiyon kapsamlıdır (function-scoped) ve bazı beklenmedik davranışlara yol açabilir; yeni kodlarda genelde tercih edilmez.\u003C/li>\n\u003C/ul>\n\u003Cp>Örnek:\u003C/p>\n\u003Cblockquote>\u003Cp>let isim = 'Ayşe';\u003Cbr>const PI = 3.14;\u003Cbr>isim = 'Ali';\u003Cbr>console.log(isim);\u003C/p>\u003C/blockquote>\n\n\u003Ch3>Veri tipleri ve typeof\u003C/h3>\n\u003Cp>Temel tipler: String, Number, Boolean, null, undefined, Object, Symbol. \u003Cstrong>typeof\u003C/strong> ile tür kontrolü yapabilirsiniz. Örneklerle farklara göz atalım:\u003C/p>\n\u003Cblockquote>\u003Cp>console.log(typeof 'merhaba'); // 'string'\u003Cbr>console.log(typeof 42); // 'number'\u003Cbr>console.log(typeof null); // 'object' (tarihi bir davranış sonucu)\u003Cbr>console.log(typeof undefined); // 'undefined'\u003C/p>\u003C/blockquote>\n\u003Cp>Not: \u003Cstrong>null\u003C/strong> ve \u003Cstrong>undefined\u003C/strong> farklıdır; null bilinçli boş değeri, undefined ise atanmamışlığı gösterir.\u003C/p>\n\n\u003Ch3>Fonksiyonlar: tanımlama, parametreler, arrow\u003C/h3>\n\u003Cp>Fonksiyonlar tekrar kullanılabilir kod parçaları sağlar. Hem geleneksel hem de arrow fonksiyonları öğrenin.\u003C/p>\n\u003Cblockquote>\u003Cp>function topla(a, b) {\u003Cbr>  return a + b;\u003Cbr>}\u003Cbr>console.log(topla(2, 3));\u003C/p>\u003C/blockquote>\n\u003Cblockquote>\u003Cp>const carp = (x, y) => x * y;\u003Cbr>console.log(carp(4, 5));\u003C/p>\u003C/blockquote>\n\u003Cp>Ayrıca varsayılan (default) parametreler ve rest parametreleri işe yarar:\u003C/p>\n\u003Cblockquote>\u003Cp>function selam(isim = 'Dünya') {\u003Cbr>  return `Merhaba, ${isim}!`;\u003Cbr>}\u003Cbr>console.log(selam()); // 'Merhaba, Dünya!'\u003C/p>\u003C/blockquote>\n\n\u003Ch3>Kontrol akışı ve döngüler\u003C/h3>\n\u003Cp>Koşullar ve döngüler program akışını yönetir:\u003C/p>\n\u003Cblockquote>\u003Cp>const sayi = 5;\u003Cbr>if (sayi % 2 === 0) {\u003Cbr>  console.log('Çift');\u003Cbr>} else {\u003Cbr>  console.log('Tek');\u003Cbr>}\u003C/p>\u003C/blockquote>\n\u003Cp>for, while ve for...of gibi döngüler sık kullanılır:\u003C/p>\n\u003Cblockquote>\u003Cp>for (let i = 0; i < 5; i++) {\u003Cbr>  console.log(i);\u003Cbr>}\u003C/p>\u003C/blockquote>\n\n\u003Ch3>Diziler ve nesneler: sık kullanılan metotlar\u003C/h3>\n\u003Cp>Diziler ve nesneler JavaScript'te veriyi organize etmek için merkezidir. Önemli dizi metotları: push, pop, map, filter, reduce.\u003C/p>\n\u003Cblockquote>\u003Cp>const arr = [1, 2, 3];\u003Cbr>arr.push(4);\u003Cbr>const kare = arr.map(n => n * n);\u003Cbr>const even = arr.filter(n => n % 2 === 0);\u003Cbr>console.log(kare, even);\u003C/p>\u003C/blockquote>\n\u003Cp>Nesnelerde anahtar-değer yapısı kullanılır:\u003C/p>\n\u003Cblockquote>\u003Cp>const kisi = { isim: 'Merve', yas: 28 };\u003Cbr>kisi.yas = 29;\u003Cbr>console.log(kisi.isim, kisi.yas);\u003C/p>\u003C/blockquote>\n\n\u003Ch3>Basit DOM etkileşimi: metin güncelleme ve olay\u003C/h3>\n\u003Cp>Tarayıcıda HTML ile etkileşime geçmek için DOM API'sini kullanın. Örnek: bir sayfadaki metni değiştirme ve butona tıklama olayı ekleme.\u003C/p>\n\u003Cblockquote>\u003Cp>const el = document.querySelector('#mesaj');\u003Cbr>el.textContent = 'Merhaba!';\u003Cbr>const btn = document.querySelector('#ekle');\u003Cbr>btn.addEventListener('click', function() {\u003Cbr>  console.log('Butona tıklandı');\u003Cbr>});\u003C/p>\u003C/blockquote>\n\u003Cp>textContent, elementin yalnızca metnini değiştirirken kullanışlıdır; innerHTML HTML içeriğini işler ve dışarıdan gelen veri ile kullanırken dikkat etmek gerekir.\u003C/p>\n\n\u003Ch3>10 Dakikalık Başlangıç Rutini\u003C/h3>\n\u003Cp>Her gün kısa süre pratik yapmak öğrenmeyi hızlandırır. Örnek 10 dakikalık rutin:\u003C/p>\n\u003Cul>\n\u003Cli>1-2 dakika: Tarayıcı konsolunu açıp console.log ile mesaj yazdırma.\u003C/li>\n\u003Cli>2-3 dakika: let/const ile birkaç değişken tanımlayıp türlerini typeof ile kontrol etme.\u003C/li>\n\u003Cli>2 dakika: Basit bir fonksiyon yazıp çağırma (örneğin topla).\u003C/li>\n\u003Cli>2-3 dakika: Bir dizi oluşturup map veya filter ile küçük dönüşümler yapma.\u003C/li>\n\u003C/ul>\n\u003Cp>Bu kısa döngüleri düzenli tekrarlamak kavramların yerleşmesine yardımcı olur.\u003C/p>\n\n\u003Ch3>Küçük proje: To‑Do uygulaması (örnek akış ve kod parçaları)\u003C/h3>\n\u003Cp>Bu uygulama için temel akış:\u003C/p>\n\u003Col>\n\u003Cli>HTML'de bir input, ekle butonu ve ul listesi oluşturun.\u003C/li>\n\u003Cli>tasks dizisi ile görevleri saklayın.\u003C/li>\n\u003Cli>addTask fonksiyonu input değerini alıp diziye eklesin ve renderTasks ile listeyi güncellesin.\u003C/li>\n\u003Cli>silme için her maddeye bir buton ekleyin ve ilgili diziden kaldırın.\u003C/li>\n\u003C/ol>\n\u003Cp>Basit addTask ve renderTasks örneği:\u003C/p>\n\u003Cblockquote>\u003Cp>let tasks = [];\u003Cbr>const input = document.querySelector('#taskInput');\u003Cbr>const list = document.querySelector('#taskList');\u003Cbr>function addTask() {\u003Cbr>  const text = input.value.trim();\u003Cbr>  if (text) {\u003Cbr>    tasks.push(text);\u003Cbr>    input.value = '';\u003Cbr>    renderTasks();\u003Cbr>  }\u003Cbr>}\u003Cbr>function renderTasks() {\u003Cbr>  list.innerHTML = ''; // basit render\u003Cbr>  tasks.forEach((t, i) => {\u003Cbr>    const li = document.createElement('li');\u003Cbr>    li.textContent = t;\u003Cbr>    list.appendChild(li);\u003Cbr>  });\u003Cbr>}\u003C/p>\u003C/blockquote>\n\u003Cp>Adım adım ilerleyip her fonksiyonu test edin; önce ekleme, sonra silme, ardından localStorage ile kalıcılık eklenebilir.\u003C/p>\n\n\u003Ch3>Hata ayıklama (debugging) ve pratik ipuçları\u003C/h3>\n\u003Cp>Hata ayıklamak için:\u003C/p>\n\u003Cul>\n\u003Cli>console.log ile değişken ve akış çıktıları kontrol edin.\u003C/li>\n\u003Cli>Tarayıcı geliştirici araçlarındaki Debugger ile breakpoints koyun.\u003C/li>\n\u003Cli>Adım adım test edin ve küçük değişikliklerle ilerleyin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>İyi uygulamalar\u003C/h3>\n\u003Cul>\n\u003Cli>Kodunuzu küçük, tek amaçlı fonksiyonlara bölün.\u003C/li>\n\u003Cli>Semantik değişken adları kullanın ve gerektiğinde açıklayıcı yorum ekleyin.\u003C/li>\n\u003Cli>ESLint gibi araçlarla stil ve yaygın hataları yakalayın.\u003C/li>\n\u003Cli>Versiyon kontrolü (ör. Git) ile ilerlemelerinizi kaydedin.\u003C/li>\n\u003Cli>MDN Web Docs gibi güvenilir kaynakları referans olarak kullanın.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>İleri adımlar\u003C/h3>\n\u003Cp>Temel konuları öğrendikten sonra asenkron programlama (Promises, async/await), modüller, paket yöneticileri ve modern frameworkleri keşfetmek faydalı olacaktır. Bu konular ileri okumaya uygundur.\u003C/p>\n\n\u003Ch3>Kaynaklar\u003C/h3>\n\u003Cp>Referans ve örnekler için MDN Web Docs'u kullanabilirsiniz: \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toWellFormed'>toWellFormed()\u003C/a>, \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/isWellFormed'>isWellFormed()\u003C/a>, \u003Ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets'>unicodeSets\u003C/a>.\u003C/p>\n\n\u003Chr>\n\n\u003Cp>Özetle, küçük adımlarla başlayın, sık sık çalıştırıp test edin ve MDN gibi referanslara başvurarak kavramları pekiştirin. Öğrenme süreci pratik yapma ve örnekleri inceleme ile hızlanır.\u003C/p>","JavaScript Başlangıç Kodları — Adım Adım Kılavuz","Yeni başlayanlar için JavaScript temel kavramları, değişkenler, fonksiyonlar ve örneklerle adım adım öğrenme rehberi.","javascript başlangıç kodları, JS temel kavramlar, değişkenler fonksiyonlar js, başlangıç javascript örnekleri, adım adım javascript","yeni-baslayanlar-icin-javascript-temelleri-adim-adim-kilavuz","2026-04-06T10:05:39.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/2eea7b9b72526585a17ced2745d02e44.jpg","/media/blog/2eea7b9b72526585a17ced2745d02e44_thumb.jpg","/media/blog/2eea7b9b72526585a17ced2745d02e44.webp","/media/blog/2eea7b9b72526585a17ced2745d02e44_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,892,0,"5 dk okuma süresi","/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-adim-adim-kilavuz",[],["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/2eea7b9b72526585a17ced2745d02e44.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-adim-adim-kilavuz",{"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/yeni-baslayanlar-icin-javascript-temelleri-adim-adim-kilavuz",["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":114,"name":7,"item":65},4]