[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-yeni-baslayanlar-icin-javascript-temelleri-kisa-adim-adim-rehber":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},27024,"Yeni başlayanlar için JavaScript temelleri: kısa, adım adım rehber","Bu kısa rehber, javascript başlangıç kodları ve JS temellerini adım adım öğretir; örnekler, pratik alıştırmalar ve resmi kaynaklara yönlendirmeler içerir.","\u003Ch2>Giriş: JavaScript nedir ve neden öğrenilir?\u003C/h2>\n\u003Cp>JavaScript, web sayfalarına dinamiklik ve etkileşim kazandırmak için kullanılan yaygın bir programlama dilidir. Tarayıcı üzerinde kullanıcı etkinliklerine tepki verme, içerik güncelleme ve veri işleme gibi görevler için sıkça tercih edilir. Bu yazıda temel kavramları adım adım açıklayacak, kısa örneklerle nasıl başladığınızı göstereceğim. Daha derin teknik referanslar için \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN JavaScript Rehberi\u003C/a> ve \u003Ca href=\"https://learn.microsoft.com/tr-tr/shows/javascript-fundamentals-development-for-absolute-beginners/\">Microsoft Learn dersleri\u003C/a> faydalı olacaktır.\u003C/p>\n\n\u003Ch2>Hızlı kurulum: kodu nerede çalıştırabilirsiniz?\u003C/h2>\n\u003Cp>Yeni başlayanlar için iki hızlı yol vardır:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>Tarayıcı konsolu:\u003C/strong> Her modern tarayıcıda geliştirici araçları bulunur. Geliştirici konsolunu açıp JavaScript ifadelerini doğrudan çalıştırabilirsiniz (genelde F12 veya tarayıcı menüsünden erişilir).\u003C/li>\n  \u003Cli>\u003Cstrong>Node.js:\u003C/strong> Sunucu tarafı veya terminalde çalıştırmak için Node.js kurulumu yapılabilir. Basit dosyalar oluşturup \u003Cem>node dosya.js\u003C/em> komutuyla çalıştırabilirsiniz.\u003C/li>\n\u003C/ul>\n\u003Cp>Tarayıcı tabanlı denemeler, DOM (sayfa içi) etkileşimlerini görmek için pratik bir yoldur; Node.js ise dilin genel özelliklerini komut satırında denemek için uygundur.\u003C/p>\n\n\u003Ch2>Temel sözdizimi: değişkenler ve bildirimler\u003C/h2>\n\u003Cp>JavaScript'te verileri saklamak için değişkenler kullanılır. En yaygın üç bildirim şekli \u003Cstrong>let\u003C/strong>, \u003Cstrong>const\u003C/strong> ve eski kodlarda görülen \u003Cstrong>var\u003C/strong>dır. Genel öneri, yeniden atama gerekmiyorsa \u003Cstrong>const\u003C/strong>, gerekli durumlarda \u003Cstrong>let\u003C/strong> kullanmaktır. (Detaylı referans: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide/Grammar_and_types#%C3%BCst_de%C4%9Flikenler\">MDN - Üst değişkenler ve tipler\u003C/a>.)\u003C/p>\n\u003Cp>\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>const isim = \"Ayşe\";\u003Cbr>let yas = 25;\u003Cbr>yas = yas + 1;\u003Cbr>console.log(isim, yas);\u003C/p>\n\n\u003Ch3>const ve nesneler\u003C/h3>\n\u003Cp>Bir değişken \u003Cstrong>const\u003C/strong> ile tanımlandığında aynı isimle yeniden atama yapılamaz, ancak eğer değer bir nesne veya dizi ise o nesnenin içeriği değiştirilebilir. Bu ayrımı anlamak önemli.\u003C/p>\n\n\u003Ch2>Veri tipleri: kısa özet\u003C/h2>\n\u003Cp>Temel veri tipleri arasında \u003Cstrong>sayı\u003C/strong> (number), \u003Cstrong>dize\u003C/strong> (string), \u003Cstrong>boolean\u003C/strong>, \u003Cstrong>null\u003C/strong>, \u003Cstrong>undefined\u003C/strong>, \u003Cstrong>object\u003C/strong> ve \u003Cstrong>symbol\u003C/strong> bulunur. Diziler de nesne türünün özel bir halidir.\u003C/p>\n\u003Cp>Örnek kullanım:\u003C/p>\n\u003Cp>const skor = 10;\u003Cbr>const mesaj = \"Merhaba\";\u003Cbr>const aktif = true;\u003Cbr>const liste = [\"elma\", \"muz\"];\u003Cbr>const kisi = { ad: \"Ali\", yas: 30 };\u003C/p>\n\n\u003Ch2>Fonksiyonlar: görevleri paketleyin\u003C/h2>\n\u003Cp>Fonksiyonlar, belirli bir görevi yerine getiren kod bloklarıdır. İki yaygın türü fonksiyon bildirimi (function declaration) ve ok fonksiyonlarıdır (arrow functions).\u003C/p>\n\u003Cp>\u003Cstrong>Bildirilen fonksiyon örneği:\u003C/strong>\u003Cbr>function selamla(isim) {\u003Cbr>  return `Merhaba, ${isim}!`;\u003Cbr>}\u003Cbr>console.log(selamla(\"Dünya\"));\u003C/p>\n\u003Cp>\u003Cstrong>Arrow function örneği:\u003C/strong>\u003Cbr>const kareAl = (x) => x * x;\u003Cbr>console.log(kareAl(4));\u003C/p>\n\n\u003Ch2>Kontrol akışı: koşullar ve döngüler\u003C/h2>\n\u003Cp>Program akışını kontrol etmek için koşullu ifadeler (\u003Cstrong>if\u003C/strong>, \u003Cstrong>switch\u003C/strong>) ve döngüler (\u003Cstrong>for\u003C/strong>, \u003Cstrong>while\u003C/strong>, \u003Cstrong>for...of\u003C/strong>) kullanılır.\u003C/p>\n\u003Cp>\u003Cstrong>if örneği:\u003C/strong>\u003Cbr>const puan = 75;\u003Cbr>if (puan >= 50) {\u003Cbr>  console.log(\"Geçti\");\u003Cbr>} else {\u003Cbr>  console.log(\"Kaldı\");\u003Cbr>}\u003C/p>\n\u003Cp>\u003Cstrong>for döngüsü örneği:\u003C/strong>\u003Cbr>for (let i = 0; i < 3; i++) {\u003Cbr>  console.log(i);\u003Cbr>}\u003C/p>\n\n\u003Ch2>Diziler ve nesneler: sık kullanılan işlemler\u003C/h2>\n\u003Cp>Dizilerde ekleme, okuma ve döngü ile erişim sık yapılır. Nesneler anahtar-değer çiftleriyle veriyi organize eder.\u003C/p>\n\u003Cp>\u003Cstrong>Örnekler:\u003C/strong>\u003Cbr>const meyveler = [\"elma\", \"muz\"];\u003Cbr>meyveler.push(\"armut\");\u003Cbr>console.log(meyveler[0]); // \"elma\"\u003Cbr>\u003Cbr>const kisi = { ad: \"Zeynep\", meslek: \"öğrenci\" };\u003Cbr>console.log(kisi.ad);\u003C/p>\n\n\u003Ch2>Basit etkileşim örneği (tarayıcı için)\u003C/h2>\n\u003Cp>Bir düğmeye tıklandığında sayfadaki bir yazıyı değiştiren basit bir kod parçası (HTML içinde bir buton ve bir paragraf olduğunu varsayarak):\u003C/p>\n\u003Cp>document.getElementById('btn').addEventListener('click', function() {\u003Cbr>  document.getElementById('mesaj').textContent = 'Selam! JavaScript çalışıyor.';\u003Cbr>});\u003C/p>\n\u003Cp>Bu tarz DOM (Document Object Model) etkileşimleri hakkında daha fazla öğrenmek için MDN'in DOM rehberleri yararlıdır: \u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/API/Document_Object_Model/Introduction\">MDN - DOM Giriş\u003C/a>.\u003C/p>\n\n\u003Ch2>Hataları bulma ve iyi uygulamalar\u003C/h2>\n\u003Cp>Hatalarla karşılaştığınızda şu adımları izleyin:\u003C/p>\n\u003Cul>\n  \u003Cli>Tarayıcı konsolundaki hata mesajını okuyun; satır numarası ve hata türü yardımcı olur.\u003C/li>\n  \u003Cli>console.log ile değişkenleri kontrol edin.\u003C/li>\n  \u003Cli>Gerekirse adım adım breakpoint (kesme noktası) kullanın.\u003C/li>\n  \u003Cli>Değişken kapsamlarına dikkat edin; global alanı gereksiz kullanmaktan kaçının.\u003C/li>\n\u003C/ul>\n\u003Cp>Ayrıca modern JavaScript özelliklerini öğrenmek için resmi kaynakları takip etmek faydalıdır. Microsoft Learn'de başlangıç için yapılandırılmış dersler bulabilirsiniz: \u003Ca href=\"https://learn.microsoft.com/tr-tr/shows/javascript-fundamentals-development-for-absolute-beginners/\">Microsoft Learn - JavaScript Temelleri\u003C/a>.\u003C/p>\n\n\u003Ch2>Adım adım pratik alıştırmalar (kısa görevler)\u003C/h2>\n\u003Col>\n  \u003Cli>Bir dizi oluşturun ve içine 5 sayı ekleyip toplamını hesaplayın. (İpucu: döngü veya array metodları kullanılabilir.)\u003C/li>\n  \u003Cli>Kullanıcıdan isim isteyip, ismi büyük harfe çeviren bir fonksiyon yazın.\u003C/li>\n  \u003Cli>Bir nesne tanımlayın ve içinde ad, soyad ve yaş alanları olsun; yaşı 1 artıran bir fonksiyon yazın.\u003C/li>\n  \u003Cli>Bir for döngüsü ile 1'den 10'a kadar olan sayıların karelerini konsola yazdırın.\u003C/li>\n  \u003Cli>Basit bir butona tıklandığında sayfadaki bir öğenin rengini değiştiren kod yazın.\u003C/li>\n\u003C/ol>\n\u003Cp>Bu görevler, öğrendiklerinizi pekiştirmeniz için tasarlanmıştır. Her biri için önce küçük bir plan yazın, sonra kodu adım adım çalıştırın.\u003C/p>\n\n\u003Ch2>Kaynaklar ve ileri adımlar\u003C/h2>\n\u003Cp>Resmi ve güncel rehberlere göz atmak öğrenmeyi hızlandırır:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/tr/docs/Web/JavaScript/Guide\">MDN Web Docs — JavaScript Guide\u003C/a> (detaylı referans ve örnekler).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://learn.microsoft.com/tr-tr/shows/javascript-fundamentals-development-for-absolute-beginners/\">Microsoft Learn — JavaScript Temelleri\u003C/a> (başlangıç dersleri).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://akademi.eba.gov.tr/egitim-detay/javascript-temelleri-egitimi-15\">EBA Akademi — JavaScript Temelleri\u003C/a> (eğitim içeriği).\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Özet\u003C/h3>\n\u003Cul>\n  \u003Cli>JavaScript ile değişkenleri (\u003Cstrong>let\u003C/strong>, \u003Cstrong>const\u003C/strong>), fonksiyonları ve kontrol akışını öğrendiniz.\u003C/li>\n  \u003Cli>Basit diziler, nesneler ve DOM etkileşimleri ile pratik yapın.\u003C/li>\n  \u003Cli>Hataları konsol ve breakpoint kullanarak tespit edin, küçük adımlarla ilerleyin.\u003C/li>\n\u003C/ul>\n\u003Chr>\n\u003Cp>\u003Cem>Not:\u003C/em> Bu rehber temel kavramları hızlıca aktarmayı amaçlar. Örneklerin bazı teknik ayrıntıları ve daha ileri konular için MDN Web Docs ve Microsoft Learn kaynaklarına başvurabilirsiniz.\u003C/p>","JavaScript Başlangıç Kodları: Yeni Başlayanlar için Kısa Reh","Bu rehber, javascript başlangıç kodları ve JS temelleri hakkında kısa, adım adım açıklamalar, örnekler ve pratik alıştırmalar sunar.","javascript başlangıç kodları, JS temelleri, değişkenler ve fonksiyonlar, sözdizimi örnekleri, adım adım kodlar","yeni-baslayanlar-icin-javascript-temelleri-kisa-adim-adim-rehber","2026-04-11T17:57:48.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/d2603bc77edd79ae219a9c653f1cf59f.jpg","/media/blog/d2603bc77edd79ae219a9c653f1cf59f_thumb.jpg","/media/blog/d2603bc77edd79ae219a9c653f1cf59f.webp","/media/blog/d2603bc77edd79ae219a9c653f1cf59f_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,730,0,"4 dk okuma süresi","/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-kisa-adim-adim-rehber",[],["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/d2603bc77edd79ae219a9c653f1cf59f.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temelleri-kisa-adim-adim-rehber",{"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-kisa-adim-adim-rehber",["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}]