[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-yeni-baslayanlar-icin-javascript-temel-kavramlari-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},28385,"Yeni Başlayanlar için JavaScript Temel Kavramları: Adım Adım Rehber","Bu adım adım rehber, yeni başlayanlara yönelik JavaScript temel kavramlarını, kısa örnekleri ve uygulanabilir öğrenme yol haritasını Türkçe olarak sunar.","\u003Ch2>JavaScript nedir ve neden öğrenmelisiniz?\u003C/h2>\n\u003Cp>JavaScript, web sayfalarına etkileşim ve dinamiklik eklemek için kullanılan bir programlama dilidir. Temel tanım ve tarihçe için kaynaklara bakabilirsiniz (örneğin \u003Ca href='https://onlyjs.com/yazilim-sozlugu/javascript'>OnlyJS\u003C/a>). Web formlarını doğrulamak, menüleri açıp kapatmak, veri istekleri yapmak ve kullanıcı etkileşimlerini işlemek gibi görevler sıklıkla JavaScript ile yapılır.\u003C/p>\n\n\u003Ch2>Hızlı başlangıç: hangi araçlara ihtiyacınız var?\u003C/h2>\n\u003Cp>Yeni başlayanlar için gereken asgari araçlar şunlardır:\u003C/p>\n\u003Cul>\n  \u003Cli>Güncel bir web tarayıcısı (Chrome, Firefox veya Safari) ve tarayıcı geliştirici araçları (console).\u003C/li>\n  \u003Cli>Basit bir metin düzenleyici (ör. Visual Studio Code) veya kod editörü.\u003C/li>\n  \u003Cli>Proje dosyalarınızı test etmek için yerel bir klasör; küçük projeler için ekstra sunucu gerekmez.\u003C/li>\n\u003C/ul>\n\u003Cp>Başlangıçta tarayıcı konsolunda (F12) küçük parçalar çalıştırmak öğrenmeyi hızlandırır. Ayrıca çevrimiçi kurslar ve resmi eğitim içerikleri yol gösterici olabilir (\u003Ca href='https://akademi.eba.gov.tr/egitim-detay/javascript-temelleri-egitimi-15'>EBA Akademi\u003C/a> gibi).\u003C/p>\n\n\u003Ch2>Temel kavramlar: kısa ve uygulamalı açıklamalar\u003C/h2>\n\u003Cp>Aşağıda yeni başlayanların en çok karşılaştığı temel konular ve kısa örnekler bulunmaktadır. Resmi ve eğitim kaynakları bu konuları benzer şekilde sıralamaktadır (\u003Ca href='https://akademi.eba.gov.tr/egitim-detay/javascript-temelleri-egitimi-15'>EBA Akademi\u003C/a>).\u003C/p>\n\n\u003Ch3>Değişkenler\u003C/h3>\n\u003Cp>JavaScript'te veriyi saklamak için \u003Cstrong>var\u003C/strong>, \u003Cstrong>let\u003C/strong> ve \u003Cstrong>const\u003C/strong> kullanılır. Genel öneri: değiştirilebilecek değerler için \u003Cem>let\u003C/em>, sabit değerler için \u003Cem>const\u003C/em> tercih edilir.\u003C/p>\n\u003Cblockquote>let yas = 25; \u003Cbr>const isim = 'Ayşe'; \u003Cbr>var sayi = 10; // eski projelerde görebilirsiniz\u003C/blockquote>\n\n\u003Ch3>Veri tipleri\u003C/h3>\n\u003Cp>Temel veri tipleri: \u003Cstrong>string\u003C/strong> (metin), \u003Cstrong>number\u003C/strong> (sayı), \u003Cstrong>boolean\u003C/strong> (true/false), \u003Cstrong>null\u003C/strong>, \u003Cstrong>undefined\u003C/strong>, \u003Cstrong>object\u003C/strong> (nesneler) ve \u003Cstrong>array\u003C/strong> (dizi).\u003C/p>\n\u003Cblockquote>let metin = 'Merhaba';\u003Cbr>let sayi = 3.14;\u003Cbr>let aktif = true;\u003Cbr>let liste = [1, 2, 3];\u003Cbr>let kisi = { ad: 'Ali', yas: 30 };\u003C/blockquote>\n\n\u003Ch3>Operatörler\u003C/h3>\n\u003Cp>Aritmetik (+, -, *, /), karşılaştırma (==, ===, !=, !==, >, <=) ve mantıksal (&&, ||, !) operatörleri sık kullanılır. \u003Cstrong>===\u003C/strong> ve \u003Cstrong>!==\u003C/strong> tip kontrolüyle birlikte eşitlik sağlar; öğrenirken bu fark önemlidir.\u003C/p>\n\n\u003Ch3>Koşullu ifadeler\u003C/h3>\n\u003Cp>Karar yapıları için \u003Cstrong>if/else\u003C/strong> ve gerektiğinde \u003Cstrong>switch\u003C/strong> kullanılır.\u003C/p>\n\u003Cblockquote>if (yas >= 18) {\u003Cbr>  console.log('Reşitsiniz');\u003Cbr>} else {\u003Cbr>  console.log('Reşit değilsiniz');\u003Cbr>}\u003C/blockquote>\n\n\u003Ch3>Döngüler\u003C/h3>\n\u003Cp>Belli tekrarlar için \u003Cstrong>for\u003C/strong>, \u003Cstrong>while\u003C/strong> ve modern JavaScript'te \u003Cstrong>for...of\u003C/strong> veya array metodları (forEach, map) tercih edilir.\u003C/p>\n\u003Cblockquote>for (let i = 0; i < 5; i++) {\u003Cbr>  console.log(i);\u003Cbr>}\u003Cbr>let arr = [10,20,30];\u003Cbr>arr.forEach(item => console.log(item));\u003C/blockquote>\n\n\u003Ch3>Fonksiyonlar\u003C/h3>\n\u003Cp>Fonksiyonlar kodu tekrar kullanılabilir parçalara böler. Hem klasik bildirim hem de ok (arrow) fonksiyonları vardır.\u003C/p>\n\u003Cblockquote>function topla(a, b) {\u003Cbr>  return a + b;\u003Cbr>}\u003Cbr>const carp = (a, b) => a * b;\u003Cbr>console.log(topla(2,3));\u003C/blockquote>\n\n\u003Ch3>DOM ve etkileşim (kısa giriş)\u003C/h3>\n\u003Cp>Tarayıcıda HTML ile etkileşim kurmak için DOM (Document Object Model) kullanılır. Bir düğmeye tıklama olayını dinlemek sık karşılaşılan örnektir.\u003C/p>\n\u003Cblockquote>// Örnek: bir buton tıklandığında metni değiştirme\u003Cbr>document.getElementById('btn').addEventListener('click', function() {\u003Cbr>  document.getElementById('mesaj').textContent = 'Tıklandı!';\u003Cbr>});\u003C/blockquote>\n\u003Cp>HTML dosyasında JavaScript dosyanızı bağlamak için <script> etiketi kullanılır. Örneğin: \u003Cbr>\u003Cblockquote><script src='app.js'></script>\u003C/blockquote>\u003C/p>\n\n\u003Ch3>Asenkron yapıların kısa tanımı\u003C/h3>\n\u003Cp>JavaScript'te zamanlanmış işlemler ve sunucu istekleri asenkron çalışır. Önce \u003Cstrong>callback\u003C/strong>, sonra \u003Cstrong>Promise\u003C/strong> ve \u003Cstrong>async/await\u003C/strong> yaklaşımları yaygın hâle gelmiştir. Başlangıçta setTimeout ile başlayıp, daha sonra Promise'lere bakmak öğrenme akışını kolaylaştırır.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Adım adım öğrenme yolu (öneri)\u003C/h2>\n\u003Cp>Bir yol haritası takip etmek öğrenmeyi hızlandırır. Aşağıdaki adımlar, temel kavramlardan uygulamaya doğru ilerler; benzer öneriler için öğrenme rehberlerine göz atabilirsiniz (\u003Ca href='https://ichi.pro/tr/javascript-ogrenme-yol-haritasi-2023-nihai-kilavuz-265793713620791'>öğrenme yol haritası\u003C/a>).\u003C/p>\n\u003Col>\n  \u003Cli>Söz dizimi ve küçük komutlarla tarayıcı konsolunda pratik yapın.\u003C/li>\n  \u003Cli>Değişkenler, veri tipleri ve operatörleri öğrenin.\u003C/li>\n  \u003Cli>Fonksiyonlar ve kontrol akışlarını (if/for) kavrayın.\u003C/li>\n  \u003Cli>Diziler ve nesnelerle veriyi modelleyin.\u003C/li>\n  \u003Cli>DOM ile etkileşim ve olay dinleme öğrenin.\u003C/li>\n  \u003Cli>Basit projeler yapın (to‑do list, hesap makinesi).\u003C/li>\n  \u003Cli>Asenkron programlamaya giriş (setTimeout, fetch/Promise).\u003C/li>\n\u003C/ol>\n\n\u003Ch2>Pratik proje fikirleri (yeni başlayanlar için)\u003C/h2>\n\u003Cul>\n  \u003Cli>Basit bir yapılacaklar (to‑do) listesi: öğe ekleme/silme.\u003C/li>\n  \u003Cli>Hesap makinesi: temel aritmetik işlemler.\u003C/li>\n  \u003Cli>Rastgele alıntı gösterici: bir dizi içinden seçim ve DOM güncelleme.\u003C/li>\n  \u003Cli>Küçük test/quiz uygulaması: sorular, puanlama ve sonuç gösterimi.\u003C/li>\n  \u003Cli>Hava durumu isteği yapan basit uygulama (fetch kullanımı öğrenildikten sonra).\u003C/li>\n\u003C/ul>\n\u003Cp>Bu tür projeler öğrendiklerinizi pekiştirmek için etkilidir; eğitim materyalleri ve kurslar uygulamalı örneklerle süreci hızlandırabilir (\u003Ca href='https://www.udemy.com/course/temel-javascript-egitimi/'>Udemy örnek kursu\u003C/a>).\u003C/p>\n\n\u003Ch2>Hızlı kontrol listesi (başlangıç için)\u003C/h2>\n\u003Cul>\n  \u003Cli>Tarayıcı konsolunda \u003Cstrong>console.log()\u003C/strong> ile çıktı alma alıştırması yaptınız mı?\u003C/li>\n  \u003Cli>let ve const farkını uygulamalı anladınız mı?\u003C/li>\n  \u003Cli>Fonksiyon tanımlayıp çağırma pratiği yaptınız mı?\u003C/li>\n  \u003Cli>Basit bir DOM olayı (ör. buton tıklama) eklediniz mi?\u003C/li>\n  \u003Cli>Küçük bir proje (to‑do veya hesap makinesi) yaptınız mı?\u003C/li>\n\u003C/ul>\n\n\u003Ch2>İyi uygulama tavsiyeleri\u003C/h2>\n\u003Cul>\n  \u003Cli>Adım adım öğrenin: önce kavram, sonra örnek, sonra proje.\u003C/li>\n  \u003Cli>Küçük, tekrarlanabilir görevlerle pratik yapın; her proje bir veya iki yeni kavram eklesin.\u003C/li>\n  \u003Cli>Güncel kaynakları takip edin; eğitim içerikleri ve resmi dokümanlar faydalıdır (\u003Ca href='https://akademi.eba.gov.tr/egitim-detay/javascript-temelleri-egitimi-15'>EBA Akademi\u003C/a> gibi).\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sonuç\u003C/h2>\n\u003Cp>JavaScript öğrenmek için temel kavramları (değişkenler, veri tipleri, fonksiyonlar, kontrol yapıları, döngüler ve DOM) sağlam bir şekilde anlamak önemlidir. Yukarıdaki adım adım yol haritası ve pratik proje fikirleri, öğrendiklerinizi pekiştirmenize yardımcı olacaktır. Daha derin konulara geçmeden önce bu temelleri pratikle güçlendirin.\u003C/p>\n\n\u003Ch2>Kaynaklar ve ileri okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href='https://onlyjs.com/yazilim-sozlugu/javascript'>JavaScript — OnlyJS\u003C/a> (tanım ve temel bilgiler).\u003C/li>\n  \u003Cli>\u003Ca href='https://akademi.eba.gov.tr/egitim-detay/javascript-temelleri-egitimi-15'>JavaScript Temelleri Eğitimi — EBA Akademi\u003C/a> (eğitim içeriği ve kurikulum örnekleri).\u003C/li>\n  \u003Cli>\u003Ca href='https://ichi.pro/tr/javascript-ogrenme-yol-haritasi-2023-nihai-kilavuz-265793713620791'>JavaScript öğrenme yol haritası — Nihai Kılavuz\u003C/a> (adım adım öğrenme önerileri).\u003C/li>\n  \u003Cli>\u003Ca href='https://www.udemy.com/course/temel-javascript-egitimi/'>JavaScript Hızlı Başlangıç Kursu — Udemy\u003C/a> (uygulamalı kurs örneği).\u003C/li>\n\u003C/ul>","JavaScript Başlangıç Kodları — Yeni Başlayanlar için Adım Ad","Bu rehber, JavaScript başlangıç kodları ve temel kavramları adım adım açıklar; değişkenler, veri tipleri, fonksiyonlar, kontrol yapılarını ve basit pratik proje","javascript başlangıç kodları, JavaScript Temelleri, adım adım programlama öğrenme, kolay kod örnekleri, kodlama yapısı örnekleri","yeni-baslayanlar-icin-javascript-temel-kavramlari-adim-adim-rehber","2026-04-15T16:04:45.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/ad85647f63070e174ed2a1986654b4df.jpg","/media/blog/ad85647f63070e174ed2a1986654b4df_thumb.jpg","/media/blog/ad85647f63070e174ed2a1986654b4df.webp","/media/blog/ad85647f63070e174ed2a1986654b4df_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,748,0,"4 dk okuma süresi","/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temel-kavramlari-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/ad85647f63070e174ed2a1986654b4df.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/javascript-temelleri/yeni-baslayanlar-icin-javascript-temel-kavramlari-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-temel-kavramlari-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}]