[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-adim-adim-javascript-baslangic-10-kisa-kod-ornegi":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},39405,"Adım Adım JavaScript Başlangıç: 10 Kısa Kod Örneği","Bu rehber JavaScript başlangıç kodları arayanlar için 10 kısa ve açıklamalı örnek sunar. Her örnek hızlıca çalıştırılabilir ve temel kavramları pekiştirmeye yöneliktir.","\u003Ch2>Giriş — Neden bu 10 örnek?\u003C/h2>\n\u003Cp>Bu yazıda JavaScript'in en temel yapı taşlarını kısa ve çalıştırılabilir örneklerle gösteriyoruz. Amaç, değişkenler, fonksiyonlar, koşullar, döngüler, diziler, nesneler ve basit asenkron kod gibi temel konuları hızlıca anlamak ve denemektir. Değişkenlerin nasıl tanımlandığı ve veri türleri hakkında örnekler için \u003Ca href='https://amp.kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degiskenler-turler-ve-kisa-ornekler'>KodÖğreniyorum\u003C/a> makalesine, dilin temel kavramları için ise \u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info\u003C/a> başvuru sayfasına göz atabilirsiniz.\u003C/p>\n\n\u003Ch2>Nasıl kullanılır? (Kısa çalışma talimatı)\u003C/h2>\n\u003Col>\n  \u003Cli>Tarayıcıda: Herhangi bir web sayfasını açın, geliştirici araçlarını (F12) açın ve \"Console\" sekmesine yapıştırıp Enter ile çalıştırın.\u003C/li>\n  \u003Cli>Node.js kullanıyorsanız: Kodları example.js adlı dosyaya yapıştırın ve terminalde \u003Cstrong>node example.js\u003C/strong> ile çalıştırın.\u003C/li>\n  \u003Cli>DOM örneklerini test etmek için basit bir HTML dosyası oluşturun veya tarayıcı console içinde gerekli HTML öğesinin var olduğundan emin olun.\u003C/li>\n\u003C/ol>\n\n\u003Chr>\n\n\u003Ch2>10 Kısa JavaScript Örneği\u003C/h2>\n\n\u003Ch3>1) Değişkenler: let, const, var\u003C/h3>\n\u003Cp>Değişkenler veriyi saklamak için kullanılır. JavaScript'te \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> modern kullanımda tercih edilir; \u003Cstrong>var\u003C/strong> ise fonksiyon-scope davranışı gösterir. (Kaynak: \u003Ca href='https://amp.kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degiskenler-turler-ve-kisa-ornekler'>KodÖğreniyorum\u003C/a>.)\u003C/p>\n\u003Cblockquote>\nlet age = 30;\u003Cbr>\nconst name = `Ali`;\u003Cbr>\nvar isStudent = false;\u003Cbr>\nconsole.log(`${name}, ${age} yaşında.`);\u003Cbr>\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: console'da 'Ali, 30 yaşında.' görünür.\u003C/p>\n\n\u003Ch3>2) Fonksiyon: tanımlama ve çağrı\u003C/h3>\n\u003Cp>Fonksiyonlar, belirli bir görevi yerine getiren kod bloklarıdır. Temel sözdizimi ve çağrı örneği:\u003C/p>\n\u003Cblockquote>\nfunction greet(name) {\u003Cbr>\n  return `Merhaba, ${name}!`;\u003Cbr>\n}\u003Cbr>\nconsole.log(greet('Ayşe'));\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: 'Merhaba, Ayşe!'. Fonksiyonlarla ilgili temel bilgiler için \u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info\u003C/a> faydalıdır.\u003C/p>\n\n\u003Ch3>3) Koşullu ifadeler: if / else\u003C/h3>\n\u003Cp>Program akışını kontrol etmek için koşullar kullanılır:\u003C/p>\n\u003Cblockquote>\nconst num = 7;\u003Cbr>\nif (num % 2 === 0) {\u003Cbr>\n  console.log(`${num} çift sayıdır.`);\u003Cbr>\n} else {\u003Cbr>\n  console.log(`${num} tek sayıdır.`);\u003Cbr>\n}\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: '7 tek sayıdır.'\u003C/p>\n\n\u003Ch3>4) For döngüsü: dizi üzerinde gezinme\u003C/h3>\n\u003Cp>Bir dizinin elemanlarını toplamak için for döngüsü örneği:\u003C/p>\n\u003Cblockquote>\nconst numbers = [1, 2, 3, 4, 5];\u003Cbr>\nlet sum = 0;\u003Cbr>\nfor (let i = 0; i \u003C numbers.length; i++) {\u003Cbr>\n  sum += numbers[i];\u003Cbr>\n}\u003Cbr>\nconsole.log('Toplam:', sum);\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: 'Toplam: 15'. Döngüler ve ana kullanım örnekleri hakkında \u003Ca href='https://tr.javascript.info/first-steps'>JavaScript.info\u003C/a> faydalı bilgiler sunar.\u003C/p>\n\n\u003Ch3>5) While döngüsü: koşula bağlı tekrar\u003C/h3>\n\u003Cp>While ile koşul sağlandığı sürece tekrar yapılır:\u003C/p>\n\u003Cblockquote>\nlet count = 3;\u003Cbr>\nwhile (count > 0) {\u003Cbr>\n  console.log('Sayaç:', count);\u003Cbr>\n  count--;\u003Cbr>\n}\u003Cbr>\nconsole.log('Bitti');\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: Sayaç: 3, Sayaç: 2, Sayaç: 1, Bitti.\u003C/p>\n\n\u003Ch3>6) Diziler ve metotlar: push, map, filter\u003C/h3>\n\u003Cp>Diziler birden çok değeri tek değişkende tutar ve çeşitli yöntemlerle işlenir:\u003C/p>\n\u003Cblockquote>\nconst fruits = ['elma', 'armut', 'muz'];\u003Cbr>\nfruits.push('çilek');\u003Cbr>\nconst upper = fruits.map(f => f.toUpperCase());\u003Cbr>\nconst longNames = fruits.filter(f => f.length > 4);\u003Cbr>\nconsole.log(upper);\u003Cbr>\nconsole.log(longNames);\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: büyük harfli dizi ve uzun isimleri içeren alt dizi. Diziler ve metotlar hakkında temel açıklamalar için kaynaklara bakabilirsiniz (örn. \u003Ca href='https://www.programiz.com/javascript/examples'>Programiz\u003C/a>).\u003C/p>\n\n\u003Ch3>7) Nesneler: özellik ve yöntem\u003C/h3>\n\u003Cp>JavaScript nesneleri anahtar-değer çiftlerinden oluşur; metot eklemek için fonksiyon kullanılır:\u003C/p>\n\u003Cblockquote>\nconst person = { name: 'Deniz', age: 25, city: 'İstanbul' };\u003Cbr>\nconst { name, age } = person;\u003Cbr>\nconsole.log(`${name}, ${age} yaşında.`);\u003Cbr>\nperson.greet = function() { console.log(`Merhaba, ben ${this.name}`); };\u003Cbr> \nperson.greet();\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: 'Deniz, 25 yaşında.' ve ardından 'Merhaba, ben Deniz'.\u003C/p>\n\n\u003Ch3>8) DOM ile basit etkileşim (tarayıcıda)\u003C/h3>\n\u003Cp>Bir HTML düğmesine tıklanınca mesaj gösterme (HTML içinde bir \u003Cem>button\u003C/em> öğesi olması gerekir):\u003C/p>\n\u003Cblockquote>\n// HTML örneği: <button id='btn'>Tıkla</button>\u003Cbr>\nconst btn = document.getElementById('btn');\u003Cbr>\nbtn.addEventListener('click', () => {\u003Cbr>\n  alert('Butona tıklandı!');\u003Cbr>\n});\n\u003C/blockquote>\n\u003Cp>Not: Bu kodu çalıştırmak için ilgili HTML öğesinin sayfada bulunması gerekir. Web etkileşimleri için JavaScript sık kullanılır (bakınız \u003Ca href='https://amp.kodogreniyorum.com/blog/javascript-temelleri/adim-adim-javascript-temelleri-kisa-ve-calisir-kod-ornekleri'>KodÖğreniyorum - adım adım\u003C/a>).\u003C/p>\n\n\u003Ch3>9) Promise ve async/await: basit asenkron bekleme\u003C/h3>\n\u003Cp>Asenkron işlemleri kontrol etmek için Promise veya async/await kullanılır:\u003C/p>\n\u003Cblockquote>\nfunction wait(ms) {\u003Cbr>\n  return new Promise(resolve => setTimeout(resolve, ms));\u003Cbr>\n}\u003Cbr>\nasync function demo() {\u003Cbr>\n  console.log('Bekleniyor...');\u003Cbr>\n  await wait(500);\u003Cbr>\n  console.log('500ms sonra devam');\u003Cbr>\n}\u003Cbr>\ndemo();\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: önce 'Bekleniyor...' sonra 500ms arayla '500ms sonra devam'.\u003C/p>\n\n\u003Ch3>10) Kısa yardımcı fonksiyon: rest parametreleri ve reduce\u003C/h3>\n\u003Cp>Birden çok sayıyı toplayan kısa bir fonksiyon:\u003C/p>\n\u003Cblockquote>\nfunction sum(...nums) {\u003Cbr>\n  return nums.reduce((s, n) => s + n, 0);\u003Cbr>\n}\u003Cbr>\nconsole.log(sum(1, 2, 3, 4));\n\u003C/blockquote>\n\u003Cp>Beklenen çıktı: 10.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Pratik ipuçları ve sonraki adımlar\u003C/h2>\n\u003Cul>\n  \u003Cli>Her örneği tarayıcı konsolunda veya Node.js'te çalıştırın ve farklı değerlerle oynamayı deneyin.\u003C/li>\n  \u003Cli>Fonksiyonları küçük parçalara bölün; her parça için ayrı test yazın veya elle deneyin.\u003C/li>\n  \u003Cli>Diziler ve objeler üzerinde çalışırken \u003Cstrong>console.log\u003C/strong> ile ara sonuçları kontrol edin.\u003C/li>\n  \u003Cli>Async kod yazarken \u003Cstrong>try/catch\u003C/strong> ile hata yakalamayı öğrenin.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Kısa proje fikri (adım adım)\u003C/h3>\n\u003Col>\n  \u003Cli>Basit bir \u003Cem>To-Do\u003C/em> listesi oluşturun (HTML, CSS, JS).\u003C/li>\n  \u003Cli>Yeni görev ekleme ve listeyi görüntüleme fonksiyonlarını yazın.\u003C/li>\n  \u003Cli>Görevleri dizi içinde saklayın; map ile listeyi güncelleyin.\u003C/li>\n  \u003Cli>LocalStorage ile sayfa yenilense bile görevleri saklayın.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>Kontrol listesi (Öğrenme hedefleri)\u003C/h2>\n\u003Cul>\n  \u003Cli>let/const/var arasındaki farkları açıklayabilme.\u003C/li>\n  \u003Cli>Basit fonksiyon ve koşul yapıları yazabilme.\u003C/li>\n  \u003Cli>Döngüler ve dizi metotlarını kullanarak veri işleyebilme.\u003C/li>\n  \u003Cli>Asenkron basit işlemleri Promise veya async/await ile yönetebilme.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Kaynaklar ve ileri okumalar\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href='https://amp.kodogreniyorum.com/blog/javascript-temelleri/javascript-temelleri-degiskenler-turler-ve-kisa-ornekler'>JavaScript Temelleri: Değişkenler, Türler ve Kısa Örnekler — KodÖğreniyorum\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://tr.javascript.info/first-steps'>JavaScript temelleri — JavaScript.info\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href='https://www.programiz.com/javascript/examples'>JavaScript Examples — Programiz\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cem>Not:\u003C/em> Bu örnekler eğitim amaçlıdır ve üretim ortamlarında ekstra hata denetimi, girdi doğrulama ve güvenlik önlemleri gerekebilir. Örnekler temel kavramları pekiştirmek üzere sadeleştirilmiştir.\u003C/p>\n","JavaScript Başlangıç Kodları — 10 Kısa Örnek ve Açıklama.","JavaScript'e yeni başlayanlar için 10 kısa, açıklamalı örnek: değişkenler, fonksiyonlar, döngüler, diziler, nesneler ve async/await. Kodları tarayıcı konsolunda","javascript başlangıç kodları, temel javascript örnekleri, javascript değişkenler fonksiyonlar, başlangıç js kodu, kolay javascript örnekleri","adim-adim-javascript-baslangic-10-kisa-kod-ornegi","2026-10-30T14:42:14.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/4800d0b7ee713e8a25b82bcb270dead4.jpg","/media/blog/4800d0b7ee713e8a25b82bcb270dead4_thumb.jpg","/media/blog/4800d0b7ee713e8a25b82bcb270dead4.webp","/media/blog/4800d0b7ee713e8a25b82bcb270dead4_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,770,0,"4 dk okuma süresi","/blog/javascript-temelleri/adim-adim-javascript-baslangic-10-kisa-kod-ornegi",[],["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/4800d0b7ee713e8a25b82bcb270dead4.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/adim-adim-javascript-baslangic-10-kisa-kod-ornegi",{"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-baslangic-10-kisa-kod-ornegi",["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}]