JavaScript Eğitimi #1: Giriş ve Ortam Kurulumu

Programlama öğrenmek istiyorsunuz ama nereden başlayacağınızı bilmiyorsunuz. Belki daha önce deneyip vazgeçtiniz, belki de hiç kod yazmadınız. Endişelenmeyin, bu eğitim serisi tam olarak sizin için hazırlandı. Sıfırdan başlayacak, adım adım ilerleyecek ve serinin sonunda kendi projelerinizi geliştirebilecek seviyeye geleceksiniz.

JavaScript, bugün dünyada en çok kullanılan programlama dillerinden biri. Web sitelerinden mobil uygulamalara, sunucu tarafı yazılımlardan yapay zeka uygulamalarına kadar her yerde karşınıza çıkıyor. Stack Overflow'un 2024 anketine göre, JavaScript üst üste 11 yıldır en popüler programlama dili konumunda. Bu kadar yaygın kullanılmasının iyi bir sebebi var: öğrenmesi nispeten kolay, kullanım alanı geniş ve iş fırsatları bol.

İçindekiler

• JavaScript Nedir?
• Neden JavaScript Öğrenmeliyim?
• JavaScript Nerelerde Kullanılır?
• Geliştirme Ortamını Hazırlama
• VS Code Kurulumu ve Ayarları
• İlk JavaScript Kodumuz
• Tarayıcı Developer Tools Kullanımı
• Console Metodları
• Node.js ile Çalıştırma
• Sık Sorulan Sorular
• Sonuç

JavaScript Nedir?

JavaScript, 1995 yılında Brendan Eich tarafından sadece 10 günde geliştirilen bir programlama dili. Başlangıçta web sayfalarına etkileşim kazandırmak için tasarlandı. Bir butona tıklandığında bir şeyler olması, formların kontrol edilmesi, animasyonlar gibi işler JavaScript sayesinde mümkün oldu.

Bugün JavaScript çok daha fazlasını yapabiliyor. Sadece tarayıcılarda değil, sunucularda, mobil cihazlarda, hatta akıllı saatlerde bile çalışabiliyor. Bu esneklik, JavaScript'i her yerde karşılaşacağınız bir dil haline getirdi.

Bir örnek üzerinden düşünelim. Bir web sitesine girdiğinizde:

• Sayfa ilk yüklendiğinde gördüğünüz yapı HTML ile oluşturulur
• Renkleri, fontları, düzeni belirleyen CSS ile şekillendirilir
• Butona tıkladığınızda, form gönderdiğinizde, sayfa kaydırıldığında olan her şey JavaScript ile gerçekleşir

Yani JavaScript, web sayfalarının "beyni" gibi düşünülebilir. Statik bir sayfayı dinamik ve etkileşimli hale getirir.

Neden JavaScript Öğrenmeliyim?

Programlama öğrenmek istiyorsanız, JavaScript başlamak için mükemmel bir seçim. İşte nedenleri:

Hemen sonuç görürsünüz. Yazdığınız kodu tarayıcınızda anında çalıştırabilirsiniz. Kurulum gerektirmez, karmaşık ortamlar hazırlamanıza gerek yoktur. Bir metin editörü ve tarayıcı yeterli.

Görsel geri bildirim alırsınız. Yazdığınız kod ekranda bir değişiklik yapar. Bu, öğrenme sürecini çok daha tatmin edici kılar. Soyut kavramlar somut sonuçlara dönüşür.

İş piyasasında talep yüksek. LinkedIn verilerine göre, JavaScript bilen geliştiriciler en çok aranan profiller arasında. Frontend, backend, mobil veya full-stack hangi alanda çalışmak isterseniz isteyin, JavaScript bilgisi işinize yarar.

Tek dil, çok platform. JavaScript öğrendiğinizde sadece web siteleri yapmakla sınırlı kalmazsınız. React Native ile mobil uygulamalar, Electron ile masaüstü uygulamalar, Node.js ile sunucu tarafı yazılımlar geliştirebilirsiniz.

Topluluk desteği büyük. Takıldığınızda yardım bulmanız kolay. Stack Overflow'da milyonlarca soru-cevap var. YouTube'da sayısız ücretsiz eğitim mevcut. Herhangi bir problem yaşadığınızda muhtemelen daha önce biri aynı sorunu yaşamış ve çözümünü paylaşmıştır.

JavaScript Nerelerde Kullanılır?

JavaScript'in kullanım alanları yıllar içinde inanılmaz genişledi. İşte başlıca alanlar:

Frontend (Kullanıcı Arayüzü)

Web sitelerinin kullanıcıyla etkileşime girdiği tüm kısımlar JavaScript ile yazılır. Butonlar, formlar, animasyonlar, açılır menüler, sonsuz kaydırma gibi özellikler hep JavaScript sayesinde çalışır.

Modern frontend frameworkleri de JavaScript tabanlıdır:

• React - Facebook tarafından geliştirilen, en popüler frontend kütüphanesi
• Vue.js - Öğrenmesi kolay, esnek bir framework
• Angular - Google tarafından desteklenen, kurumsal projelerde tercih edilen framework

Backend (Sunucu Tarafı)

Node.js sayesinde JavaScript artık sunucularda da çalışabiliyor. Veritabanı işlemleri, API geliştirme, dosya işlemleri gibi sunucu tarafı görevleri JavaScript ile yapılabiliyor.

Netflix, PayPal, Uber gibi devler backend'lerinde Node.js kullanıyor. Bu şirketler performans ve geliştirme hızı açısından JavaScript'i tercih ediyor.

Mobil Uygulama Geliştirme

React Native ve Ionic gibi frameworkler sayesinde JavaScript ile iOS ve Android uygulamaları geliştirebilirsiniz. Tek bir kod tabanıyla her iki platforma da uygulama çıkarmak mümkün.

Instagram, Facebook, Skype gibi uygulamalar React Native ile geliştirilmiş bölümler içeriyor.

Masaüstü Uygulamalar

Electron framework'ü ile JavaScript kullanarak masaüstü uygulamalar geliştirebilirsiniz. Visual Studio Code, Slack, Discord gibi popüler uygulamalar Electron ile yazılmış.

Oyun Geliştirme

Basit tarayıcı oyunlarından daha karmaşık 2D oyunlara kadar JavaScript ile oyun geliştirebilirsiniz. Phaser.js gibi oyun motorları bu işi kolaylaştırıyor.

Geliştirme Ortamını Hazırlama

Kod yazmaya başlamak için bazı araçlara ihtiyacınız var. Endişelenmeyin, hepsi ücretsiz ve kurulumu kolay.

İhtiyacınız olan iki şey:

1. Kod editörü - Kod yazmak için kullanacağınız program
2. Web tarayıcısı - Yazdığınız kodu çalıştırmak ve test etmek için

Tarayıcı olarak Chrome, Firefox veya Edge kullanabilirsiniz. Muhtemelen zaten birini kullanıyorsunuzdur. Kod editörü olarak ise Visual Studio Code (VS Code) öneriyorum.

VS Code Kurulumu ve Ayarları

Visual Studio Code, Microsoft tarafından geliştirilen ücretsiz ve açık kaynaklı bir kod editörü. Hafif, hızlı ve güçlü özelliklere sahip. Dünyadaki geliştiricilerin büyük çoğunluğu VS Code kullanıyor.

Kurulum Adımları

1. code.visualstudio.com adresine gidin
2. İşletim sisteminize uygun versiyonu indirin (Windows, macOS veya Linux)
3. İndirilen dosyayı çalıştırın ve kurulum sihirbazını takip edin
4. Kurulum tamamlandığında VS Code'u açın

Önerilen Eklentiler

VS Code'un gücü eklentilerden gelir. JavaScript geliştirme için şu eklentileri kurmanızı öneririm:

Live Server - HTML dosyalarınızı otomatik yenileyen bir yerel sunucu başlatır. Kod değişikliklerinizi anında tarayıcıda görürsünüz.

Kurulum için:

1. VS Code'un sol tarafındaki eklentiler simgesine tıklayın (veya Ctrl+Shift+X)
2. Arama kutusuna "Live Server" yazın
3. Ritwick Dey tarafından geliştirilen eklentiyi bulun
4. "Install" butonuna tıklayın

Prettier - Kodunuzu otomatik olarak düzenler ve formatlar. Tutarlı bir kod stili sağlar.

ESLint - Kod hatalarını ve potansiyel sorunları tespit eder. Daha iyi kod yazmanıza yardımcı olur.

Temel Ayarlar

VS Code'u daha verimli kullanmak için bazı ayarları yapılandırabilirsiniz:

1. File > Preferences > Settings yolunu izleyin (veya Ctrl+,)
2. Arama kutusuna ilgili ayarı yazarak değiştirebilirsiniz

Önerilen ayarlar:

• Auto Save: "afterDelay" - Dosyaları otomatik kaydeder
• Tab Size: 2 - Sekme genişliğini 2 boşluk yapar
• Word Wrap: "on" - Uzun satırları kaydırır

İlk JavaScript Kodumuz

Artık kod yazmaya hazırsınız. İlk projemizi oluşturalım.

Proje Klasörü Oluşturma

1. Bilgisayarınızda "javascript-egitim" adında bir klasör oluşturun
2. VS Code'u açın
3. File > Open Folder ile oluşturduğunuz klasörü seçin

HTML Dosyası Oluşturma

Sol panelde sağ tıklayıp "New File" seçin ve index.html adını verin. İçine şu kodu yazın:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Eğitimi</title>
</head>
<body>
    <h1>JavaScript'e Hoş Geldiniz!</h1>

    <script>
        // JavaScript kodumuz buraya gelecek
        console.log("Merhaba Dünya!");
    </script>
</body>
</html>

Bu kodda birkaç önemli nokta var:

• <script> etiketi içine JavaScript kodlarımızı yazıyoruz
• // ile başlayan satırlar yorum satırı, tarayıcı bunları çalıştırmaz
• console.log() bir mesajı konsola yazdırır

Kodu Çalıştırma

Live Server eklentisini kurduysanız:

1. HTML dosyasına sağ tıklayın
2. "Open with Live Server" seçin
3. Tarayıcınız otomatik açılacak

Veya HTML dosyasını doğrudan tarayıcınızla açabilirsiniz (dosyaya çift tıklayarak).

Şimdi konsol çıktısını görelim. Tarayıcıda F12 tuşuna basın veya sağ tıklayıp "İncele" (Inspect) seçin. Açılan panelde "Console" sekmesine geçin. "Merhaba Dünya!" yazısını görmelisiniz.

Harici JavaScript Dosyası

JavaScript kodunu ayrı bir dosyada tutmak daha düzenli bir yöntemdir. Bunu yapalım:

1. Aynı klasörde script.js adında yeni bir dosya oluşturun
2. İçine şu kodu yazın:

// script.js dosyası
console.log("Bu mesaj harici dosyadan geliyor!");

// Basit bir hesaplama yapalım
let sayi1 = 10;
let sayi2 = 5;
let toplam = sayi1 + sayi2;

console.log("Toplam:", toplam);

1. HTML dosyasını güncelleyin:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Eğitimi</title>
</head>
<body>
    <h1>JavaScript'e Hoş Geldiniz!</h1>

    <!-- Harici JavaScript dosyası -->
    <script src="script.js"></script>
</body>
</html>

<script src="script.js"> satırı, script.js dosyasındaki kodları sayfaya dahil eder. Sayfayı yenilediğinizde konsolda iki mesaj görmelisiniz.

Tarayıcı Developer Tools Kullanımı

Developer Tools (Geliştirici Araçları), her modern tarayıcıda bulunan ve web geliştiricilerin en çok kullandığı araçtır. JavaScript öğrenirken bu araçları sıkça kullanacaksınız.

Açma Yöntemleri

• F12 tuşuna basın
• Ctrl+Shift+I (Windows/Linux) veya Cmd+Option+I (Mac)
• Sayfaya sağ tıklayıp İncele (Inspect) seçin

Console Sekmesi

Console sekmesi JavaScript ile çalışırken en çok kullanacağınız yer. Burada:

• console.log() çıktılarını görürsünüz
• Hata mesajları burada görünür
• Doğrudan JavaScript kodu yazıp çalıştırabilirsiniz

Console'a şunları yazıp Enter'a basarak deneyin:

2 + 2

Sonuç olarak 4 göreceksiniz. Console, hızlı denemeler için mükemmel bir araçtır.

Birkaç deneme daha yapın:

"Merhaba" + " " + "Dünya"

10 * 5

alert("Bu bir uyarı mesajı!")

alert() fonksiyonu bir pop-up pencere açar. Bunu sık kullanmayız ama öğrenme aşamasında eğlenceli olabilir.

Elements Sekmesi

HTML yapısını görüntüler ve düzenlemenize olanak tanır. Herhangi bir elemana tıklayarak özelliklerini inceleyebilirsiniz.

Network Sekmesi

Sayfa yüklenirken yapılan tüm istekleri gösterir. Dosyaların ne kadar sürede yüklendiğini görebilirsiniz.

Console Metodları

console.log() en sık kullanılan metod ama başka metodlar da var. Her birinin farklı bir amacı var:

// Genel bilgi mesajı
console.log("Bu normal bir mesaj");

// Bilgi mesajı (mavi ikon)
console.info("Bu bir bilgi mesajı");

// Uyarı mesajı (sarı arka plan)
console.warn("Bu bir uyarı mesajı");

// Hata mesajı (kırmızı arka plan)
console.error("Bu bir hata mesajı");

// Tablo formatında veri gösterme
console.table(["Elma", "Armut", "Muz"]);

// Gruplama
console.group("Kullanıcı Bilgileri");
console.log("İsim: Ahmet");
console.log("Yaş: 25");
console.groupEnd();

// Zamanlama
console.time("Döngü");
for(let i = 0; i < 1000; i++) {
    // bir şeyler yap
}
console.timeEnd("Döngü");

Bu metodları script.js dosyanıza ekleyip sonuçları inceleyin. Her birinin konsolda nasıl göründüğüne dikkat edin.

Node.js ile Çalıştırma

JavaScript sadece tarayıcılarda çalışmaz. Node.js sayesinde JavaScript kodlarınızı bilgisayarınızda doğrudan çalıştırabilirsiniz.

Node.js Kurulumu

1. nodejs.org adresine gidin
2. LTS (Long Term Support) versiyonunu indirin
3. Kurulum sihirbazını takip edin
4. Kurulumu doğrulamak için terminal açıp şu komutu yazın:

node --version

Versiyon numarası görüyorsanız kurulum başarılı demektir.

Node.js ile Kod Çalıştırma

Terminal veya komut istemcisini açın. Proje klasörünüze gidin ve şu komutu yazın:

node script.js

Konsolda çıktıları göreceksiniz. Node.js, HTML dosyasına ihtiyaç duymadan JavaScript dosyalarını doğrudan çalıştırır.

Node.js özellikle backend geliştirme için kullanılır ama öğrenme sürecinde de faydalıdır. Hızlıca kod test etmek istediğinizde tarayıcı açmadan terminal üzerinden çalıştırabilirsiniz.

Interaktif Mod (REPL)

Terminalde sadece node yazıp Enter'a basarsanız interaktif moda girersiniz:

node

Artık doğrudan JavaScript kodu yazabilirsiniz:

> 5 + 3
8
> "Merhaba".toUpperCase()
'MERHABA'
> let isim = "Furkan"
undefined
> isim
'Furkan'

Çıkmak için .exit yazın veya Ctrl+C'ye iki kez basın.

Sık Sorulan Sorular

JavaScript öğrenmek ne kadar sürer?

Temelleri birkaç haftada öğrenebilirsiniz. Ancak ustalaşmak aylar hatta yıllar alır. Bu eğitim serisi, temel kavramları sağlam bir şekilde öğrenmenizi sağlayacak. Serinin sonunda basit projeler geliştirebilecek seviyeye geleceksiniz. Gerisi pratik ve deneyimle gelir.

HTML ve CSS bilmeden JavaScript öğrenebilir miyim?

Teknik olarak evet, ama önerilmez. JavaScript genellikle HTML ve CSS ile birlikte kullanılır. En azından temel HTML bilgisi (etiketler, yapı) faydalı olacaktır. Bu seride HTML'in temellerine değineceğiz ama derinlemesine girmeyeceğiz.

Hangi tarayıcıyı kullanmalıyım?

Chrome veya Firefox önerilir. Her ikisinin de güçlü geliştirici araçları var. Bu seride Chrome üzerinden örnekler vereceğiz ama Firefox da aynı şekilde çalışır.

Mobilde JavaScript öğrenebilir miyim?

Mobil uygulamalar (Grasshopper, SoloLearn gibi) temel kavramları öğrenmek için kullanılabilir. Ancak gerçek geliştirme için bilgisayar gerekli. Kod yazmak, hata ayıklamak ve proje geliştirmek bilgisayarda çok daha kolay.

JavaScript ile Java aynı şey mi?

Hayır, tamamen farklı dillerdir. İsimlerin benzer olması tarihsel pazarlama kararlarından kaynaklanıyor. Java daha çok kurumsal uygulamalar ve Android geliştirme için kullanılırken, JavaScript web teknolojilerine odaklanır.

Yazdığım kod çalışmıyor, ne yapmalıyım?

Önce tarayıcı konsolunu kontrol edin. Hata mesajları genellikle sorunu açıklar. Yazım hatası (typo) en sık karşılaşılan sorundur. Büyük-küçük harf duyarlılığına dikkat edin. Console.log çalışmaz, console.log çalışır.

Sonuç

Bu ilk derste JavaScript dünyasına giriş yaptık. Neden JavaScript öğrenmemiz gerektiğini, nerelerde kullanıldığını öğrendik. Geliştirme ortamımızı hazırladık, VS Code kurduk ve ilk kodlarımızı yazdık. Console kullanımını ve Developer Tools'u tanıdık.

Bu serinin ilerleyen bölümlerinde değişkenler, koşullar, döngüler, fonksiyonlar ve çok daha fazlasını öğreneceğiz. Her ders bir öncekinin üzerine inşa edilecek. Düzenli pratik yaparsanız, serinin sonunda kendi projelerinizi geliştirebilecek seviyeye geleceksiniz.

Öğrendiklerinizi pekiştirmek için şunları yapabilirsiniz:

1. Farklı console.log() mesajları deneyin
2. alert() ve prompt() fonksiyonlarını araştırın
3. Developer Tools'un diğer sekmelerini keşfedin
4. Node.js REPL'de basit hesaplamalar yapın

Sonraki Ders

Bir sonraki derste Değişkenler ve Veri Tipleri konusunu işleyeceğiz. Verileri nasıl sakladığımızı, farklı veri tiplerini ve bunlarla nasıl çalıştığımızı öğreneceğiz. Bu, programlamanın en temel yapı taşlarından biri.

JavaScript Eğitimi #2: Değişkenler ve Veri Tipleri →

Kaynaklar

• MDN JavaScript Kılavuzu - Mozilla'nın kapsamlı JavaScript dokümantasyonu
• VS Code Resmi Sitesi - Visual Studio Code indirme ve dokümantasyon
• Node.js Resmi Sitesi - Node.js indirme ve kurulum kılavuzu
• javascript.info - Modern JavaScript eğitimi (İngilizce)