JavaScript Başlangıç Rehberi

JavaScript Başlangıç Rehberi​

JavaScript, web sitelerini daha etkileşimli ve dinamik hale getirmek için kullanılan en önemli programlama dillerinden biridir.

HTML sayfanın yapısını oluşturur, CSS görünümünü düzenler, JavaScript ise sayfaya hareket ve etkileşim kazandırır.

JavaScript sayesinde:

• Butonlara işlem verilebilir
• Formlar kontrol edilebilir
• Menü açılıp kapanabilir
• Sayfa içeriği dinamik değiştirilebilir
• API'lerden veri alınabilir
• Kullanıcı işlemleri takip edilebilir
• Web uygulamaları geliştirilebilir

Bu nedenle frontend geliştirme öğrenmek isteyen biri için HTML ve CSS sonrasında JavaScript öğrenmek oldukça önemlidir.

JavaScript Nedir?​

JavaScript, web tarayıcılarında çalışan bir programlama dilidir.

Bir kullanıcı web sitesini açtığında JavaScript tarayıcı üzerinde çalışarak sayfadaki öğelerle etkileşim kurabilir.

Örneğin:

• Bir butona tıklandığında pencere açılması
• Menüye basıldığında seçeneklerin görünmesi
• Form gönderilmeden önce alanların kontrol edilmesi
• Sayfanın yenilenmeden veri yüklemesi

JavaScript ile yapılabilir.

JavaScript Programlama Dili midir?​

Evet.

HTML ve CSS'den farklı olarak JavaScript gerçek bir programlama dilidir.

Bu nedenle JavaScript öğrenirken:

• Değişken
• Koşul
• Döngü
• Fonksiyon
• Nesne
• Dizi

gibi programlama kavramlarını da öğrenirsiniz.

JavaScript ile Java Aynı mı?​

Hayır.

İsimleri benzer olsa da tamamen farklı teknolojilerdir.

JavaScript daha çok:

• Web
• Tarayıcı
• Frontend
• Backend

alanlarında kullanılır.

Java ise farklı çalışma yapısına sahip ayrı bir programlama dilidir.

JavaScript Ne İşe Yarar?​

JavaScript ile birçok farklı işlem yapılabilir.

Örneğin:

• Mobil menü
• Slider
• Modal pencere
• Form kontrolü
• Sayaç
• Bildirim
• Sepet sistemi
• Arama
• Filtreleme
• Dinamik içerik

oluşturulabilir.

JavaScript Sadece Tarayıcıda mı Çalışır?​

Hayır.

JavaScript tarayıcı dışında da çalışabilir.

Özellikle Node.js sayesinde sunucu tarafında JavaScript kullanılabilir.

Bu sayede:

• Backend
• API
• Komut satırı uygulamaları
• Sunucu uygulamaları

geliştirilebilir.

JavaScript Öğrenmeden Önce Ne Bilmek Gerekir?​

Başlangıç için şu konuları bilmek faydalıdır:

• Temel HTML
• Temel CSS
• class ve id
• Formlar
• Sayfa yapısı

İleri seviye CSS bilmek zorunlu değildir.

JavaScript Öğrenmeye Nereden Başlanmalı?​

Yeni başlayan biri şu sırayla ilerleyebilir:

1. Değişkenler
2. Veri türleri
3. Operatörler
4. Koşullar
5. Döngüler
6. Fonksiyonlar
7. Array
8. Object
9. DOM
10. Events
11. Form işlemleri
12. Asenkron işlemler
13. API kullanımı

Bu sıra temel mantığın oturmasına yardımcı olur.

Değişken Nedir?​

Program içerisinde veri tutmak için kullanılan yapıdır.

Örneğin:

• Kullanıcı adı
• Fiyat
• Yaş
• Puan

bir değişkende tutulabilir.

let, const ve var​

JavaScript'te değişken tanımlamak için farklı yöntemler vardır.

Modern JavaScript'te genellikle:

• let
• const

tercih edilir.

var daha eski JavaScript kodlarında sık görülebilir.

const Ne Zaman Kullanılır?​

Değişken referansının tekrar değiştirilmesi gerekmiyorsa const kullanılabilir.

Modern JavaScript projelerinde oldukça yaygın kullanılır.

let Ne Zaman Kullanılır?​

Değeri daha sonra değişecek değişkenlerde kullanılabilir.

Örneğin:

• Sayaç
• Skor
• Durum

gibi değişen verilerde kullanılabilir.

var Kullanılmalı mı?​

Eski projelerde çok sık görülür.

Ancak modern JavaScript öğrenirken öncelikle let ve const mantığını öğrenmek daha faydalıdır.

Veri Türleri​

JavaScript'te temel veri türleri bulunur.

Örneğin:

• String
• Number
• Boolean
• Undefined
• Null
• Object

String Nedir?​

Metin verisidir.

Örneğin:

• Kullanıcı adı
• Şehir
• Ürün adı

string olabilir.

Number Nedir?​

Sayısal değerleri temsil eder.

JavaScript'te tam ve ondalıklı sayılar genel olarak Number türünde kullanılabilir.

Boolean Nedir?​

İki değer alabilir:

• true
• false

Örneğin:

Kullanıcı giriş yaptı mı?

bilgisi Boolean olarak tutulabilir.

Undefined Nedir?​

Bir değişken oluşturulmuş ancak henüz değer verilmemişse undefined olabilir.

Null Nedir?​

Bir değerin bilinçli olarak boş olduğunu ifade etmek için kullanılabilir.

Object Nedir?​

Birden fazla bilgiyi tek yapı altında toplamayı sağlar.

Örneğin bir kullanıcı için:

• İsim
• Yaş
• E-posta

aynı nesne içerisinde tutulabilir.

Array Nedir?​

Birden fazla değeri sıralı şekilde saklamaya yardımcı olur.

Örneğin:

• Ürünler
• Kullanıcılar
• Renkler
• Şehirler

bir array içerisinde tutulabilir.

Array ve Object Farkı​

Basit şekilde:

Array​

Sıralı veri listesi için uygundur.

Object​

Bir varlığın özelliklerini tutmak için uygundur.

Operatör Nedir?​

Veriler üzerinde işlem yapmak için kullanılır.

Örneğin:

• Toplama
• Çıkarma
• Çarpma
• Bölme
• Karşılaştırma

işlemleri yapılabilir.

Karşılaştırma Operatörleri​

İki değerin:

• Eşit
• Büyük
• Küçük
• Farklı

olup olmadığını kontrol etmek için kullanılır.

Eşitlik Kontrolü​

JavaScript'te farklı eşitlik kontrolleri bulunur.

Yeni başlayanların özellikle tür kontrolünü de dikkate alan karşılaştırma yöntemlerini öğrenmesi faydalıdır.

Type Coercion Nedir?​

JavaScript bazı durumlarda veri türlerini otomatik olarak dönüştürebilir.

Bu davranış başlangıçta kafa karıştırabilir.

Örneğin sayı ve metin karşılaştırmalarında beklenmedik sonuçlar oluşabilir.

Bu nedenle veri türlerini anlamak önemlidir.

Koşul Nedir?​

Programın belirli duruma göre farklı işlem yapmasını sağlar.

Örneğin:

Kullanıcı giriş yaptıysa paneli göster.

Giriş yapmadıysa login ekranını göster.

if Mantığı​

Belirli bir şart doğruysa işlem çalıştırılır.

JavaScript öğrenirken en temel konulardan biridir.

else​

Koşul yanlış olduğunda alternatif işlem yapılmasını sağlar.

else if​

Birden fazla şartın sırayla kontrol edilmesine yardımcı olur.

Örneğin kullanıcı:

• Admin
• Moderatör
• Normal üye

olabilir.

switch Nedir?​

Bir değerin birçok farklı olası durumuna göre işlem yapılmasını kolaylaştırabilir.

Bazı durumlarda uzun if yapılarına alternatif olabilir.

Döngü Nedir?​

Aynı işlemi birçok kez tekrar etmek için kullanılır.

Örneğin 100 ürünü tek tek yazmak yerine listedeki tüm ürünler döngüyle işlenebilir.

for Döngüsü​

Belirli sayıda tekrar yapılması gereken işlemlerde yaygın kullanılır.

while Döngüsü​

Bir koşul doğru olduğu sürece çalışmaya devam eder.

Yanlış oluşturulursa sonsuz döngü meydana gelebilir.

for...of​

Array gibi iterable yapılar üzerinde gezinmek için kullanışlıdır.

forEach​

Bir dizideki her öğe için işlem yapılmasını kolaylaştırır.

JavaScript projelerinde oldukça yaygın görülür.

Sonsuz Döngü Nedir?​

Döngünün bitmesini sağlayacak şart hiçbir zaman oluşmazsa program sürekli çalışabilir.

Bu durum:

• Tarayıcıyı kilitleyebilir
• CPU kullanımını yükseltebilir

Bu nedenle döngü koşulları dikkatli hazırlanmalıdır.

Fonksiyon Nedir?​

Belirli bir görevi yapan tekrar kullanılabilir kod yapısıdır.

Örneğin:

• Fiyat hesaplama
• Form kontrolü
• Kullanıcı doğrulama
• Mesaj gösterme

işlemleri fonksiyon haline getirilebilir.

Fonksiyon Kullanmanın Avantajı​

Aynı işlemi tekrar tekrar yazmak yerine bir kez tanımlayıp farklı yerlerde kullanabilirsiniz.

Kod daha:

• Düzenli
• Okunabilir
• Yönetilebilir

hale gelir.

Parametre Nedir?​

Fonksiyona dışarıdan verilen bilgidir.

Örneğin hesaplama fonksiyonuna:

• Fiyat
• İndirim oranı

gönderilebilir.

Return Nedir?​

Fonksiyonun işlem sonucunu geri vermesini sağlar.

Dönen değer başka işlemlerde kullanılabilir.

Arrow Function Nedir?​

Modern JavaScript'te fonksiyon yazmanın daha kısa yöntemlerinden biridir.

Özellikle modern projelerde çok sık görülür.

Başlangıçta klasik fonksiyonlarla birlikte öğrenilmesi faydalıdır.

Scope Nedir?​

Bir değişkene kodun hangi bölümünden erişilebileceğini belirler.

Örneğin:

• Global scope
• Function scope
• Block scope

gibi farklı kapsamlar bulunur.

Block Scope Neden Önemlidir?​

let ve const blok kapsamına sahiptir.

Bu durum değişkenlerin yanlış yerlerde kullanılmasını azaltmaya yardımcı olur.

DOM Nedir?​

DOM:

Document Object Model

anlamına gelir.

JavaScript'in HTML sayfasındaki öğelere erişmesini ve değiştirmesini sağlayan yapıdır.

JavaScript öğrenirken en önemli konulardan biridir.

DOM ile Neler Yapılabilir?​

JavaScript ile:

• Başlık değiştirilebilir
• Metin değiştirilebilir
• Görsel değiştirilebilir
• CSS class eklenebilir
• Buton gizlenebilir
• Yeni HTML öğesi oluşturulabilir

HTML Elementi Seçmek​

DOM üzerinde işlem yapmadan önce ilgili HTML öğesi seçilir.

Örneğin:

• id
• class
• Etiket

üzerinden öğeye erişilebilir.

querySelector Nedir?​

Belirli CSS seçicisine uyan ilk HTML öğesine erişmeyi sağlayan yaygın yöntemlerden biridir.

querySelectorAll Nedir?​

Belirli seçiciye uyan birden fazla HTML öğesini seçmek için kullanılabilir.

getElementById Nedir?​

Belirli id değerine sahip HTML öğesine erişmek için kullanılan klasik yöntemlerden biridir.

textContent Nedir?​

Bir HTML öğesinin metin içeriğini okumak veya değiştirmek için kullanılabilir.

innerHTML Nedir?​

Bir elementin içerisindeki HTML içeriğini değiştirebilir.

Ancak kullanıcıdan gelen kontrolsüz veriler innerHTML ile sayfaya eklenirse güvenlik riski oluşabilir.

JavaScript ile CSS Değiştirmek​

JavaScript üzerinden öğelerin:

• Rengi
• Görünürlüğü
• Boyutu

değiştirilebilir.

Ancak çoğu durumda doğrudan her CSS özelliğini JavaScript ile değiştirmek yerine class ekleyip kaldırmak daha düzenlidir.

Event Nedir?​

Kullanıcının veya tarayıcının gerçekleştirdiği olaydır.

Örneğin:

• Tıklama
• Yazı yazma
• Form gönderme
• Fare hareketi
• Sayfanın yüklenmesi

birer event olabilir.

click Event​

Kullanıcı bir öğeye tıkladığında çalışır.

Buton işlemlerinde en sık kullanılan event'lerden biridir.

submit Event​

Form gönderildiğinde çalışır.

Form doğrulama işlemlerinde oldukça önemlidir.

input Event​

Kullanıcı form alanında veri değiştirdiğinde çalışabilir.

Anlık form kontrolü için kullanılabilir.

change Event​

Form değerinin değişmesini takip etmek için kullanılabilir.

Özellikle:

• Select
• Checkbox
• Radio

alanlarında kullanılabilir.

addEventListener Nedir?​

HTML öğelerine olay dinleyicisi eklemek için kullanılan modern yöntemlerden biridir.

Bir elementte belirli olay gerçekleştiğinde fonksiyon çalıştırılabilir.

Inline Event Kullanmak​

HTML içerisine doğrudan JavaScript davranışı yazmak mümkündür.

Ancak büyük projelerde HTML ile JavaScript'i ayırmak daha düzenli bir yaklaşımdır.

Form Doğrulama​

JavaScript ile kullanıcı formu göndermeden önce:

• Alan boş mu?
• E-posta formatı doğru mu?
• Şifre yeterli mi?

kontrol edilebilir.

JavaScript Doğrulaması Yeterli mi?​

Hayır.

Çok önemli bir noktadır.

Tarayıcı tarafındaki JavaScript kullanıcı tarafından değiştirilebilir veya devre dışı bırakılabilir.

Bu nedenle backend tarafında da mutlaka doğrulama yapılmalıdır.

JavaScript Güvenlik Sistemi Değildir​

Örneğin:

Admin değilse butonu gizle

yapmak kullanıcıyı gerçekten yetkisiz erişimden korumaz.

Yetkilendirme sunucu tarafında yapılmalıdır.

Console Nedir?​

Tarayıcı geliştirici araçlarındaki JavaScript çalışma ve hata görüntüleme alanıdır.

JavaScript öğrenirken en sık kullanacağınız araçlardan biridir.

console.log Ne İşe Yarar?​

Değişkenlerin ve sonuçların console üzerinde görüntülenmesine yardımcı olur.

Özellikle öğrenme ve hata ayıklama sırasında çok faydalıdır.

Developer Tools Kullanmak​

Chrome, Edge veya Firefox içerisindeki Developer Tools ile:

• Console
• Network
• Elements
• Sources

alanları incelenebilir.

JavaScript öğrenen biri için bu araçları kullanmayı öğrenmek çok önemlidir.

JavaScript Hatası Nasıl Anlaşılır?​

Kodda sorun varsa tarayıcı console bölümünde genellikle hata mesajı gösterilir.

Örneğin:

• Syntax error
• Reference error
• Type error

gibi hata türleri görülebilir.

Syntax Error Nedir?​

JavaScript yazım kurallarına uygun olmayan kod olduğunda oluşabilir.

Örneğin eksik parantez veya yanlış yapı buna neden olabilir.

Reference Error Nedir?​

Var olmayan veya erişilemeyen bir değişkene ulaşılmaya çalışıldığında görülebilir.

Type Error Nedir?​

Bir değerin desteklemediği işlemi yapmaya çalıştığınızda oluşabilir.

Örneğin fonksiyon olmayan bir şeyi fonksiyon gibi çalıştırmak buna neden olabilir.

Debugging Nedir?​

Kod içerisindeki hataları bulup düzeltme işlemidir.

Programlama öğrenmenin çok önemli bir parçasıdır.

Breakpoint Nedir?​

JavaScript'in belirli satırda geçici olarak durdurulmasını sağlar.

Bu sayede değişkenlerin o andaki değerleri incelenebilir.

JavaScript'te String İşlemleri​

Metinlerle birçok işlem yapılabilir.

Örneğin:

• Birleştirme
• Parçalama
• Arama
• Büyük/küçük harfe dönüştürme

Template Literal Nedir?​

Metin içerisinde değişkenleri daha rahat kullanmaya yardımcı olan modern JavaScript özelliğidir.

Özellikle dinamik metin oluştururken kullanışlıdır.

Array Metotları​

JavaScript array'lerinde çok sayıda faydalı işlem bulunur.

Örneğin:

• Eleman ekleme
• Eleman silme
• Filtreleme
• Dönüştürme
• Arama

map Nedir?​

Bir array içerisindeki her elemanı işleyerek yeni bir array oluşturmak için kullanılabilir.

Modern JavaScript'te sık kullanılır.

filter Nedir?​

Belirli koşulu sağlayan array elemanlarından yeni bir liste oluşturur.

Örneğin sadece:

Fiyatı 1000 TL'den düşük ürünler

filtrelenebilir.

find Nedir?​

Belirli koşula uyan ilk elemanı bulmaya yardımcı olur.

reduce Nedir?​

Bir listedeki değerleri tek bir sonuca dönüştürmek için kullanılabilir.

Örneğin alışveriş sepetinin toplam tutarı hesaplanabilir.

Başlangıç seviyesinden biraz daha ileri bir konudur.

Object Kullanımı​

Object sayesinde ilişkili veriler tek yapı altında tutulabilir.

Örneğin ürün nesnesinde:

• Ad
• Fiyat
• Stok
• Kategori

bulunabilir.

Object İçindeki Fonksiyon​

Bir object kendi davranışlarını da barındırabilir.

Bu tür fonksiyonlara method denebilir.

JSON Nedir?​

JavaScript Object Notation anlamına gelir.

Web uygulamalarında veri alışverişinde çok yaygın kullanılan formattır.

Örneğin API bir ürün listesini JSON formatında gönderebilir.

JSON ve JavaScript Object Aynı mı?​

Benzer görünürler ancak aynı şey değildir.

JSON bir veri formatıdır.

JavaScript object ise JavaScript içerisindeki veri yapısıdır.

API Nedir?​

Bir uygulamanın başka bir uygulama veya servisle iletişim kurmasını sağlar.

Örneğin JavaScript:

• Hava durumu
• Döviz
• Ürün
• Kullanıcı

verisini API üzerinden alabilir.

fetch Nedir?​

Tarayıcı üzerinden HTTP istekleri yapmak için kullanılan modern JavaScript yöntemlerinden biridir.

API kullanırken sık karşılaşılır.

Asenkron Programlama Nedir?​

Bazı işlemlerin sonucu hemen gelmez.

Örneğin sunucudan veri almak zaman alabilir.

JavaScript işlemi beklerken tüm sayfayı durdurmak yerine diğer işleri yapmaya devam edebilir.

Bu mantığa asenkron çalışma denir.

Promise Nedir?​

Gelecekte tamamlanacak bir işlemin sonucunu temsil eden yapıdır.

API isteklerinde sık kullanılır.

async ve await​

Promise tabanlı asenkron işlemleri daha okunabilir şekilde yönetmeye yardımcı olur.

Modern JavaScript öğrenirken önemli konulardan biridir.

Asenkron Konulara Ne Zaman Geçilmeli?​

İlk gün öğrenmeye gerek yoktur.

Önce:

• Değişkenler
• Fonksiyonlar
• Array
• Object
• DOM
• Events

rahat şekilde kullanılmalıdır.

Local Storage Nedir?​

Tarayıcıda belirli verilerin saklanmasını sağlar.

Örneğin:

• Tema tercihi
• Basit uygulama ayarları
• Sepet benzeri geçici veriler

saklanabilir.

Local Storage Güvenli Veri Saklama Yeri mi?​

Hayır.

Şunlar local storage içerisinde tutulmamalıdır:

• Parola
• Hassas kişisel bilgi
• Kritik secret bilgileri

Tarayıcı tarafındaki verilere kullanıcı erişebilir.

Session Storage Nedir?​

Local Storage'a benzer ancak veri genellikle ilgili sekme oturumu boyunca tutulur.

Cookie Nedir?​

Tarayıcı tarafından saklanan küçük verilerdir.

Oturum ve kullanıcı tercihleri gibi işlemlerde kullanılabilir.

Cookie güvenliği kullanım senaryosuna göre dikkatli yapılandırılmalıdır.

JavaScript Module Nedir?​

Kodun farklı dosyalara ve parçalara ayrılmasını kolaylaştırır.

Proje büyüdükçe her şeyi tek dosyada tutmak yerine modüler yapı kullanılabilir.

import ve export Mantığı​

Bir dosyadaki:

• Fonksiyon
• Değişken
• Class

başka JavaScript dosyalarında kullanılabilir.

Class Nedir?​

JavaScript nesne yönelimli programlama için class yapısını destekler.

Benzer nesnelerin ortak özellik ve davranışlarını tanımlamak için kullanılabilir.

OOP Ne Zaman Öğrenilmeli?​

JavaScript'in temel konuları öğrenildikten sonra geçilebilir.

İlk aşamada class öğrenmek zorunlu değildir.

this Nedir?​

JavaScript'te çalışılan bağlama göre farklı anlamlara gelebilen özel bir kavramdır.

Yeni başlayanları en çok zorlayan konulardan biridir.

Temel konular oturduktan sonra ayrıntılı öğrenmek daha mantıklıdır.

Destructuring Nedir?​

Array veya object içerisindeki değerleri daha rahat şekilde değişkenlere ayırmaya yardımcı olan modern JavaScript özelliğidir.

Spread Operator Mantığı​

Array ve object verilerini kopyalamak, birleştirmek veya genişletmek için kullanılabilir.

Modern JavaScript projelerinde sık görülür.

Optional Chaining Nedir?​

İç içe object özelliklerine erişirken olmayan değerler nedeniyle hata oluşmasını azaltmaya yardımcı olur.

Modern JavaScript'te kullanışlı özelliklerden biridir.

npm Nedir?​

JavaScript ve Node.js dünyasında paket yönetimi için yaygın kullanılan araçlardan biridir.

Hazır kütüphanelerin projeye eklenmesini kolaylaştırır.

npm'i Ne Zaman Öğrenmeliyim?​

Temel JavaScript'i öğrendikten sonra.

İlk gün npm paketleriyle uğraşmak gereksiz kafa karışıklığı oluşturabilir.

Node.js Nedir?​

JavaScript'in tarayıcı dışında çalışmasını sağlayan çalışma ortamlarından biridir.

Node.js sayesinde JavaScript ile:

• Backend
• API
• CLI uygulaması
• Otomasyon

geliştirilebilir.

Frontend İçin Node.js Bilmek Gerekir mi?​

Temel JavaScript öğrenirken hayır.

Ancak modern frontend araçları:

• Paket yönetimi
• Build işlemleri
• Framework'ler

için Node.js kullanabilir.

JavaScript Framework Nedir?​

JavaScript geliştirmeyi kolaylaştıran yapılardır.

Örneğin:

• React
• Vue
• Angular

gibi teknolojiler bulunur.

React'e Ne Zaman Geçilmeli?​

Önce temel JavaScript öğrenilmelidir.

Özellikle:

• Fonksiyonlar
• Array metotları
• Object
• DOM mantığı
• Events
• Async işlemler

iyi anlaşılmalıdır.

Direkt React Öğrenmek Doğru mu?​

Mümkün olabilir ancak JavaScript temeli zayıfsa React içindeki problemleri anlamak zorlaşır.

Bu nedenle önce saf JavaScript ile küçük projeler yapmak daha sağlıklıdır.

JavaScript Framework Öğrenmek Şart mı?​

Hayır.

Basit web siteleri ve birçok etkileşim saf JavaScript ile yapılabilir.

Framework ihtiyacı proje büyüdüğünde ortaya çıkar.

JavaScript ile Neler Yapılabilir?​

JavaScript sadece basit web efektleri için kullanılmaz.

Şunlar geliştirilebilir:

• Web uygulamaları
• Yönetim panelleri
• E-ticaret arayüzleri
• Mobil uygulamalar
• Masaüstü uygulamaları
• Backend servisleri
• Tarayıcı oyunları

JavaScript ile Oyun Yapılır mı?​

Evet.

Özellikle tarayıcı üzerinde çalışan:

• 2D oyunlar
• Basit 3D oyunlar

geliştirilebilir.

Bunun için farklı oyun kütüphaneleri ve grafik teknolojileri kullanılabilir.

JavaScript ile Mobil Uygulama​

React Native gibi teknolojilerle JavaScript bilgisi mobil uygulama geliştirmede de kullanılabilir.

TypeScript Nedir?​

JavaScript üzerine tip sistemi ekleyen bir teknolojidir.

Özellikle büyük projelerde hataları geliştirme aşamasında daha erken yakalamaya yardımcı olabilir.

TypeScript'e Ne Zaman Geçilmeli?​

Önce JavaScript iyi öğrenilmelidir.

JavaScript temeli olmadan TypeScript öğrenmek gereksiz şekilde zorlaşabilir.

jQuery Nedir?​

JavaScript işlemlerini geçmişte oldukça kolaylaştıran popüler bir kütüphanedir.

Özellikle eski web projelerinde ve bazı WordPress sistemlerinde hâlâ görülebilir.

Önce jQuery mi JavaScript mi?​

Kesinlikle JavaScript.

JavaScript temeli öğrenildikten sonra mevcut projeler nedeniyle gerekiyorsa jQuery öğrenilebilir.

WordPress ve JavaScript​

WordPress sistemlerinde JavaScript:

• Tema
• Eklenti
• Gutenberg
• Yönetim paneli
• Frontend etkileşimleri

için kullanılabilir.

WordPress geliştiricisi olmak isteyenler için PHP yanında JavaScript bilgisi de oldukça faydalıdır.

WooCommerce ve JavaScript​

WooCommerce tarafında:

• Sepet
• Checkout
• Ürün seçenekleri
• AJAX işlemleri

gibi birçok alanda JavaScript kullanılabilir.

JavaScript ve AJAX​

AJAX, sayfanın tamamını yenilemeden sunucuyla veri alışverişi yapılmasını ifade eden genel yaklaşımdır.

Modern JavaScript'te fetch gibi yöntemlerle gerçekleştirilebilir.

Sayfa Yenilenmeden İşlem​

Örneğin:

• Sepete ürün ekleme
• Yorum yükleme
• Bildirim gösterme

sayfa tamamen yenilenmeden yapılabilir.

Bu modern web uygulamalarının temel özelliklerinden biridir.

JavaScript Performansı​

Kötü hazırlanmış JavaScript:

• Sayfayı yavaşlatabilir
• Tarayıcıyı kilitleyebilir
• Fazla RAM tüketebilir

Bu nedenle gereksiz işlemlerden kaçınılmalıdır.

DOM'u Çok Fazla Güncellemek​

Çok sık DOM değişikliği yapmak performansı etkileyebilir.

Özellikle yüzlerce veya binlerce öğe üzerinde işlem yapılırken dikkat edilmelidir.

Büyük JavaScript Dosyaları​

Gereksiz büyük kütüphaneler ve kodlar sayfanın yükleme süresini artırabilir.

Production ortamında:

• Gereksiz kodları kaldırmak
• Dosyaları optimize etmek
• İhtiyaç halinde lazy loading

kullanmak faydalı olabilir.

Minify Nedir?​

JavaScript dosyasındaki gereksiz:

• Boşluk
• Satır
• Açıklama

gibi bölümlerin azaltılarak dosya boyutunun küçültülmesidir.

Defer ve Async Mantığı​

JavaScript dosyalarının HTML sayfasının yüklenmesini gereksiz yere engellememesi için farklı yükleme yöntemleri kullanılabilir.

Bu konu temel JavaScript öğrenildikten sonra web performansında incelenebilir.

JavaScript Güvenliği​

JavaScript kodu kullanıcıya gönderildiği için gizli bilgiler burada saklanmamalıdır.

Örneğin:

• Veritabanı parolası
• Private API key
• Sunucu parolası

frontend JavaScript içerisine yazılmamalıdır.

Frontend Kod Gizli Değildir​

JavaScript dosyaları küçültülmüş veya karıştırılmış olsa bile kullanıcı tarafından incelenebilir.

Bu nedenle kritik güvenlik işlemleri backend tarafında yapılmalıdır.

XSS Nedir?​

Web sayfasına kötü amaçlı JavaScript yerleştirilmesine çalışılan saldırı türlerinden biridir.

Özellikle kullanıcıdan gelen içerik kontrol edilmeden sayfaya eklenirse risk oluşabilir.

Kullanıcı Verisine Güvenmeyin​

Form veya API üzerinden gelen veriler uygun şekilde doğrulanmalıdır.

Hem frontend hem backend tarafında güvenlik kontrolleri yapılmalıdır.

Same-Origin Policy Nedir?​

Tarayıcıların farklı origin'ler arasındaki erişimi güvenlik nedeniyle sınırlandıran mekanizmalardan biridir.

Web güvenliğinde önemli bir kavramdır.

CORS Nedir?​

Farklı origin'ler arasındaki web isteklerine hangi durumlarda izin verileceğini belirlemeye yardımcı olan mekanizmadır.

API geliştirmeye başladığınızda sık karşılaşabilirsiniz.

JavaScript Öğrenirken İlk Proje​

Basit bir sayaç yapılabilir.

Kullanıcı:

• Artır
• Azalt
• Sıfırla

işlemleri yapabilir.

Burada:

• Değişken
• Fonksiyon
• Event
• DOM

birlikte öğrenilir.

İkinci Proje: Açılır Menü​

Bir butona basıldığında menünün:

• Açılması
• Kapanması

sağlanabilir.

Bu proje DOM ve event konularını öğretir.

Üçüncü Proje: Basit Hesap Makinesi​

Burada:

• Değişkenler
• Fonksiyonlar
• Operatörler
• DOM

pratiği yapılabilir.

Dördüncü Proje: Yapılacaklar Listesi​

Kullanıcı:

• Görev ekler
• Tamamlandı olarak işaretler
• Siler

Bu proje JavaScript öğrenmek için oldukça faydalıdır.

Beşinci Proje: Form Doğrulama​

Basit üyelik formunda:

• E-posta
• Parola
• Parola tekrarı

kontrol edilebilir.

Altıncı Proje: Ürün Filtreleme​

Ürünleri:

• Fiyat
• Kategori
• Arama

değerine göre filtreleyen basit uygulama yapılabilir.

Burada array metotları öğrenilir.

Yedinci Proje: API'den Veri Çekmek​

Temel konular oturduktan sonra ücretsiz bir test API'sinden veri alınarak ekrana listeleme yapılabilir.

Bu aşamada:

• fetch
• Promise
• async/await
• JSON

konuları öğrenilir.

Sekizinci Proje: Basit Sepet Sistemi​

Ürün:

• Sepete eklenebilir
• Çıkarılabilir
• Adedi değiştirilebilir
• Toplam hesaplanabilir

Bu proje birçok temel JavaScript konusunu bir araya getirir.

JavaScript Öğrenme Sırası​

1. Aşama​

Değişkenler ve veri türleri.

2. Aşama​

Operatörler ve karşılaştırmalar.

3. Aşama​

Koşullar.

4. Aşama​

Döngüler.

5. Aşama​

Fonksiyonlar.

6. Aşama​

Array ve Object.

7. Aşama​

DOM.

8. Aşama​

Events.

9. Aşama​

Formlar.

10. Aşama​

Array metotları.

11. Aşama​

Local Storage.

12. Aşama​

JSON.

13. Aşama​

API.

14. Aşama​

Promise ve async/await.

15. Aşama​

Modules.

16. Aşama​

Daha büyük projeler.

JavaScript Öğrenirken Yapılan Yaygın Hatalar​

HTML ve CSS Bilmeden Başlamak​

DOM ve sayfa yapısını anlamayı zorlaştırabilir.

Her Şeyi Ezberlemeye Çalışmak​

JavaScript çok büyük bir dildir.

Ezber yerine mantık öğrenilmelidir.

Sadece Video İzlemek​

Programlama yaparak öğrenilir.

Sürekli Hazır Kod Kopyalamak​

Sorun çözme yeteneğinin gelişmesini engelleyebilir.

Çok Erken Framework'e Geçmek​

Temel JavaScript eksik kalabilir.

Hata Mesajlarını Okumamak​

Console hataları çoğu zaman problemin nerede olduğunu açıklar.

Büyük Projeyle Başlamak​

İlk proje olarak sosyal medya veya büyük e-ticaret sistemi yapmak gereksiz zordur.

JavaScript'te Problem Çözme​

Kodlamaya başlamadan önce problemi küçük parçalara bölmek faydalıdır.

Örneğin yapılacaklar listesinde:

1. Kullanıcıdan görev al
2. Listeye ekle
3. Ekranda göster
4. Silme işlemi ekle
5. Tamamlama işlemi ekle

şeklinde ilerlenebilir.

Pseudocode Nedir?​

Kod yazmadan önce yapılacak işlemleri normal dilde sıralamaktır.

Programlama mantığını geliştirmek için oldukça faydalıdır.

JavaScript Algoritma Öğrenmek İçin Uygun mu?​

Evet.

Temel algoritmaları JavaScript ile çalışabilirsiniz.

Örneğin:

• Sayı karşılaştırma
• Liste sıralama
• Arama
• Toplam hesaplama

gibi çalışmalar yapılabilir.

Algoritma Bilmeden JavaScript Öğrenilir mi?​

Başlangıçta öğrenilebilir.

Ancak ilerledikçe algoritmik düşünme becerisi geliştirilmelidir.

JavaScript Kodunu Ezberlemek Gerekir mi?​

Hayır.

Önemli olan:

• Ne yapmak istediğinizi
• Hangi araçları kullanabileceğinizi
• Dokümantasyondan nasıl bilgi bulacağınızı

bilmektir.

Dokümantasyon Kullanmak​

JavaScript geliştirirken sürekli dokümantasyon kontrol etmek normaldir.

Her:

• Method
• Parametre
• Web API

ezberlenmez.

MDN Nedir?​

Web teknolojileri hakkında en çok kullanılan referans kaynaklardan biridir.

HTML, CSS ve JavaScript özelliklerini öğrenirken oldukça faydalıdır.

JavaScript Öğrenirken İngilizce Önemli mi?​

Yardımcı olur.

Programlama terimlerinin büyük bölümü İngilizcedir.

Örneğin:

• Function
• Array
• Object
• Event
• Promise

gibi kelimeleri zamanla doğal şekilde öğrenirsiniz.

İleri seviye İngilizce bilmek başlangıç için şart değildir.

Her Gün Ne Kadar JavaScript Çalışılmalı?​

Düzenli çalışma önemlidir.

Başlangıçta günlük:

45 dakika – 1,5 saat

iyi bir çalışma süresi olabilir.

Ancak bu sürenin tamamı video izleyerek geçirilmemelidir.

İdeal Çalışma Düzeni​

Örneğin:

• 20 dakika konu öğrenme
• 30 dakika uygulama
• 20 dakika bakmadan tekrar
• 10 dakika hata çözme

şeklinde çalışılabilir.

Bir Konuyu Ne Zaman Öğrenmiş Sayılırım?​

Videodaki örneği takip ederek yaptığınızda değil, benzer uygulamayı kendiniz oluşturabildiğinizde öğrenmiş sayılabilirsiniz.

30 Günlük JavaScript Başlangıç Planı​

1. Hafta​

• Değişkenler
• Veri türleri
• Operatörler
• Koşullar

2. Hafta​

• Döngüler
• Fonksiyonlar
• Array
• Object

3. Hafta​

• DOM
• Events
• Formlar
• Local Storage

4. Hafta​

• JSON
• API
• fetch
• Promise
• async/await

Ay sonunda küçük bir proje yapılabilir.

İlk Ay Sonunda Ne Yapabilmeliyim?​

Temel seviyede:

• Buton olayları
• Form kontrolü
• DOM değiştirme
• Liste işlemleri
• Basit API kullanımı

yapabiliyor olmak iyi bir seviyedir.

JavaScript Başlangıç Kontrol Listesi​

• Değişken nedir biliyor muyum?
• let ve const farkını biliyor muyum?
• Veri türlerini tanıyor muyum?
• Koşul yazabiliyor muyum?
• Döngü mantığını biliyor muyum?
• Fonksiyon oluşturabiliyor muyum?
• Array kullanabiliyor muyum?
• Object kullanabiliyor muyum?
• DOM nedir biliyor muyum?
• HTML öğesi seçebiliyor muyum?
• Event kullanabiliyor muyum?
• Form verisini okuyabiliyor muyum?
• Array metotlarını kullanabiliyor muyum?
• Local Storage mantığını biliyor muyum?
• JSON okuyabiliyor muyum?
• API'den veri almanın mantığını biliyor muyum?
• async/await hakkında temel bilgim var mı?
• Console hatalarını okuyabiliyor muyum?

JavaScript Sonrasında Ne Öğrenilmeli?​

Temel JavaScript tamamlandıktan sonra hedefe göre farklı yollar izlenebilir.

Frontend İçin​

• İleri CSS
• Git
• npm
• TypeScript
• React, Vue veya başka framework

Backend İçin​

• Node.js
• Veritabanı
• API
• Authentication
• Güvenlik

WordPress İçin​

• PHP
• WordPress geliştirme
• JavaScript
• REST API

birlikte öğrenilebilir.

Full Stack Olmak İçin​

Basit bir yol haritası:

1. HTML
2. CSS
3. JavaScript
4. Git
5. Frontend framework
6. Backend
7. Veritabanı
8. API
9. Deployment
10. Linux

şeklinde olabilir.

JavaScript Öğrenirken En Önemli Konular​

Başlangıçta özellikle şu konuları sağlam öğrenin:

• Değişken
• Koşul
• Döngü
• Fonksiyon
• Array
• Object
• DOM
• Event
• Asenkron çalışma

Bunlar öğrenildiğinde daha ileri konular çok daha anlaşılır hale gelir.

JavaScript'te En Büyük Hata​

Yeni başlayanların en sık yaptığı hatalardan biri:

Videoyu izlediğimde anlıyorum, demek ki öğrendim

diye düşünmektir.

Gerçek öğrenme, boş bir dosya açıp hiçbir örneğe bakmadan uygulama geliştirmeye çalıştığınızda başlar.

Sonuç​

JavaScript, modern web geliştirmenin temel teknolojilerinden biridir.

HTML ve CSS sayesinde web sayfasının:

• Yapısı
• Tasarımı

oluşturulurken JavaScript sayesinde sayfa:

• Etkileşimli
• Dinamik
• Kullanıcıya tepki veren

bir yapıya dönüşür.

JavaScript öğrenmeye başlarken öncelikle:

• Değişkenler
• Veri türleri
• Koşullar
• Döngüler
• Fonksiyonlar
• Array
• Object

öğrenilmelidir.

Daha sonra:

• DOM
• Events
• Form işlemleri
• Local Storage
• JSON
• API
• Promise
• async/await

konularına geçilebilir.

Temel JavaScript öğrenilmeden doğrudan React, Vue veya başka framework'lere geçmek mümkün olsa da uzun vadede eksik temel sorun oluşturabilir.

En iyi öğrenme yöntemi her konunun ardından küçük uygulamalar yapmaktır.

Örneğin:

Sayaç → Menü → Hesap Makinesi → Yapılacaklar Listesi → Form → API Uygulaması → Sepet Sistemi

şeklinde ilerlemek oldukça etkili olur.

Kısacası JavaScript öğrenirken amaç bütün komutları ezberlemek değil, programlama mantığını anlamak, problemi küçük parçalara ayırabilmek ve öğrendiğiniz her konuyu gerçek bir uygulamada kullanabilmektir.