{"id":31472,"date":"2025-10-10T09:01:16","date_gmt":"2025-10-10T06:01:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/"},"modified":"2025-10-10T09:01:16","modified_gmt":"2025-10-10T06:01:16","slug":"30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/","title":{"rendered":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi"},"content":{"rendered":"

<\/p>\n

Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript’in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.<\/p>\n

G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda, interaktif ve kullan\u0131c\u0131 dostu web siteleri geli\u015ftirmek her zamankinden daha \u00f6nemli hale gelmi\u015ftir. JavaScript, web sayfalar\u0131n\u0131 statik HTML ve CSS’ten \u00e7\u0131kar\u0131p onlara hayat veren sihirli de\u011fnek gibidir. Kullan\u0131c\u0131 etkile\u015fimlerini y\u00f6netmekten, dinamik i\u00e7erik y\u00fcklemeye, animasyonlar olu\u015fturmaktan karma\u015f\u0131k veri manip\u00fclasyonlar\u0131na kadar geni\u015f bir yelpazede yetenek sunar. Bu dil, frontend (\u00f6n y\u00fcz) geli\u015ftiricileri i\u00e7in olmazsa olmaz bir beceri olman\u0131n yan\u0131 s\u0131ra, Node.js sayesinde backend (arka y\u00fcz) geli\u015ftiricileri i\u00e7in de g\u00fc\u00e7l\u00fc bir ara\u00e7 haline gelmi\u015ftir. Kapsaml\u0131 bir ekosisteme sahip olmas\u0131, onu \u00f6\u011frenmeye de\u011fer k\u0131lan en b\u00fcy\u00fck fakt\u00f6rlerden biridir.<\/p>\n

Ancak, 30 g\u00fcn i\u00e7inde JavaScript ustas\u0131 olmak ger\u00e7ek\u00e7i bir hedef de\u011fildir. Bu s\u00fcre zarf\u0131nda, dilin temel s\u00f6zdizimini, \u00f6nemli kavramlar\u0131n\u0131 ve \u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131 kavrayarak sa\u011flam bir temel olu\u015fturmay\u0131 hedeflemelisiniz. \u00d6\u011frenme s\u00fcreci, sadece kod yazmakla s\u0131n\u0131rl\u0131 kalmamal\u0131; ayn\u0131 zamanda problem \u00e7\u00f6zme yetene\u011finizi geli\u015ftirmeli, hata ay\u0131klama (debugging) becerileri kazanmal\u0131 ve \u00f6\u011frendiklerinizi ger\u00e7ek d\u00fcnya senaryolar\u0131na uygulayarak peki\u015ftirmelisiniz. Unutmay\u0131n, en iyi \u00f6\u011frenme y\u00f6ntemi pratik yapmakt\u0131r. Her g\u00fcn d\u00fczenli olarak kod yazmaya zaman ay\u0131rmak, k\u00fc\u00e7\u00fck projeler geli\u015ftirmek ve tak\u0131ld\u0131\u011f\u0131n\u0131z yerlerde ara\u015ft\u0131rmaktan \u00e7ekinmemek, ba\u015far\u0131n\u0131z\u0131n anahtar\u0131 olacakt\u0131r. Bu rehberde size sunulacak olan ad\u0131mlar ve \u00f6rnekler, bu yo\u011fun \u00f6\u011frenme s\u00fcrecinde en verimli \u015fekilde ilerlemenizi sa\u011flayacakt\u0131r. \u00d6yleyse, bu heyecan verici yolculu\u011fa ba\u015flamaya haz\u0131r m\u0131s\u0131n\u0131z?<\/p>\n

JavaScript’in Temel Ta\u015flar\u0131 Nelerdir? \u0130lk Ad\u0131mlar\u0131n\u0131z Nas\u0131l Olmal\u0131?<\/h2>\n

JavaScript \u00f6\u011frenme ser\u00fcvenine ba\u015flarken, dilin yap\u0131 ta\u015flar\u0131n\u0131 anlamak hayati \u00f6nem ta\u015f\u0131r. T\u0131pk\u0131 bir bina in\u015fa ederken sa\u011flam bir temel atmak gibi, JavaScript’te de de\u011fi\u015fkenler, veri tipleri, operat\u00f6rler, kontrol yap\u0131lar\u0131 ve fonksiyonlar gibi temel kavramlar\u0131 eksiksiz kavramak, ileride kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z daha karma\u015f\u0131k konular\u0131 anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u0130lk olarak, veri saklamak i\u00e7in kulland\u0131\u011f\u0131m\u0131z de\u011fi\u015fkenler<\/code> ile ba\u015flayal\u0131m. JavaScript’te var<\/code>, let<\/code> ve const<\/code> olmak \u00fczere \u00fc\u00e7 farkl\u0131 de\u011fi\u015fken tan\u0131mlama anahtar kelimesi bulunur. Modern JavaScript geli\u015ftirmelerinde genellikle let<\/code> ve const<\/code> tercih edilir. let<\/code> ile tan\u0131mlanan de\u011fi\u015fkenlerin de\u011feri daha sonra de\u011fi\u015ftirilebilirken, const<\/code> ile tan\u0131mlanan de\u011fi\u015fkenlerin de\u011feri sabittir ve de\u011fi\u015ftirilemez. Bu, kodunuzun daha \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n

\n Uzman \u0130pucu: var<\/code> yerine let<\/code> ve const<\/code> kullanmak, de\u011fi\u015fkenlerin kapsam\u0131n\u0131 (scope) daha iyi y\u00f6netmenize olanak tan\u0131r ve istenmeyen hatalar\u0131n \u00f6n\u00fcne ge\u00e7er. \u00d6zellikle const<\/code>‘u, de\u011feri de\u011fi\u015fmeyecek t\u00fcm de\u011fi\u015fkenler i\u00e7in tercih etmelisiniz.\n <\/div>\n

Veri tipleri ise JavaScript’in saklayabilece\u011fi farkl\u0131 t\u00fcrdeki bilgileri ifade eder. Ba\u015fl\u0131ca veri tipleri \u015funlard\u0131r:<\/p>\n

    \n
  • String (Metin):<\/strong> \"Merhaba D\u00fcnya\"<\/code> gibi metinsel ifadeler.<\/li>\n
  • Number (Say\u0131):<\/strong> 10<\/code>, 3.14<\/code> gibi say\u0131sal de\u011ferler. Hem tam say\u0131lar\u0131 hem de ondal\u0131k say\u0131lar\u0131 kapsar.<\/li>\n
  • Boolean (Mant\u0131ksal):<\/strong> true<\/code> veya false<\/code> de\u011ferleri. Karar verme mekanizmalar\u0131nda kullan\u0131l\u0131r.<\/li>\n
  • Null (Bo\u015f):<\/strong> Bilerek atanm\u0131\u015f “de\u011fer yok” anlam\u0131na gelen \u00f6zel bir de\u011fer.<\/li>\n
  • Undefined (Tan\u0131ms\u0131z):<\/strong> Bir de\u011fi\u015fkene de\u011fer atanmad\u0131\u011f\u0131nda otomatik olarak sahip oldu\u011fu de\u011fer.<\/li>\n
  • Object (Nesne):<\/strong> Karma\u015f\u0131k veri yap\u0131lar\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Anahtar-de\u011fer \u00e7iftlerinden olu\u015fur. \u00d6rnek: { ad: \"Ali\", yas: 30 }<\/code>.<\/li>\n
  • Array (Dizi):<\/strong> S\u0131ral\u0131 eleman koleksiyonlar\u0131. \u00d6rnek: [1, 2, 3]<\/code>.<\/li>\n<\/ul>\n

    Operat\u00f6rler, de\u011fi\u015fkenler ve de\u011ferler \u00fczerinde i\u015flemler ger\u00e7ekle\u015ftirmemizi sa\u011flar. Aritmetik operat\u00f6rler (+<\/code>, -<\/code>, *<\/code>, \/<\/code>), kar\u015f\u0131la\u015ft\u0131rma operat\u00f6rleri (==<\/code>, ===<\/code>, ><\/code>, <<\/code>) ve mant\u0131ksal operat\u00f6rler (&&<\/code>, ||<\/code>, !<\/code>) bunlardan baz\u0131lar\u0131d\u0131r. \u00d6zellikle ==<\/code> (de\u011fer kar\u015f\u0131la\u015ft\u0131rma) ve ===<\/code> (hem de\u011fer hem tip kar\u015f\u0131la\u015ft\u0131rma) aras\u0131ndaki fark\u0131 anlamak, gelecekteki olas\u0131 hatalar\u0131 engellemek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n

    Kontrol yap\u0131lar\u0131, kodumuzun belirli ko\u015fullara g\u00f6re farkl\u0131 yollar izlemesini sa\u011flar. if\/else<\/code> ifadeleri ile belirli bir ko\u015fulun do\u011fru olup olmad\u0131\u011f\u0131na g\u00f6re farkl\u0131 kod bloklar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rabiliriz. D\u00f6ng\u00fcler (for<\/code>, while<\/code>), bir kod blo\u011funu belirli say\u0131da veya belirli bir ko\u015ful do\u011fru oldu\u011fu s\u00fcrece tekrar tekrar \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r. Bu yap\u0131lar, veri listelerini i\u015flemek veya belirli bir g\u00f6revi otomatikle\u015ftirmek i\u00e7in vazge\u00e7ilmezdir. \u0130\u015fte basit bir for<\/code> d\u00f6ng\u00fcs\u00fc \u00f6rne\u011fi:<\/p>\n

    \nfor (let i = 0; i < 5; i++) {\n    console.log(\"D\u00f6ng\u00fc Ad\u0131m\u0131:\", i);\n}\n    <\/pre>\n
    <\/code><\/p>\n
    Son olarak, fonksiyonlar<\/code>, belirli bir g\u00f6revi yerine getiren yeniden kullan\u0131labilir kod bloklar\u0131d\u0131r. Fonksiyonlar sayesinde kod tekrar\u0131n\u0131 \u00f6nleyebilir, program\u0131m\u0131z\u0131 daha mod\u00fcler ve okunabilir hale getirebiliriz. Bir fonksiyon tan\u0131mlamak ve \u00e7a\u011f\u0131rmak olduk\u00e7a basittir:<\/p>\n
    \nfunction selamVer(isim) {\n    return \"Merhaba, \" + isim + \"!\";\n}\n\nlet mesaj = selamVer(\"D\u00fcnya\");\nconsole.log(mesaj); \/\/ \u00c7\u0131kt\u0131: Merhaba, D\u00fcnya!\n    <\/pre>\n
    <\/code><\/p>\n
    Bu temel kavramlar\u0131 s\u0131k s\u0131k pratik yaparak ve farkl\u0131 senaryolarda uygulayarak peki\u015ftirmelisiniz. Her g\u00fcn yeni bir kavram \u00f6\u011frenip, k\u00fc\u00e7\u00fck kod par\u00e7ac\u0131klar\u0131 yazarak dilin mant\u0131\u011f\u0131n\u0131 i\u00e7selle\u015ftirmeye \u00e7al\u0131\u015f\u0131n. Bu, 30 g\u00fcnl\u00fck yolculu\u011funuzun en kritik ad\u0131m\u0131 olacakt\u0131r.<\/p>\n
    Web Sayfalar\u0131n\u0131 JavaScript ile Canland\u0131rmak: DOM Manip\u00fclasyonu Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
    JavaScript'in web geli\u015ftirme d\u00fcnyas\u0131ndaki as\u0131l g\u00fcc\u00fc, HTML ve CSS ile olu\u015fturulmu\u015f statik web sayfalar\u0131n\u0131 dinamik ve interaktif hale getirme yetene\u011finden gelir. Bu etkile\u015fimi sa\u011flayan ana mekanizma ise Document Object Model (DOM) manip\u00fclasyonudur. DOM, bir web sayfas\u0131n\u0131n yap\u0131sal bir temsilidir; her bir HTML etiketi, metin veya \u00f6znitelik bir nesne olarak modellenir. JavaScript, bu nesnelere eri\u015ferek ve onlar\u0131 de\u011fi\u015ftirerek sayfan\u0131n i\u00e7eri\u011fini, stilini ve yap\u0131s\u0131n\u0131 dinamik olarak de\u011fi\u015ftirebilir. Bu sayede, kullan\u0131c\u0131lar\u0131n butonlara t\u0131klamas\u0131, formlar\u0131 doldurmas\u0131 veya farelerini belirli alanlar\u0131n \u00fczerine getirmesi gibi etkile\u015fimlere yan\u0131t verebiliriz.<\/p>\n
    DOM ile \u00e7al\u0131\u015fmaya ba\u015flaman\u0131n ilk ad\u0131m\u0131, sayfadaki belirli bir HTML elementini se\u00e7mektir. JavaScript, bu ama\u00e7la \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n
      \n
    • document.getElementById('elementId')<\/code>: Belirli bir ID'ye sahip elementi se\u00e7er. En h\u0131zl\u0131 ve en yayg\u0131n y\u00f6ntemlerden biridir.<\/li>\n
    • document.querySelector('.className')<\/code> veya document.querySelector('#elementId')<\/code>: CSS se\u00e7icilerini kullanarak ilk e\u015fle\u015fen elementi se\u00e7er. \u00c7ok y\u00f6nl\u00fcd\u00fcr.<\/li>\n
    • document.querySelectorAll('.className')<\/code>: CSS se\u00e7icilerini kullanarak e\u015fle\u015fen t\u00fcm elementleri bir NodeList (dizi benzeri bir yap\u0131) olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n
    • document.getElementsByClassName('className')<\/code>: Belirli bir s\u0131n\u0131fa sahip t\u00fcm elementleri bir HTMLCollection olarak d\u00f6nd\u00fcr\u00fcr.<\/li>\n<\/ul>\n
      Bir elementi se\u00e7tikten sonra, onun \u00fczerinde \u00e7e\u015fitli i\u015flemler ger\u00e7ekle\u015ftirebiliriz. \u00d6rne\u011fin, elementin metin i\u00e7eri\u011fini textContent<\/code> veya innerHTML<\/code> \u00f6zelliklerini kullanarak de\u011fi\u015ftirebiliriz. innerHTML<\/code> HTML etiketlerini yorumlarken, textContent<\/code> sadece d\u00fcz metni i\u015fler ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan daha g\u00fcvenlidir. Ayr\u0131ca, elementlerin CSS s\u0131n\u0131flar\u0131n\u0131 classList<\/code> \u00f6zelli\u011fiyle ekleyebilir, \u00e7\u0131karabilir veya kontrol edebiliriz, b\u00f6ylece g\u00f6r\u00fcn\u00fcmlerini de\u011fi\u015ftirebiliriz. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n
      \n\n\n\n    \n    \n    DOM Manip\u00fclasyonu \u00d6rne\u011fi<\/title>\n    <style>\n        .highlight {\n            background-color: yellow;\n            font-weight: bold;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1 id=\"baslik\">Merhaba JavaScript!<\/h1>\n    <button id=\"degistirBtn\">Metni ve Stili De\u011fi\u015ftir<\/button>\n\n    <script>\n        const baslikElementi = document.getElementById('baslik');\n        const butonElementi = document.getElementById('degistirBtn');\n\n        butonElementi.addEventListener('click', function() {\n            baslikElementi.textContent = \"DOM Manip\u00fclasyonu Ba\u015far\u0131l\u0131!\";\n            baslikElementi.classList.add('highlight');\n        });\n    <\/script>\n<\/body>\n<\/html>\n    <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, bir buton t\u0131kland\u0131\u011f\u0131nda ba\u015fl\u0131k elementinin metnini de\u011fi\u015ftiriyor ve ona \"highlight\" s\u0131n\u0131f\u0131n\u0131 ekleyerek stilini g\u00fcncelliyoruz. Bu i\u015flem <code class=\"language-js\">addEventListener<\/code> y\u00f6ntemiyle ger\u00e7ekle\u015ftirilen bir olay dinleyicisidir. Bu y\u00f6ntem, belirli bir HTML elementi \u00fczerinde belirli bir olay (\u00f6rne\u011fin 'click', 'mouseover', 'submit') ger\u00e7ekle\u015fti\u011finde bir fonksiyonu \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flar. Olay dinleyicileri, kullan\u0131c\u0131 etkile\u015fimine dayal\u0131 dinamik web sayfalar\u0131 olu\u015fturman\u0131n temelidir.<\/p>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: DOM manip\u00fclasyonu yaparken performans \u00f6nemlidir. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k DOM yap\u0131lar\u0131n\u0131 s\u0131k s\u0131k manip\u00fcle etmekten ka\u00e7\u0131n\u0131n. Gerekirse sanal DOM kullanan React, Vue gibi modern k\u00fct\u00fcphaneleri \u00f6\u011frenmeyi d\u00fc\u015f\u00fcnebilirsiniz.\n    <\/div>\n<p>DOM manip\u00fclasyonu sadece mevcut elementleri de\u011fi\u015ftirmekle kalmaz, ayn\u0131 zamanda yeni elementler olu\u015fturman\u0131za ve onlar\u0131 sayfaya eklemenize de olanak tan\u0131r. <code class=\"language-js\">document.createElement('div')<\/code> ile yeni bir element olu\u015fturabilir, <code class=\"language-js\">appendChild()<\/code> veya <code class=\"language-js\">insertBefore()<\/code> gibi y\u00f6ntemlerle bu elementi DOM a\u011fac\u0131na ekleyebilirsiniz. Benzer \u015fekilde, <code class=\"language-js\">removeChild()<\/code> y\u00f6ntemiyle mevcut elementleri sayfadan kald\u0131rabilirsiniz. Bu yetenekler, web sayfan\u0131z\u0131n i\u00e7eri\u011fini anl\u0131k olarak dinamik bir \u015fekilde in\u015fa etmenize ve y\u00f6netmenize imkan tan\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n sepetine \u00fcr\u00fcn ekledi\u011finde yeni bir liste \u00f6\u011fesi olu\u015fturup sepete eklemek veya bir hata mesaj\u0131 \u00e7\u0131kt\u0131\u011f\u0131nda bir uyar\u0131 elementi olu\u015fturup sayfada g\u00f6stermek gibi senaryolarda DOM manip\u00fclasyonu vazge\u00e7ilmezdir. Bu b\u00f6l\u00fcmde \u00f6\u011frendiklerinizle, kullan\u0131c\u0131lar\u0131n etkile\u015fimde bulunabilece\u011fi basit ama etkili web uygulamalar\u0131 geli\u015ftirebilirsiniz.<\/p>\n<h2>Modern Web Uygulamalar\u0131n\u0131n Kalbi: Asenkron JavaScript ve API Kullan\u0131m\u0131<\/h2>\n<p>Modern web uygulamalar\u0131 genellikle sadece taray\u0131c\u0131da \u00e7al\u0131\u015fan koddan ibaret de\u011fildir; s\u0131kl\u0131kla sunuculardan veri \u00e7eker, harici servislerle ileti\u015fim kurar ve kullan\u0131c\u0131ya kesintisiz bir deneyim sunar. \u0130\u015fte bu noktada <code class=\"language-js\">asenkron JavaScript<\/code> devreye girer. Geleneksel olarak, JavaScript kodu senkron (s\u0131ral\u0131) \u00e7al\u0131\u015f\u0131r, yani bir g\u00f6rev tamamlanmadan di\u011ferine ge\u00e7ilmez. Ancak, bir sunucudan veri \u00e7ekmek gibi uzun s\u00fcrebilecek bir i\u015flemi senkron olarak yapmak, taray\u0131c\u0131n\u0131n donmas\u0131na ve kullan\u0131c\u0131 deneyiminin k\u00f6t\u00fcle\u015fmesine neden olurdu. Asenkron programlama, bu t\u00fcr uzun s\u00fcreli i\u015flemleri arka planda y\u00fcr\u00fct\u00fcrken ana program ak\u0131\u015f\u0131n\u0131n kesintiye u\u011framamas\u0131n\u0131 sa\u011flar, b\u00f6ylece kullan\u0131c\u0131 aray\u00fcz\u00fc tepki vermeye devam eder.<\/p>\n<p>Asenkron programlaman\u0131n temelini olu\u015fturan \u00fc\u00e7 ana yap\u0131 vard\u0131r:<\/p>\n<ol>\n<li><strong>Callback Fonksiyonlar\u0131:<\/strong> Bir i\u015flemin tamamlanmas\u0131n\u0131n ard\u0131ndan \u00e7a\u011fr\u0131lan fonksiyonlard\u0131r. Ba\u015flang\u0131\u00e7ta yayg\u0131n olarak kullan\u0131lsalar da, i\u00e7 i\u00e7e ge\u00e7mi\u015f \u00e7ok say\u0131da callback \"callback hell\" olarak bilinen okunmas\u0131 ve y\u00f6netilmesi zor kodlara yol a\u00e7abilir.<\/li>\n<li><strong>Promise'lar:<\/strong> Bir asenkron i\u015flemin nihai sonucunu (ba\u015far\u0131 veya hata) temsil eden nesnelerdir. Promise'lar sayesinde asenkron i\u015flemleri daha temiz ve zincirleme bir \u015fekilde y\u00f6netebiliriz. Bir Promise <code class=\"language-js\">pending<\/code> (beklemede), <code class=\"language-js\">fulfilled<\/code> (ba\u015far\u0131l\u0131) veya <code class=\"language-js\">rejected<\/code> (hatal\u0131) durumlar\u0131nda olabilir.<\/li>\n<li><strong>Async\/Await:<\/strong> ES2017 ile gelen bu yap\u0131, Promise'lar \u00fczerine kuruludur ve asenkron kodu senkron gibi yazmam\u0131z\u0131 sa\u011flayarak okunabilirli\u011fi art\u0131r\u0131r. <code class=\"language-js\">async<\/code> bir fonksiyonun asenkron oldu\u011funu belirtirken, <code class=\"language-js\">await<\/code> bir Promise'\u0131n tamamlanmas\u0131n\u0131 bekler.<\/li>\n<\/ol>\n<p>API (Application Programming Interface) kullan\u0131m\u0131, asenkron JavaScript'in en yayg\u0131n kullan\u0131m alanlar\u0131ndan biridir. API'lar, uygulamalar\u0131n birbiriyle ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan kurallar ve protokoller k\u00fcmesidir. \u00d6rne\u011fin, bir hava durumu API'sinden veri \u00e7ekerek uygulaman\u0131zda g\u00fcncel hava durumu bilgilerini g\u00f6sterebilirsiniz. JavaScript'te API'larla ileti\u015fim kurmak i\u00e7in genellikle <code class=\"language-js\">fetch<\/code> API'si veya eski y\u00f6ntem olan <code class=\"language-js\">XMLHttpRequest<\/code> kullan\u0131l\u0131r. <code class=\"language-js\">fetch<\/code> API'si Promise tabanl\u0131 oldu\u011fu i\u00e7in modern web geli\u015ftirmelerinde tercih edilir. \u0130\u015fte bir \u00f6rnek:<\/p>\n<pre><code class=\"language-js\">\nasync function havaDurumuGetir(sehir) {\n    const apiKey = 'YOUR_API_KEY'; \/\/ Kendi API anahtar\u0131n\u0131z\u0131 buraya girin\n    const url = <code>https:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${sehir}&appid=${apiKey}&units=metric<\/code>;\n\n    try {\n        const response = await fetch(url);\n        if (!response.ok) {\n            throw new Error(<code>HTTP hata kodu: ${response.status}<\/code>);\n        }\n        const data = await response.json();\n        console.log(<code>${sehir} \u015fehrinin hava durumu: ${data.main.temp}\u00b0C, ${data.weather[0].description}<\/code>);\n        return data;\n    } catch (error) {\n        console.error(\"Hava durumu bilgisi al\u0131n\u0131rken bir hata olu\u015ftu:\", error);\n    }\n}\n\n\/\/ Kullan\u0131m \u00f6rne\u011fi\nhavaDurumuGetir(\"Ankara\");\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code class=\"language-js\">havaDurumuGetir<\/code> ad\u0131nda asenkron bir fonksiyon tan\u0131mlad\u0131k. Bu fonksiyon, OpenWeatherMap API'sinden belirtilen \u015fehrin hava durumunu \u00e7ekiyor. <code class=\"language-js\">await fetch(url)<\/code> ile HTTP iste\u011fini g\u00f6nderiyor ve yan\u0131t\u0131n gelmesini bekliyoruz. Yan\u0131t geldikten sonra, <code class=\"language-js\">response.json()<\/code> ile JSON format\u0131ndaki veriyi JavaScript nesnesine d\u00f6n\u00fc\u015ft\u00fcr\u00fcyoruz. <code class=\"language-js\">try...catch<\/code> blo\u011fu ise olas\u0131 hatalar\u0131 yakalamak ve kullan\u0131c\u0131ya veya geli\u015ftiriciye bilgi vermek i\u00e7in kullan\u0131l\u0131r. Bu sayede, a\u011f ba\u011flant\u0131s\u0131 sorunlar\u0131 veya API'dan gelen hatalar gibi durumlarda uygulaman\u0131z\u0131n \u00e7\u00f6kmesini engellersiniz.<\/p>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: Asenkron i\u015flemleri y\u00f6netirken hata y\u00f6netimi (error handling) kritik \u00f6nem ta\u015f\u0131r. Her zaman <code class=\"language-js\">try...catch<\/code> bloklar\u0131 veya Promise'lar\u0131n <code class=\"language-js\">.catch()<\/code> metodu ile olas\u0131 hatalar\u0131 ele almaya \u00f6zen g\u00f6sterin.\n    <\/div>\n<p><strong>Vaka Analizi: Basit Bir Haber Ba\u015fl\u0131klar\u0131 Uygulamas\u0131<\/strong><\/p>\n<p>K\u00fc\u00e7\u00fck bir uygulama ile bu konuyu peki\u015ftirelim. Haber ba\u015fl\u0131klar\u0131n\u0131 g\u00f6steren basit bir uygulama d\u00fc\u015f\u00fcnelim. Bir haber API'sinden veri \u00e7ekerek bu ba\u015fl\u0131klar\u0131 bir liste halinde kullan\u0131c\u0131ya sunabiliriz. Kullan\u0131c\u0131 bir butona bast\u0131\u011f\u0131nda, en yeni haberler y\u00fcklenir ve sayfadaki bir <code class=\"language-html\"><\/p>\n<ul><\/code> elementine eklenir.<\/p>\n<pre><code class=\"language-html\">\n<!-- HTML B\u00f6l\u00fcm\u00fc -->\n<h2>G\u00fcncel Haber Ba\u015fl\u0131klar\u0131<\/h2>\n<button id=\"haberGetirBtn\">Haberleri Y\u00fckle<\/button>\n<ul id=\"haberListesi\"><\/ul>\n\n<!-- JavaScript B\u00f6l\u00fcm\u00fc -->\n<script>\n    const haberGetirBtn = document.getElementById('haberGetirBtn');\n    const haberListesi = document.getElementById('haberListesi');\n\n    async function haberleriYukle() {\n        haberListesi.innerHTML = '<li>Y\u00fckleniyor...<\/li>'; \/\/ Y\u00fckleme mesaj\u0131\n        try {\n            \/\/ \u00d6rnek bir kamu API'si (ger\u00e7ek bir haber API'si anahtar gerektirebilir)\n            const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts?_limit=5');\n            if (!response.ok) {\n                throw new Error(<code>API hatas\u0131: ${response.status}<\/code>);\n            }\n            const haberler = await response.json();\n            \n            haberListesi.innerHTML = ''; \/\/ Y\u00fckleme mesaj\u0131n\u0131 temizle\n            haberler.forEach(haber => {\n                const li = document.createElement('li');\n                li.textContent = haber.title;\n                haberListesi.appendChild(li);\n            });\n        } catch (error) {\n            console.error(\"Haberler y\u00fcklenirken hata olu\u015ftu:\", error);\n            haberListesi.innerHTML = '<li style=\"color: red;\">Haberler y\u00fcklenemedi. L\u00fctfen tekrar deneyin.<\/li>';\n        }\n    }\n\n    haberGetirBtn.addEventListener('click', haberleriYukle);\n    haberleriYukle(); \/\/ Sayfa y\u00fcklendi\u011finde de haberleri getir\n<\/script>\n    <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnek, <code class=\"language-js\">fetch<\/code>, <code class=\"language-js\">async\/await<\/code> ve DOM manip\u00fclasyonunu bir araya getirerek dinamik bir kullan\u0131c\u0131 deneyimi nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 g\u00f6steriyor. Asenkron JavaScript, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r ve bu kavramlar\u0131 iyi kavramak, ileri d\u00fczey projelere ge\u00e7i\u015finiz i\u00e7in sa\u011flam bir zemin olu\u015fturacakt\u0131r.<\/p>\n<h2>Daha Verimli ve Okunabilir Kod: Modern JavaScript (ES6+) \u00d6zellikleri Nelerdir?<\/h2>\n<p>JavaScript, her y\u0131l yeni \u00f6zellikler ve iyile\u015ftirmelerle geli\u015fimine devam eden dinamik bir dildir. ECMAScript 2015 (ES6) ile ba\u015flayan bu modernle\u015fme s\u00fcreci, dilin s\u00f6zdizimini \u00f6nemli \u00f6l\u00e7\u00fcde geli\u015ftirerek daha temiz, okunabilir ve verimli kod yazma imkan\u0131 sunmu\u015ftur. ES6 ve sonras\u0131 gelen s\u00fcr\u00fcmler (ES7, ES8 vb.) ile tan\u0131\u015fmak, g\u00fcn\u00fcm\u00fcz JavaScript projelerinde etkin bir \u015fekilde \u00e7al\u0131\u015fabilmeniz i\u00e7in kritik \u00f6neme sahiptir. Bu b\u00f6l\u00fcmde, modern JavaScript'in getirdi\u011fi ba\u015fl\u0131ca yenilikleri ve bunlar\u0131n kod yaz\u0131m prati\u011finizi nas\u0131l de\u011fi\u015ftirece\u011fini ele alaca\u011f\u0131z.<\/p>\n<p><strong>1. <code>let<\/code> ve <code>const<\/code> ile De\u011fi\u015fken Tan\u0131mlama:<\/strong> Daha \u00f6nce de bahsetti\u011fimiz gibi, <code class=\"language-js\">var<\/code> yerine art\u0131k <code class=\"language-js\">let<\/code> ve <code class=\"language-js\">const<\/code> kullan\u0131yoruz. Bu anahtar kelimeler, de\u011fi\u015fkenlerin blok kapsaml\u0131 (block-scoped) olmas\u0131n\u0131 sa\u011flayarak hatalar\u0131 azalt\u0131r ve kodun anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. <code class=\"language-js\">let<\/code> ile yeniden atanabilir de\u011fi\u015fkenler tan\u0131mlarken, <code class=\"language-js\">const<\/code> ile sabit (de\u011feri de\u011fi\u015ftirilemez) de\u011fi\u015fkenler tan\u0131mlar\u0131z.<\/p>\n<pre><code class=\"language-js\">\nif (true) {\n    let ad = \"Mehmet\";\n    const soyad = \"Y\u0131lmaz\";\n    console.log(ad, soyad); \/\/ Mehmet Y\u0131lmaz\n}\n\/\/ console.log(ad); \/\/ Hata: ad tan\u0131ml\u0131 de\u011fil (blok kapsaml\u0131)\n    <\/pre>\n<p><\/code><\/p>\n<p><strong>2. Ok Fonksiyonlar\u0131 (Arrow Functions):<\/strong> K\u0131sa ve daha okunabilir fonksiyon tan\u0131mlama s\u00f6zdizimi sunar. \u00d6zellikle k\u00fc\u00e7\u00fck ve anonim fonksiyonlar i\u00e7in idealdir. Ayr\u0131ca, <code class=\"language-js\">this<\/code> anahtar kelimesinin nas\u0131l davrand\u0131\u011f\u0131 konusunda geleneksel fonksiyonlardan farkl\u0131d\u0131r; kendi <code class=\"language-js\">this<\/code> ba\u011flam\u0131n\u0131 olu\u015fturmazlar.<\/p>\n<pre><code class=\"language-js\">\n\/\/ Geleneksel fonksiyon\nconst toplama = function(a, b) {\n    return a + b;\n};\n\n\/\/ Ok fonksiyonu\nconst carpma = (a, b) => a * b;\n\nconsole.log(toplama(5, 3)); \/\/ 8\nconsole.log(carpma(5, 3));  \/\/ 15\n    <\/pre>\n<p><\/code><\/p>\n<p><strong>3. \u015eablon Dizeleri (Template Literals):<\/strong> String ifadeleri daha kolay ve okunabilir bir \u015fekilde olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Backtick (`<code><\/code> `<code>) karakteri ile tan\u0131mlan\u0131r ve <code class=\"language-js\">${ifade}<\/code> s\u00f6zdizimi ile de\u011fi\u015fkenleri veya JavaScript ifadelerini do\u011frudan i\u00e7ine g\u00f6mmemize olanak tan\u0131r. \u00c7ok sat\u0131rl\u0131 stringler yazmay\u0131 da kolayla\u015ft\u0131r\u0131r.<\/p>\n<pre><code class=\"language-js\">\nconst isim = \"Ay\u015fe\";\nconst yas = 28;\nconst mesaj =<\/code>Merhaba, benim ad\u0131m ${isim} ve ${yas} ya\u015f\u0131nday\u0131m.\nBu \u00e7ok sat\u0131rl\u0131 bir mesajd\u0131r.<code>;\nconsole.log(mesaj);\n    <\/code><\/pre>\n<p><strong>4. Destructuring (Yap\u0131 \u00c7\u00f6z\u00fcmleme):<\/strong> Dizilerdeki veya nesnelerdeki de\u011ferleri daha k\u0131sa ve \u00f6z bir \u015fekilde ayr\u0131 de\u011fi\u015fkenlere atamam\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-js\">\n\/\/ Nesne Destructuring\nconst kisi = { ad: \"Can\", soyad: \"Demir\", meslek: \"M\u00fchendis\" };\nconst { ad, meslek } = kisi;\nconsole.log(ad, meslek); \/\/ Can M\u00fchendis\n\n\/\/ Dizi Destructuring\nconst sayilar = [10, 20, 30];\nconst [ilk, ikinci] = sayilar;\nconsole.log(ilk, ikinci); \/\/ 10 20\n    <\/code><\/pre>\n<p><strong>5. Spread ve Rest Operat\u00f6rleri (<\/code>...<code>):<\/strong> Bu operat\u00f6r, \u00fc\u00e7 nokta (<code class=\"language-js\">...<\/code>) ile ifade edilir ancak kullan\u0131m ba\u011flam\u0131na g\u00f6re farkl\u0131 i\u015flevler g\u00f6r\u00fcr.<\/p>\n<ul>\n<li><strong>Spread Operat\u00f6r\u00fc:<\/strong> Bir diziyi veya nesneyi \"yayarak\" elemanlar\u0131n\u0131 ayr\u0131 ayr\u0131 ba\u015fka bir diziye veya nesneye kopyalamam\u0131z\u0131 sa\u011flar.<\/li>\n<pre><code class=\"language-js\">\nconst dizi1 = [1, 2, 3];\nconst dizi2 = [...dizi1, 4, 5]; \/\/ [1, 2, 3, 4, 5]\n\nconst nesne1 = { a: 1, b: 2 };\nconst nesne2 = { ...nesne1, c: 3 }; \/\/ { a: 1, b: 2, c: 3 }\n        <\/code><\/pre>\n<li><strong>Rest Parametresi:<\/strong> Bir fonksiyona ge\u00e7irilen kalan t\u00fcm arg\u00fcmanlar\u0131 bir dizi olarak toplar.<\/li>\n<pre><code class=\"language-js\">\nfunction toplam(...args) {\n    return args.reduce((acc, curr) => acc + curr, 0);\n}\nconsole.log(toplam(1, 2, 3, 4)); \/\/ 10\n        <\/code><\/pre>\n<\/ul>\n<p><strong>6. Mod\u00fcller (<\/code>import<code>\/<\/code>export<code>):<\/strong> B\u00fcy\u00fck projelerde kodun d\u00fczenli kalmas\u0131 ve tekrar kullan\u0131labilir olmas\u0131 i\u00e7in mod\u00fcller hayati \u00f6neme sahiptir. ES6 mod\u00fclleri, kodunuzu ayr\u0131 dosyalara b\u00f6lmenize ve bunlar\u0131 <code class=\"language-js\">import<\/code> ve <code class=\"language-js\">export<\/code> anahtar kelimeleriyle birbirine ba\u011flaman\u0131za olanak tan\u0131r.<\/p>\n<pre><code class=\"language-js\">\n\/\/ matematik.js dosyas\u0131\nexport const topla = (a, b) => a + b;\nexport const cikar = (a, b) => a - b;\n\n\/\/ app.js dosyas\u0131\nimport { topla, cikar } from '.\/matematik.js';\nconsole.log(topla(10, 5)); \/\/ 15\n    <\/code><\/pre>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: Mod\u00fcl sistemini kullanarak kodunuzu k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve odaklanm\u0131\u015f par\u00e7alara b\u00f6l\u00fcn. Bu, kodunuzu daha y\u00f6netilebilir, test edilebilir ve yeniden kullan\u0131labilir hale getirecektir.\n    <\/div>\n<p>Bu modern \u00f6zellikler, JavaScript geli\u015ftiricilerinin hayat\u0131n\u0131 kolayla\u015ft\u0131rm\u0131\u015f, kodu daha a\u00e7\u0131klay\u0131c\u0131 ve s\u00fcrd\u00fcr\u00fclebilir hale getirmi\u015ftir. 30 g\u00fcnl\u00fck \u00f6\u011frenme s\u00fcrecinizde bu \u00f6zellikleri aktif olarak kullanarak pratik yapman\u0131z, g\u00fcn\u00fcm\u00fcz\u00fcn gerektirdi\u011fi modern JavaScript bilgisine ula\u015fman\u0131z\u0131 sa\u011flayacakt\u0131r. Unutmay\u0131n, dil s\u00fcrekli geli\u015fiyor ve bu geli\u015fmeleri takip etmek, sizi daha yetkin bir geli\u015ftirici yapacakt\u0131r.<\/p>\n<h2>Geli\u015ftirici \u0130\u00e7in Pratik \u0130pu\u00e7lar\u0131: Performans ve Mobil Uyumluluk<\/h2>\n<p>Web geli\u015ftirme yolculu\u011funuzda sadece kod yazmakla kalmay\u0131p, yazd\u0131\u011f\u0131n\u0131z kodun performans\u0131 ve farkl\u0131 cihazlardaki uyumlulu\u011fu hakk\u0131nda da d\u00fc\u015f\u00fcnmeniz gerekir. \u00d6zellikle mobil cihazlar\u0131n yayg\u0131nla\u015fmas\u0131yla birlikte, web sitelerinin ve uygulamalar\u0131n mobil uyumlu olmas\u0131, h\u0131zl\u0131 y\u00fcklenmesi ve ak\u0131c\u0131 \u00e7al\u0131\u015fmas\u0131 art\u0131k bir l\u00fcks de\u011fil, bir zorunluluktur. Bu b\u00f6l\u00fcmde, web uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 art\u0131rmak ve mobil cihazlarda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in uygulayabilece\u011finiz baz\u0131 pratik ipu\u00e7lar\u0131na de\u011finece\u011fiz.<\/p>\n<h3>Mobil Uyumluluk \u0130\u00e7in CSS Media Query \u00d6rne\u011fi<\/h3>\n<p>Mobil uyumluluk, responsive tasar\u0131m prensipleriyle sa\u011flan\u0131r. CSS Media Query'leri, ekran boyutuna, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe veya cihaz\u0131n y\u00f6n\u00fcne g\u00f6re farkl\u0131 stil kurallar\u0131 uygulaman\u0131za olanak tan\u0131r. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Mobil Uyumlu Sayfa<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            margin: 20px;\n            background-color: #f4f4f4;\n        }\n        .container {\n            width: 90%;\n            margin: auto;\n            background-color: #fff;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        h1 {\n            color: #333;\n        }\n        p {\n            color: #666;\n            line-height: 1.6;\n        }\n\n        \/* Mobil cihazlar i\u00e7in stil (maksimum geni\u015flik 768px) *\/\n        @media screen and (max-width: 768px) {\n            .container {\n                width: 100%; \/* Tam geni\u015flik *\/\n                padding: 10px;\n            }\n            h1 {\n                font-size: 1.5em; \/* Ba\u015fl\u0131k boyutunu k\u00fc\u00e7\u00fclt *\/\n            }\n            p {\n                font-size: 0.9em; \/* Metin boyutunu k\u00fc\u00e7\u00fclt *\/\n            }\n        }\n\n        \/* Daha k\u00fc\u00e7\u00fck ekranl\u0131 mobil cihazlar i\u00e7in stil (maksimum geni\u015flik 480px) *\/\n        @media screen and (max-width: 480px) {\n            body {\n                margin: 10px;\n            }\n            h1 {\n                text-align: center;\n                color: #007bff;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <h1>Responsive Tasar\u0131m \u00d6rne\u011fi<\/h1>\n        <p>Bu metin, ekran geni\u015fli\u011fine g\u00f6re boyut ve rengini de\u011fi\u015ftirecektir. Web sayfalar\u0131n\u0131z\u0131 farkl\u0131 cihazlarda d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fclemek i\u00e7in media query'ler kullanmak kritik \u00f6neme sahiptir. Kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n en temel yollar\u0131ndan biridir.<\/p>\n    <\/div>\n<\/body>\n<\/html>\n    <\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte, ekran geni\u015fli\u011fi azald\u0131k\u00e7a <code class=\"language-css\">.container<\/code> elementinin geni\u015fli\u011fi de\u011fi\u015fiyor, ba\u015fl\u0131k ve paragraf metinlerinin boyutlar\u0131 k\u00fc\u00e7\u00fcl\u00fcyor, hatta en k\u00fc\u00e7\u00fck ekranlarda ba\u015fl\u0131\u011f\u0131n rengi ve hizalamas\u0131 da farkl\u0131la\u015f\u0131yor. Bu sayede web siteniz, farkl\u0131 ekran boyutlar\u0131na ak\u0131ll\u0131ca adapte olabilir.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131<\/h3>\n<p>Performans, kullan\u0131c\u0131lar\u0131n sitenizde kalmas\u0131n\u0131 sa\u011flayan en \u00f6nemli fakt\u00f6rlerden biridir. Yava\u015f y\u00fcklenen bir site, kullan\u0131c\u0131lar\u0131n hemen terk etmesine neden olabilir. \u0130\u015fte JavaScript ve genel web geli\u015ftirme ba\u011flam\u0131nda performans\u0131n\u0131z\u0131 art\u0131racak baz\u0131 ipu\u00e7lar\u0131:<\/p>\n<ul>\n<li><strong>JavaScript Kodunu Optimize Edin:<\/strong>\n<ul>\n<li><strong>Minify ve Gzip:<\/strong> Da\u011f\u0131t\u0131ma \u00e7\u0131kmadan \u00f6nce JavaScript dosyalar\u0131n\u0131z\u0131 minify (gereksiz bo\u015fluklar\u0131, yorumlar\u0131 vb. kald\u0131rmak) ve Gzip ile s\u0131k\u0131\u015ft\u0131r\u0131n. Bu, dosya boyutunu k\u00fc\u00e7\u00fclterek indirme s\u00fcresini k\u0131salt\u0131r.<\/li>\n<li><strong>Gereksiz DOM Manip\u00fclasyonlar\u0131ndan Ka\u00e7\u0131n\u0131n:<\/strong> \u00d6zellikle d\u00f6ng\u00fcler i\u00e7inde s\u00fcrekli DOM'a eri\u015fmek veya onu de\u011fi\u015ftirmek performans\u0131 olumsuz etkiler. Birden fazla DOM de\u011fi\u015fikli\u011fi yapman\u0131z gerekti\u011finde, bu de\u011fi\u015fiklikleri bir araya getirip tek seferde yapmaya \u00e7al\u0131\u015f\u0131n.<\/li>\n<li><strong><\/code>debouncing<code>ve<\/code>throttling<code>Kullan\u0131n:<\/strong> Klavye giri\u015fi, pencere boyutland\u0131rma veya kayd\u0131rma gibi s\u0131k tetiklenen olaylar i\u00e7in, olay i\u015fleyicilerinizi <code class=\"language-js\">debounce<\/code> veya <code class=\"language-js\">throttle<\/code> teknikleriyle optimize edin. Bu sayede olay i\u015fleyici belirli bir s\u00fcre i\u00e7inde yaln\u0131zca bir kez veya belirli aral\u0131klarla tetiklenir, gereksiz i\u015flem y\u00fck\u00fcn\u00fc azalt\u0131r.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Resimleri Optimize Edin:<\/strong> Web sitenizdeki resimlerin boyutlar\u0131n\u0131 ve formatlar\u0131n\u0131 (WebP gibi modern formatlar) optimize edin. Lazy loading (tembel y\u00fckleme) uygulayarak sadece ekranda g\u00f6r\u00fcnen resimlerin y\u00fcklenmesini sa\u011flay\u0131n.<\/li>\n<li><strong>Asenkron Y\u00fckleme (<\/code>defer<code>ve<\/code>async`):<\/strong> JavaScript dosyalar\u0131n\u0131z\u0131 HTML'e eklerken <code class=\"language-html\"><script><\/code> etiketlerinde <code class=\"language-html\">async<\/code> veya <code class=\"language-html\">defer<\/code> niteliklerini kullan\u0131n. Bu, taray\u0131c\u0131n\u0131n di\u011fer HTML ve CSS \u00f6\u011felerini ayr\u0131\u015ft\u0131rmaya devam ederken JavaScript dosyas\u0131n\u0131 arka planda indirmesini sa\u011flar ve sayfan\u0131n daha h\u0131zl\u0131 g\u00f6r\u00fcnt\u00fclenmesine yard\u0131mc\u0131 olur.<\/li>\n<pre><code class=\"language-html\">\n<script src=\"app.js\" async><\/script>\n<script src=\"utils.js\" defer><\/script>\n        <\/pre>\n<p><\/code><\/p>\n<li><strong>Kritik CSS ve JavaScript:<\/strong> Sayfan\u0131n ilk g\u00f6r\u00fcnen k\u0131sm\u0131n\u0131 (above-the-fold content) stilize etmek i\u00e7in gereken CSS'i HTML'in <code class=\"language-html\"><head><\/code> b\u00f6l\u00fcm\u00fcne inline olarak ekleyerek ilk boyama s\u00fcresini h\u0131zland\u0131r\u0131n. Kalan CSS ve JavaScript dosyalar\u0131n\u0131 asenkron olarak y\u00fckleyin.<\/li>\n<\/ul>\n<div class=\"uzman-ipucu\">\n        Uzman \u0130pucu: Taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 (\u00f6zellikle Lighthouse ve Performance paneli) aktif olarak kullanarak sitenizin performans\u0131n\u0131 d\u00fczenli olarak \u00f6l\u00e7\u00fcn ve darbo\u011fazlar\u0131 tespit edin. Bu ara\u00e7lar, neleri iyile\u015ftirmeniz gerekti\u011fi konusunda size de\u011ferli bilgiler sunar.\n    <\/div>\n<p>Performans ve mobil uyumluluk, kullan\u0131c\u0131 memnuniyeti ve SEO i\u00e7in vazge\u00e7ilmezdir. Bu ipu\u00e7lar\u0131n\u0131 uygulayarak sadece daha iyi bir geli\u015ftirici olmakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n\u0131za daha keyifli bir web deneyimi sunars\u0131n\u0131z. 30 g\u00fcnl\u00fck \u00f6\u011frenme s\u00fcrecinizde bu konular\u0131 da g\u00f6z \u00f6n\u00fcnde bulundurarak pratik yapmaya \u00f6zen g\u00f6sterin.<\/p>\n<h2>30 G\u00fcnl\u00fck Yolculu\u011funuzun Ard\u0131ndan: Nereye Gidiyorsunuz?<\/h2>\n<p>Tebrikler! Bu rehberin sonunda, JavaScript'in temelinden modern \u00f6zelliklerine, DOM manip\u00fclasyonundan asenkron programlamaya ve performans ipu\u00e7lar\u0131na kadar geni\u015f bir yelpazede bilgi edinmi\u015f oldunuz. 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede, web geli\u015ftirme d\u00fcnyas\u0131n\u0131n en g\u00fc\u00e7l\u00fc dillerinden birine sa\u011flam bir giri\u015f yapt\u0131n\u0131z. Ancak unutmay\u0131n, bu yolculuk sadece bir ba\u015flang\u0131\u00e7. JavaScript d\u00fcnyas\u0131 s\u00fcrekli geli\u015fiyor ve \u00f6\u011frenecek \u00e7ok daha fazla \u015fey var. \u015eimdiye kadar edindi\u011finiz bilgilerle, kendi fikirlerinizi hayata ge\u00e7irecek ve daha karma\u015f\u0131k projelerin \u00fcstesinden gelecek yetkinli\u011fe sahip oldunuz. Peki, bundan sonraki ad\u0131mlar\u0131n\u0131z neler olmal\u0131?<\/p>\n<p>\u00d6ncelikle, \u00f6\u011frendi\u011finiz her \u015feyi bolca pratikle peki\u015ftirin. K\u00fc\u00e7\u00fck projeler geli\u015ftirin: bir hesap makinesi, bir yap\u0131lacaklar listesi (todo list), bir hava durumu uygulamas\u0131 veya basit bir oyun. Bu pratikler, bilginizi kal\u0131c\u0131 hale getirecek ve problem \u00e7\u00f6zme yetene\u011finizi geli\u015ftirecektir. Ard\u0131ndan, kariyer hedeflerinize g\u00f6re belirli bir alanda derinle\u015fmeye ba\u015flayabilirsiniz. Frontend (\u00f6n y\u00fcz) geli\u015ftirme ilginizi \u00e7ekiyorsa React, Vue veya Angular gibi modern JavaScript framework'lerini \u00f6\u011frenmek harika bir sonraki ad\u0131m olacakt\u0131r. Bu framework'ler, karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmay\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r ve sekt\u00f6rde olduk\u00e7a talep g\u00f6rmektedir. Backend (arka y\u00fcz) geli\u015ftirmeye merakl\u0131ysan\u0131z, Node.js ve Express.js ile sunucu taraf\u0131 uygulamalar geli\u015ftirmeye ba\u015flayabilirsiniz. JavaScript'in her iki tarafta da kullan\u0131labilmesi, size full-stack geli\u015ftirici olma yolunda e\u015fsiz bir avantaj sunar.<\/p>\n<p>Son olarak, \u00f6\u011frenme s\u00fcrecinizi asla durdurmay\u0131n. Teknoloji d\u00fcnyas\u0131 h\u0131zl\u0131 bir de\u011fi\u015fim i\u00e7inde ve s\u00fcrekli yeni ara\u00e7lar, k\u00fct\u00fcphaneler ve en iyi uygulamalar ortaya \u00e7\u0131k\u0131yor. Online kurslar\u0131 takip edin, teknik bloglar\u0131 okuyun, geli\u015ftirici topluluklar\u0131na kat\u0131l\u0131n ve a\u00e7\u0131k kaynak projelere katk\u0131da bulunmay\u0131 d\u00fc\u015f\u00fcn\u00fcn. Bu s\u00fcrekli \u00f6\u011frenme ve geli\u015fim s\u00fcreci, sizi alan\u0131n\u0131zda yetkin ve aranan bir profesyonel yapacakt\u0131r. Ba\u015far\u0131lar dileriz!<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt>30 G\u00fcnde JavaScript \u00f6\u011frenmek i\u00e7in her g\u00fcn ne kadar zaman ay\u0131rmal\u0131y\u0131m?<\/dt>\n<dd>Bu tamamen ki\u015fisel \u00f6\u011frenme h\u0131z\u0131n\u0131za ve temponuza ba\u011fl\u0131d\u0131r. Ancak, etkili bir \u00f6\u011frenme i\u00e7in g\u00fcnde en az 2-3 saat ay\u0131rman\u0131z \u00f6nerilir. Bu s\u00fcrenin b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 pratik kod yazmaya ve k\u00fc\u00e7\u00fck projeler geli\u015ftirmeye odaklanmal\u0131s\u0131n\u0131z.<\/dd>\n<dt>Hangi ara\u00e7lar\u0131 kullanmal\u0131y\u0131m?<\/dt>\n<dd>Ba\u015flang\u0131\u00e7 i\u00e7in Visual Studio Code gibi bir kod d\u00fczenleyici (editor) ve herhangi bir modern web taray\u0131c\u0131s\u0131 (Chrome, Firefox vb.) yeterlidir. Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 (Developer Tools) da aktif olarak kullanarak kodunuzu test etmeyi ve hata ay\u0131klamay\u0131 \u00f6\u011frenmelisiniz.<\/dd>\n<dt>JavaScript \u00f6\u011frenirken tak\u0131l\u0131rsam ne yapmal\u0131y\u0131m?<\/dt>\n<dd>Bu \u00e7ok normal bir durumdur. \u00d6ncelikle, Google'da veya Stack Overflow gibi sitelerde sorununuza benzer \u00e7\u00f6z\u00fcmler aray\u0131n. \u00c7o\u011fu zaman, kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z sorun ba\u015fkalar\u0131 taraf\u0131ndan da deneyimlenmi\u015ftir. Hata mesajlar\u0131n\u0131 dikkatlice okumak ve anlamak da size yol g\u00f6sterecektir. Geli\u015ftirici topluluklar\u0131nda soru sormaktan \u00e7ekinmeyin.<\/dd>\n<dt>Sadece frontend mi, yoksa backend de mi \u00f6\u011frenmeliyim?<\/dt>\n<dd>Ba\u015flang\u0131\u00e7ta bir alana odaklanmak daha verimli olabilir. Frontend, web sayfalar\u0131n\u0131 g\u00f6rsel olarak tasarlamay\u0131 ve kullan\u0131c\u0131 aray\u00fcz\u00fc ile etkile\u015fimi kapsarken; backend, sunucu taraf\u0131 lojikleri ve veritaban\u0131 y\u00f6netimini i\u00e7erir. JavaScript her ikisi i\u00e7in de kullan\u0131labilir (frontend i\u00e7in direkt taray\u0131c\u0131da, backend i\u00e7in Node.js ile). \u0130ki alan\u0131 da \u00f6\u011frenmek istiyorsan\u0131z, \u00f6nce birinde sa\u011flam bir temel olu\u015fturup sonra di\u011ferine ge\u00e7mek daha mant\u0131kl\u0131 olacakt\u0131r.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-31472","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi<\/title>\n<meta name=\"description\" content=\"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi\" \/>\n<meta property=\"og:description\" content=\"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-10T06:01:16+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi\",\"datePublished\":\"2025-10-10T06:01:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\"},\"wordCount\":3879,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\",\"name\":\"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-10T06:01:16+00:00\",\"description\":\"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi","description":"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi","og_description":"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.","og_url":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-10T06:01:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"4 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi","datePublished":"2025-10-10T06:01:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/"},"wordCount":3879,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/","name":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-10T06:01:16+00:00","description":"Web d\u00fcnyas\u0131n\u0131n kalbi olan JavaScript, g\u00fcn\u00fcm\u00fczde sadece taray\u0131c\u0131larda de\u011fil, sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native) ve hatta masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) bile kendine yer bulmu\u015f, dinamik ve vazge\u00e7ilmez bir programlama dilidir. Peki, b\u00f6ylesine geni\u015f bir ekosisteme sahip bu dili 30 g\u00fcn gibi k\u0131sa bir s\u00fcrede \u00f6\u011frenmek m\u00fcmk\u00fcn m\u00fc? Evet, kararl\u0131l\u0131k, do\u011fru kaynaklar ve pratik odakl\u0131 bir yakla\u015f\u0131mla bu s\u00fcre zarf\u0131nda sa\u011flam temeller atabilir, hatta kendi basit projelerinizi geli\u015ftirmeye ba\u015flayabilirsiniz. Bu rehber, s\u0131f\u0131rdan ba\u015flayarak JavaScript'in temelinden ileri d\u00fczey konular\u0131na kadar sizi ad\u0131m ad\u0131m g\u00f6t\u00fcrecek, teorik bilgileri pratik uygulamalarla peki\u015ftirmenizi sa\u011flayacak ve web geli\u015ftirme yolculu\u011funuzda size \u0131\u015f\u0131k tutacakt\u0131r. JavaScript bilginizi h\u0131zla art\u0131rmak ve modern web projelerinde yer almak istiyorsan\u0131z, do\u011fru yerdesiniz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/30-gunde-javascript-ogrenmek-pratik-bir-kodlama-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"30 G\u00fcnde JavaScript \u00d6\u011frenmek: Pratik Bir Kodlama Rehberi"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31472"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31472\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}