Bölüm 1: JavaScript'e Giriş ve Temel Kavramlar

javascript-giris-temel-kavramlar

JavaScript Nedir?

JavaScript, web sayfalarına interaktif özellikler kazandıran ve dinamik içerik oluşturmamızı sağlayan programlama dilidir. 1995 yılında Brendan Eich tarafından geliştirilmiş olan JavaScript, bugün web’in vazgeçilmez programlama dili haline gelmiştir.

JavaScript’in Özellikleri

İstemci Taraflı (Client-Side): Tarayıcıda çalışır
Yorumlanan Dil: Derlemeye gerek yoktur
Dinamik Tipli: Değişken türleri çalışma zamanında belirlenir
Nesne Yönelimli: Objeler ve sınıflarla çalışabilir
Fonksiyonel: Fonksiyonlar birinci sınıf vatandaşlardır

JavaScript Neden Önemlidir?

HTML, CSS ve JavaScript Üçlüsü

<!-- HTML: Yapı -->
<h1 id="baslik">Merhaba Dünya</h1>
<button id="dugme">Tıkla Beni!</button>
 
<!-- CSS: Stil -->
<style>
    #baslik { color: blue; }
    #dugme { padding: 10px; background: green; color: white; }
</style>
 
<!-- JavaScript: Davranış -->
<script>
    document.getElementById('dugme').addEventListener('click', function() {
        document.getElementById('baslik').innerText = 'JavaScript Çalışıyor!';
        document.getElementById('baslik').style.color = 'red';
    });
</script>

JavaScript’in Avantajları

Anında Geri Bildirim: Kod yazdığınız anda sonucu görebilirsiniz
Evrensel Kullanım: Her modern tarayıcıda çalışır
Geniş Ekosistem: Milyonlarca hazır kütüphane ve framework
Tam Stack Geliştirme: Hem frontend hem backend geliştirme

JavaScript’i HTML’e Nasıl Ekleriz?

JavaScript’i HTML belgelerine üç farklı yöntemle ekleyebiliriz:

1. Inline JavaScript (Satır İçi)

HTML öğelerinin olay özelliklerinde doğrudan:

<button onclick="alert('Merhaba!')">Tıkla</button>
<button onmouseover="this.style.backgroundColor='yellow'">Üzerine Gel</button>

Uyarı

Dikkat: Inline JavaScript sadece küçük işlemler için kullanılmalıdır. Karmaşık kodlar için uygun değildir.

2. Internal JavaScript (Dahili)

HTML belgesi içinde <script> etiketi ile:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
</head>
<body>
    <h1 id="baslik">Merhaba</h1>
    <button id="dugme">Değiştir</button>
 
    <script>
        // JavaScript kodları burada
        function metniDegistir() {
            document.getElementById('baslik').innerText = 'JavaScript Çalışıyor!';
        }
        
        document.getElementById('dugme').addEventListener('click', metniDegistir);
    </script>
</body>
</html>

3. External JavaScript (Harici)

Ayrı bir JavaScript dosyasında ve <script> etiketi ile:

script.js dosyası:

// Bu bir JavaScript dosyasıdır
function selamVer() {
    alert('Merhaba JavaScript Dünyası!');
}
 
function sayfaYuklendi() {
    console.log('Sayfa başarıyla yüklendi!');
    document.getElementById('baslik').style.color = 'blue';
}
 
// Sayfa yüklendiğinde çalışacak
window.addEventListener('load', sayfaYuklendi);

HTML dosyası:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
</head>
<body>
    <h1 id="baslik">JavaScript Öğreniyorum</h1>
    <button onclick="selamVer()">Selam Ver</button>
    
    <!-- JavaScript dosyasını body'nin sonuna ekliyoruz -->
    <script src="script.js"></script>
</body>
</html>

Ipucu

En İyi Uygulama: Harici JavaScript dosyaları kullanın ve script etiketlerini body’nin sonuna yerleştirin. Bu sayfa yükleme performansını artırır.

JavaScript Söz Dizimi (Syntax)

JavaScript’te kodlarımızı yazarken belirli kurallara uymalıyız:

Temel Kurallar

// Tek satır yorum
 
/*
   Çok satırlı
   yorum
*/
 
// Her ifade ; ile biter (opsiyonel ama önerilen)
console.log('Merhaba Dünya');
 
// Değişken tanımlama
let isim = 'Furkan';
const yas = 25;
var sehir = 'İstanbul';
 
// Fonksiyon tanımlama
function selamla(isim) {
    return 'Merhaba ' + isim + '!';
}

Büyük/Küçük Harf Duyarlılığı

// JavaScript büyük/küçük harf duyarlıdır
let isim = 'Furkan';
let Isim = 'Ahmet';     // Farklı değişken
let ISIM = 'Mehmet';    // Yine farklı değişken
 
console.log(isim);      // 'Furkan'
console.log(Isim);      // 'Ahmet'
console.log(ISIM);      // 'Mehmet'

İlk JavaScript Programınız

Basit bir interaktif web sayfası oluşturalım:

index.html:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İlk JavaScript Sayfam</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        button {
            background: #007acc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        #sonuc {
            margin: 20px 0;
            padding: 15px;
            background: #e9ecef;
            border-radius: 5px;
            min-height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JavaScript İle İlk Adımlarım</h1>
        <p>Aşağıdaki butonlara tıklayarak JavaScript'in gücünü keşfedin!</p>
        
        <button onclick="selamVer()">Selam Ver</button>
        <button onclick="saatGoster()">Saat Göster</button>
        <button onclick="rastgeleSayi()">Rastgele Sayı</button>
        <button onclick="renkDegistir()">Renk Değiştir</button>
        
        <div id="sonuc">Bir butona tıklayın...</div>
    </div>
 
    <script src="script.js"></script>
</body>
</html>

script.js:

// Sayfa yüklendiğinde çalışacak
window.addEventListener('load', function() {
    console.log('Sayfa yüklendi! JavaScript çalışmaya hazır.');
});
 
// Selam verme fonksiyonu
function selamVer() {
    const isim = prompt('Adınız nedir?');
    if (isim) {
        document.getElementById('sonuc').innerHTML = 
            '<h3>Merhaba ' + isim + '!</h3><p>JavaScript dünyasına hoş geldin! 🎉</p>';
    }
}
 
// Güncel saati gösterme
function saatGoster() {
    const simdi = new Date();
    const saat = simdi.toLocaleTimeString('tr-TR');
    const tarih = simdi.toLocaleDateString('tr-TR');
    
    document.getElementById('sonuc').innerHTML = 
        '<h3>Şu anki tarih ve saat:</h3><p>' + tarih + ' - ' + saat + '</p>';
}
 
// Rastgele sayı üretme
function rastgeleSayi() {
    const sayi = Math.floor(Math.random() * 100) + 1;
    const mesaj = sayi > 50 ? 'Büyük sayı!' : 'Küçük sayı!';
    
    document.getElementById('sonuc').innerHTML = 
        '<h3>Rastgele Sayı: ' + sayi + '</h3><p>' + mesaj + '</p>';
}
 
// Arka plan rengini değiştirme
function renkDegistir() {
    const renkler = ['#ffcccb', '#add8e6', '#90ee90', '#ffb6c1', '#dda0dd', '#f0e68c'];
    const rastgeleRenk = renkler[Math.floor(Math.random() * renkler.length)];
    
    document.body.style.backgroundColor = rastgeleRenk;
    document.getElementById('sonuc').innerHTML = 
        '<h3>Arka plan rengi değişti!</h3><p>Yeni renk: ' + rastgeleRenk + '</p>';
}
 
// Console mesajları
console.log('JavaScript dosyası yüklendi!');
console.log('Tarayıcı console\'unu açarak bu mesajları görebilirsiniz.');

Console ve Developer Tools

JavaScript geliştirirken en önemli araçlardan biri tarayıcının Developer Tools’udur:

Console Kullanımı

// Basit mesaj yazdırma
console.log('Merhaba JavaScript!');
 
// Farklı veri türlerini yazdırma
console.log('Metin:', 'Bu bir string');
console.log('Sayı:', 42);
console.log('Boolean:', true);
 
// Uyarı ve hata mesajları
console.warn('Bu bir uyarı mesajıdır');
console.error('Bu bir hata mesajıdır');
 
// Obje yazdırma
console.log('Kullanıcı:', {isim: 'Furkan', yas: 25});

Developer Tools’u Açma

Chrome/Edge: F12 veya Ctrl+Shift+I
Firefox: F12 veya Ctrl+Shift+K
Safari: Cmd+Option+I (Mac)

Ipucu

İpucu: Console, JavaScript öğrenirken en iyi arkadaşınızdır. Kodlarınızı test etmek, değişken değerlerini görmek ve hataları bulmak için sürekli kullanın!

Pratik Egzersiz

Aşağıdaki egzersizi yaparak öğrendiklerinizi pekiştirin:

Bir HTML dosyası oluşturun ve temel yapıyı kurun
Ayrı bir JavaScript dosyası oluşturun ve HTML’e bağlayın
Şu fonksiyonları ekleyin:
- Kullanıcıdan isim alan ve karşılama mesajı gösteren fonksiyon
- Basit bir hesap makinesi (toplama, çıkarma)
- Kullanıcının yaşını alıp hangi nesilde olduğunu söyleyen fonksiyon
Console’da test edin ve sonuçları gözlemleyin

Bonus Görev

Bir “Tahmin Oyunu” yapın:

Bilgisayar 1-100 arası rastgele sayı tutsun
Kullanıcıdan tahmin istesin
“Daha büyük” veya “Daha küçük” ipucu versin
Doğru tahmin edildiğinde tebrik etsin

Sıradaki Bölüm

Bir sonraki bölümde Değişkenler ve Veri Türleri öğreneceksiniz. JavaScript’te bilgiyi nasıl sakladığımızı ve farklı veri türlerini nasıl kullandığımızı keşfedeceksiniz.

Öğrendikleriniz:

✅ JavaScript’in ne olduğunu ve neden önemli olduğunu
✅ JavaScript’i HTML’e eklemenin üç farklı yolunu
✅ JavaScript söz diziminin temellerini
✅ Console ve Developer Tools kullanımını
✅ İlk interaktif web sayfanızı oluşturmayı

Şimdi pratik yapma zamanı! Kodlarınızı deneyin, hata yapmaktan korkmayın ve JavaScript’in büyülü dünyasını keşfedin! 🚀