JavaScript Temelleri: Kapsamlı İlk Adımlar Rehberi

froxy · Cumartesi saat 17:31'de

JavaScript Temelleri: Kapsamlı İlk Adımlar Rehberi

Web geliştirmenin kalbi olan JavaScript, dinamik ve etkileşimli web siteleri oluşturmanın vazgeçilmez aracıdır. Bu kapsamlı rehber, JavaScript dünyasına sağlam bir giriş yapmanızı sağlayacak temel kavramları ve ilk adımları adım adım açıklayacaktır. Hiçbir ön bilgiye sahip olmasanız bile, bu dilin mantığını kavramanıza ve ilk kod satırlarınızı güvenle yazmanıza yardımcı olacağız.

JavaScript Nedir ve Neden Öğrenmelisiniz?
JavaScript, World Wide Web'in üç ana katmanından biridir (diğerleri HTML ve CSS'tir). HTML sayfanın yapısını, CSS stilini belirlerken, JavaScript sayfanın davranışını yönetir. Tarayıcıda doğrudan çalışır ve kullanıcının sayfayla etkileşimini (buton tıklamaları, form gönderimleri), animasyonları, dinamik içerik güncellemelerini ve daha birçok modern web özelliğini mümkün kılar. Son yıllarda, Node.js sayesinde sunucu tarafında, React Native gibi platformlarla mobil uygulamalarda ve Electron ile masaüstü uygulamalarında da kullanılabilir hale gelerek popülerliğini artırmıştır. Bu geniş kullanım alanı, JavaScript'i günümüzün en çok talep gören ve en çok yönlü programlama dillerinden biri yapmaktadır.

Geliştirme Ortamınızı Kurma (veya Kullanma)
JavaScript kodunu çalıştırmak için karmaşık bir kurulum yapmanıza genellikle gerek yoktur. En basit ve hızlı yöntem, herhangi bir modern web tarayıcısının geliştirici konsolunu kullanmaktır.

Favori web tarayıcınızı açın (Google Chrome, Mozilla Firefox, Microsoft Edge vb.).
Klavyenizdeki F12 tuşuna basın veya sayfa üzerinde sağ tıklayıp "İncele" (Inspect) seçeneğini seçin.
Açılan geliştirici araçları penceresinde "Konsol" (Console) sekmesine geçin.
Artık burada doğrudan JavaScript kodlarını yazabilir, enter tuşuna basarak anında çalıştırabilir ve sonuçlarını gözlemleyebilirsiniz. Bu, küçük kod parçacıklarını test etmek için idealdir.

Daha büyük projeler ve organize kod yazımı için ise bir kod düzenleyici (örneğin Visual Studio Code) ve basit bir HTML dosyası kullanmak en iyi yaklaşımdır.

Kod:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript İlk Adımlar Projesi</title>
</head>
<body>
    <h1 id="anaBaslik">Merhaba JavaScript Dünyası!</h1>
    <p class="bilgiMetni">Bu bir giriş paragrafıdır.</p>
    <button id="degistirButonu">Yazıyı Değiştir</button>

    <script>
        // JavaScript kodunuz genellikle buraya veya harici bir dosyaya yazılır
        console.log("Tarayıcı konsoluna yazılan ilk JavaScript mesajım!");
        
        const baslikElementi = document.getElementById("anaBaslik");
        baslikElementi.textContent = "JavaScript ile Değiştirildi!";
    </script>
    <!-- Harici bir JavaScript dosyasını bağlamak için aşağıdaki gibi bir etiket kullanın: -->
    <!-- <script src="script.js"></script> -->
</body>
</html>

Yukarıdaki HTML dosyasında,

Kod:

<script>

etiketleri arasına yazdığımız JavaScript kodu, sayfa yüklendiğinde tarayıcı tarafından yorumlanarak çalıştırılır. Projeniz büyüdükçe, JavaScript kodunuzu

Kod:

script.js

gibi ayrı bir dosyaya taşımak ve

Kod:

<script src="script.js"></script>

etiketiyle HTML dosyanıza bağlamak, kodunuzu daha düzenli ve yönetilebilir hale getirecektir.

Değişkenler: Bilgiyi Saklamanın Kapları
Değişkenler, programlamada verileri (sayılar, metinler, nesneler vb.) depolamak için kullanılan isimlendirilmiş hafıza konumlarıdır. JavaScript'te değişken tanımlamak için üç anahtar kelime kullanırız: var, let ve const.

var: JavaScript'in en eski değişken tanımlama anahtar kelimesidir. Fonksiyon kapsamına sahiptir ve bazı beklenmedik davranışlara (örneğin hoisting) yol açabilir. Günümüz modern JavaScript geliştirme pratiklerinde genellikle let veya const tercih edilir.

Kod:

var kullaniciAdi = "Mehmet";
console.log(kullaniciAdi); // Çıktı: Mehmet

function ornekFonksiyon() {
    var disDegisken = "Dışarıda";
    if (true) {
        var icDegisken = "İçeride";
        console.log(icDegisken); // İçeride
    }
    console.log(icDegisken); // İçeride (var fonksiyon kapsamında olduğu için dışarıdan erişilebilir)
}
ornekFonksiyon();

let: ES6 (ECMAScript 2015) ile tanıtılmıştır. Blok kapsamına sahiptir, yani tanımlandığı süslü parantezler (

Kod:

{}

) içinde geçerlidir ve yeniden atanabilir. Modern JavaScript'te değişken tanımlamak için yaygın olarak tercih edilir.

Kod:

let yas = 25;
yas = 26; // 'let' ile tanımlanan değişkenler yeniden atanabilir.
console.log(yas); // Çıktı: 26

if (true) {
    let mesaj = "Merhaba!";
    console.log(mesaj); // Çıktı: Merhaba!
}
// console.log(mesaj); // Hata: 'mesaj' tanımlı değil (blok kapsamı nedeniyle erişilemez)

const: Yine ES6 ile tanıtılmıştır. Blok kapsamına sahiptir ve tanımlandığında mutlaka bir değer atanmalıdır. Atandıktan sonra değeri değiştirilemez. Sabit değerler, referanslar veya uygulamanın ömrü boyunca değişmeyecek değerler için kullanılır.

Kod:

const PI = 3.14159;
// PI = 3.14; // Hata: Sabit değişkene yeniden atama yapılamaz!
console.log(PI); // Çıktı: 3.14159

const KISIDETAYLARI = { ad: "Ayşe", soyad: "Yılmaz" };
KISIDETAYLARI.ad = "Zeynep"; // Nesnenin içindeki özellikler değiştirilebilir (sadece nesnenin referansı sabittir)
console.log(KISIDETAYLARI.ad); // Çıktı: Zeynep

// KISIDETAYLARI = { ad: "Deniz" }; // Hata: Referansı yeniden atayamazsınız!

Genel bir kural olarak, bir değişkenin değerinin değişmeyeceğinden eminseniz const, aksi takdirde let kullanın. var'dan mümkün olduğunca kaçınmalısınız.

Veri Türleri: Bilgiyi Sınıflandırma
JavaScript'te programlar farklı türlerdeki verileri işler. Her veri türü, bellekte farklı bir şekilde depolanır ve üzerinde farklı işlemler yapılabilir. Başlıca temel veri türleri şunlardır:

String (Metin): Metin verilerini temsil eder. Tek tırnak (

Kod:

'')

, çift tırnak (

Kod:

""

) veya backtick (

Kod:

````) ile tanımlanır. Backtick ile tanımlanan string'lere [b]template literals[/b] denir ve değişkenleri kolayca içine gömme (`${degisken}`) özelliği sunar.
    [code]
    let ogrenciAdi = "Deniz";
    let ogrenciSoyadi = 'Aslan';
    let tamIsim = `Öğrencinin adı: ${ogrenciAdi} ${ogrenciSoyadi}.`;
    console.log(tamIsim); // Çıktı: Öğrencinin adı: Deniz Aslan.

Number (Sayı): Hem tam sayıları (integer) hem de ondalıklı sayıları (float) temsil eder. JavaScript'te sayı türleri arasında bir ayrım yapılmaz.
Kod:
```
    let urunAdeti = 15;
    let urunFiyati = 29.99;
    let toplamFiyat = urunAdeti * urunFiyati;
    console.log(toplamFiyat); // Çıktı: 449.85
```
Boolean (Mantıksal): Yalnızca iki olası değeri vardır:
Kod:
```
true
```
(doğru) veya
Kod:
```
false
```
(yanlış). Genellikle koşullu ifadelerde ve karar verme mekanizmalarında kullanılır.
Kod:
```
    let isAktif = true;
    let isTamamlandi = false;
```
Null (Boş): Bilinçli olarak hiçbir değere sahip olmadığını belirtmek için kullanılır. Bir değişkene atanmış, ancak değeri boş veya tanımsız olarak belirlenmiş bir durumu ifade eder.
Kod:
```
    let secilenUrun = null;
    console.log(typeof secilenUrun); // Çıktı: object (Bu, JavaScript'in bilinen bir 'bug'ıdır, null aslında ilkel bir türdür.)
```
Undefined (Tanımsız): Bir değişkene değer atanmadığında veya bir nesnenin var olmayan bir özelliğine erişmeye çalışıldığında otomatik olarak aldığı değerdir.
Kod:
```
    let yeniDeger;
    console.log(yeniDeger); // Çıktı: undefined
    let nesne = {};
    console.log(nesne.mevcutOlmayanOzellik); // Çıktı: undefined
```

Object (Nesne): Karmaşık veri yapılarını depolamak için kullanılır. Anahtar-değer çiftlerinden oluşur ve birbiriyle ilişkili verileri gruplandırmanın bir yoludur.

Kod:

    let kullanici = {
        ad: "Ayşe",
        soyad: "Can",
        yas: 30,
        adres: {
            sehir: "İstanbul",
            ulke: "Türkiye"
        },
        hobiler: ["kitap okumak", "yürüyüş yapmak"]
    };
    console.log(kullanici.ad); // Çıktı: Ayşe
    console.log(kullanici.adres.sehir); // Çıktı: İstanbul

Symbol (Sembol): ES6 ile tanıtıldı. Her zaman benzersiz ve değiştirilemez değerler oluşturur. Genellikle nesne özellik anahtarları olarak kullanılır ve ad çakışmalarını önlemek için faydalıdır.

Kod:

    const id1 = Symbol('id');
    const id2 = Symbol('id');
    console.log(id1 === id2); // Çıktı: false (Her sembol benzersizdir)
    const ayar = {
        [id1]: 123,
        adi: 'Deneme Ayarı'
    };
    console.log(ayar[id1]); // Çıktı: 123

BigInt: JavaScript'teki Number veri tipinin temsil edemeyeceği kadar büyük tam sayıları temsil etmek için kullanılır (Number tipi ±2^53 - 1 arasındaki sayıları hassas bir şekilde temsil edebilir). Bir sayının sonuna
Kod:
```
n
```
ekleyerek oluşturulur.
Kod:
```
    const maxSayi = Number.MAX_SAFE_INTEGER; // 9007199254740991
    const buyukSayi = 9007199254740991n + 2n;
    console.log(buyukSayi); // Çıktı: 9007199254740993n
```

Operatörler: Değerlerle İşlem Yapma
Operatörler, değişkenler ve değerler üzerinde belirli işlemleri gerçekleştirmek için kullanılan sembollerdir. JavaScript'te birçok farklı operatör türü bulunur:

Aritmetik Operatörler: Matematiksel işlemler için kullanılır. (

Kod:

toplama,

Kod:

çıkarma,

Kod:

çarpma,

Kod:

bölme,

Kod:

modülüs (kalan),

Kod:

**

üs alma).

Kod:

    let sayi1 = 20, sayi2 = 7;
    console.log(sayi1 + sayi2); // 27
    console.log(sayi1 % sayi2); // 6 (20'nin 7'ye bölümünden kalan)
    console.log(2 ** 3); // 8 (2 üzeri 3)

Karşılaştırma Operatörleri: İki değeri karşılaştırır ve bir
Kod:
```
true
```
veya
Kod:
```
false
```
değeri (Boolean) döndürür. (
Kod:
```
==
```
değer eşitliği,
Kod:
```
===
```
değer ve tür eşitliği,
Kod:
```
!=
```
değer eşit değil,
Kod:
```
!==
```
değer veya tür eşit değil,
Kod:
```
>
```
büyük,
Kod:
```
<
```
küçük,
Kod:
```
>=
```
büyük veya eşit,
Kod:
```
<=
```
küçük veya eşit).
Kod:
```
    console.log(10 == "10");  // true (sadece değeri karşılaştırır)
    console.log(10 === "10"); // false (hem değer hem türü karşılaştırır)
    console.log(5 < 10);     // true
```

Mantıksal Operatörler: Boolean değerler üzerinde mantıksal işlemler yapar. (

Kod:

&&

VE,

Kod:

||

VEYA,

Kod:

DEĞİL).

Kod:

    let kosul1 = true, kosul2 = false;
    console.log(kosul1 && kosul2); // false (Her ikisi de true olmalı)
    console.log(kosul1 || kosul2); // true (Herhangi biri true ise)
    console.log(!kosul1);          // false (true'nun tersi)

Atama Operatörleri: Bir değişkene değer atamak için kullanılır. (
Kod:
```
=
```
atama,
Kod:
```
+=
```
ekle ve ata,
Kod:
```
-=
```
çıkar ve ata,
Kod:
```
*=
```
çarp ve ata, vb.).
Kod:
```
    let x = 10;
    x += 5; // x = x + 5; yani x şimdi 15
    console.log(x);
```

Kontrol Akışı: Karar Verme ve Tekrarlama
Programlarınızın belirli koşullara göre farklı yollar izlemesini veya belirli kod bloklarını birden çok kez çalıştırmasını sağlamak için kontrol akışı yapılarını kullanırız.

if/else if/else Koşullu İfadeler: Belirli bir koşulun doğru olup olmadığını kontrol eder ve bu duruma göre farklı kod bloklarını çalıştırır.

Kod:

let puan = 85;

if (puan >= 90) {
    console.log("Notunuz: A - Mükemmel!");
} else if (puan >= 80) {
    console.log("Notunuz: B - Çok İyi!");
} else if (puan >= 70) {
    console.log("Notunuz: C - İyi.");
} else {
    console.log("Notunuz: D veya F - Tekrar denemelisiniz.");
}

switch Koşullu İfade: Tek bir ifadenin (değişkenin) farklı olası değerlerine göre farklı kod bloklarını çalıştırmak için kullanılır. Genellikle birden fazla

Kod:

else if

bloğu yerine daha okunaklı bir alternatif sunar.

Kod:

let gun = "Çarşamba";

switch (gun) {
    case "Pazartesi":
        console.log("Haftanın başlangıcı!");
        break;
    case "Cuma":
        console.log("Hafta sonuna doğru!");
        break;
    case "Cumartesi":
    case "Pazar": // Birden fazla case aynı işlemi yapabilir
        console.log("Hafta sonu keyfi!");
        break;
    default:
        console.log("Diğer bir iş günü.");
        break;
}

Döngüler: Belirli bir kod bloğunu belirli bir koşul karşılandığı sürece veya belirli sayıda tekrar etmek için kullanılır.

for döngüsü: Bir kod bloğunu belirli sayıda çalıştırmak için kullanılır. Genellikle bir başlangıç değeri, bir bitiş koşulu ve bir artırma/azaltma ifadesi ile birlikte kullanılır.

Kod:

    for (let i = 0; i < 5; i++) {
        console.log("Döngü sayısı: " + i);
    }
    // Çıktı:
    // Döngü sayısı: 0
    // Döngü sayısı: 1
    // Döngü sayısı: 2
    // Döngü sayısı: 3
    // Döngü sayısı: 4

while döngüsü: Belirli bir koşul

Kod:

true

olduğu sürece bir kod bloğunu tekrar tekrar çalıştırır. Koşul başlangıçta kontrol edilir.

Kod:

    let sayac = 0;
    while (sayac < 3) {
        console.log("While döngüsü: " + sayac);
        sayac++; // Koşulun false olmasını sağlamak için sayacı artırın!
    }
    // Çıktı:
    // While döngüsü: 0
    // While döngüsü: 1
    // While döngüsü: 2

do/while döngüsü: while döngüsüne benzer, ancak kod bloğu koşuldan bağımsız olarak en az bir kez çalıştırılır, ardından koşul kontrol edilir.

Kod:

    let j = 0;
    do {
        console.log("Do-while döngüsü: " + j);
        j++;
    } while (j < 2);
    // Çıktı:
    // Do-while döngüsü: 0
    // Do-while döngüsü: 1

for...of döngüsü: Diziler (Arrays), String'ler, Haritalar (Maps) ve Set'ler gibi yinelenebilir (iterable) nesnelerin elemanları üzerinde doğrudan döngü yapmak için kullanılır.
Kod:
```
    const sehirler = ["Ankara", "İzmir", "Bursa"];
    for (const sehir of sehirler) {
        console.log(sehir);
    }
    // Çıktı:
    // Ankara
    // İzmir
    // Bursa
```

for...in döngüsü: Nesnelerin numaralandırılabilir özellikleri (anahtarları) üzerinde döngü yapmak için kullanılır. Nesneler üzerinde döngü yapmanın geleneksel yoludur.

Kod:

    const urun = { ad: "Laptop", marka: "Dell", fiyat: 12000 };
    for (const anahtar in urun) {
        console.log(`${anahtar}: ${urun[anahtar]}`);
    }
    // Çıktı:
    // ad: Laptop
    // marka: Dell
    // fiyat: 12000

Fonksiyonlar: Yeniden Kullanılabilir Kod Blokları
Fonksiyonlar, belirli bir görevi yerine getiren ve programınızın farklı yerlerinde tekrar tekrar çağrılabilen kod bloklarıdır. Bu, kod tekrarını azaltır (DRY - Don't Repeat Yourself prensibi) ve programınızı daha modüler, okunabilir ve bakımı kolay hale getirir.

Fonksiyon Tanımlama: Geleneksel olarak

Kod:

function

anahtar kelimesi ile tanımlanır.

Kod:

function selamlama(kisiAdi) {
    return "Merhaba, " + kisiAdi + "! Hoş geldiniz.";
}

// Fonksiyonu çağırma
let karsilamaMesaji = selamlama("Cem");
console.log(karsilamaMesaji); // Çıktı: Merhaba, Cem! Hoş geldiniz.

function toplamaYap(sayiA, sayiB) {
    let sonuc = sayiA + sayiB;
    console.log("Toplam: " + sonuc);
}
toplamaYap(15, 7); // Çıktı: Toplam: 22

Ok Fonksiyonları (Arrow Functions): ES6 ile tanıtılan, fonksiyonları daha kısa ve öz bir şekilde yazmayı sağlayan bir yöntemdir. Özellikle tek satırlık işlemler için çok kullanışlıdır.

Kod:

// Geleneksel fonksiyon
const carpmaGeleneksel = function(x, y) {
    return x * y;
};

// Ok fonksiyonu
const carpmaOk = (x, y) => {
    return x * y;
};

// Tek satırlık ifade için daha da kısa yazılabilir (implicit return)
const kareAl = sayi => sayi * sayi;

console.log(carpmaOk(4, 6)); // Çıktı: 24
console.log(kareAl(9));     // Çıktı: 81

Diziler (Arrays) ve Nesneler (Objects): Karmaşık Veri Yapıları
JavaScript'te daha karmaşık ve ilişkili verileri depolamak için diziler ve nesneler kullanılır.

Diziler (Arrays): Sıralı veri koleksiyonlarıdır. Aynı veya farklı veri türlerinden birçok öğeyi tek bir değişken altında saklamanıza olanak tanır. Her elemana bir indeks (sıra numarası, 0'dan başlar) ile erişilir.

Kod:

let alisverisListesi = ["Elma", "Süt", "Ekmek", "Peynir"];

// Dizinin elemanlarına erişim
console.log(alisverisListesi[0]); // Çıktı: Elma
console.log(alisverisListesi[2]); // Çıktı: Ekmek

// Dizinin uzunluğu (eleman sayısı)
console.log(alisverisListesi.length); // Çıktı: 4

// Dizinin sonuna eleman ekleme
alisverisListesi.push("Yoğurt");
console.log(alisverisListesi); // Çıktı: ["Elma", "Süt", "Ekmek", "Peynir", "Yoğurt"]

// Diziden eleman çıkarma (son eleman)
let cikarilan = alisverisListesi.pop();
console.log(cikarilan); // Çıktı: Yoğurt
console.log(alisverisListesi); // Çıktı: ["Elma", "Süt", "Ekmek", "Peynir"]

// Diziler üzerinde döngü yapma
for (let i = 0; i < alisverisListesi.length; i++) {
    console.log(`Listede: ${alisverisListesi[i]}`);
}

Nesneler (Objects): Anahtar-değer (key-value) çiftleri şeklinde verileri saklar. Gerçek dünya nesnelerini veya yapılandırılmış verileri modellemek için idealdir. Anahtarlar genellikle string'tir ve değerler herhangi bir JavaScript veri türü olabilir (başka bir nesne, dizi, fonksiyon vb.).

Kod:

let kullaniciProfili = {
    isim: "Gizem",
    soyisim: "Demir",
    email: "gizem.demir@example.com",
    telefon: "555-123-4567",
    aktifMi: true,
    adres: {
        il: "Ankara",
        ilce: "Çankaya"
    },
    hobiler: ["film izlemek", "yemek yapmak"]
};

// Nesnenin özelliklerine erişim (dot notation veya bracket notation)
console.log(kullaniciProfili.isim);      // Çıktı: Gizem
console.log(kullaniciProfili["email"]);   // Çıktı: gizem.demir@example.com
console.log(kullaniciProfili.adres.il); // Çıktı: Ankara

// Yeni özellik ekleme
kullaniciProfili.dogumYili = 1990;
console.log(kullaniciProfili.dogumYili); // Çıktı: 1990

// Mevcut özelliğin değerini değiştirme
kullaniciProfili.aktifMi = false;
console.log(kullaniciProfili.aktifMi); // Çıktı: false

// Nesne özelliklerini döngü ile gezme (for...in)
for (const anahtar in kullaniciProfili) {
    // Hobiler gibi alt nesneleri veya dizileri de kontrol etmek isteyebilirsiniz.
    if (typeof kullaniciProfili[anahtar] !== 'object' || kullaniciProfili[anahtar] === null) {
        console.log(`${anahtar}: ${kullaniciProfili[anahtar]}`);
    } else if (Array.isArray(kullaniciProfili[anahtar])) {
        console.log(`${anahtar}: ${kullaniciProfili[anahtar].join(', ')}`);
    } else {
        console.log(`${anahtar}: (nesne veya dizi)`);
    }
}

DOM Manipülasyonuna Giriş (Belge Nesne Modeli)
Web tarayıcılarında çalışan JavaScript'in en güçlü yönlerinden biri, Belge Nesne Modeli (Document Object Model - DOM) aracılığıyla HTML sayfalarının içeriğini, yapısını ve stilini dinamik olarak değiştirebilmesidir. DOM, HTML belgesini hiyerarşik bir nesne ağacı olarak temsil eder, böylece JavaScript bu nesnelerle etkileşime girebilir.

HTML Elemanlarını Seçme: JavaScript, belirli HTML elemanlarına erişmek için çeşitli yöntemler sunar.

Kod:

    // ID ile eleman seçme (sayfadaki tekil bir eleman için)
    const baslikElementi = document.getElementById("anaBaslik");
    console.log(baslikElementi.textContent); // "Merhaba JavaScript Dünyası!" çıktısını verir

    // Sınıf adına göre elemanlar seçme (bir HTMLCollection döndürür)
    const bilgiParagraflari = document.getElementsByClassName("bilgiMetni");
    console.log(bilgiParagraflari[0].textContent); // "Bu bir giriş paragrafıdır." çıktısını verir

    // CSS seçici ile ilk eşleşen elemanı seçme
    const ilkP = document.querySelector("p.bilgiMetni");
    console.log(ilkP.textContent);

    // CSS seçici ile tüm eşleşen elemanları seçme (bir NodeList döndürür)
    const tumP = document.querySelectorAll("p");
    tumP.forEach(p => console.log(p.textContent));

Eleman İçeriğini Değiştirme: Seçilen HTML elemanlarının metin veya HTML içeriğini değiştirebilirsiniz.

Kod:

    const baslik = document.getElementById("anaBaslik");
    baslik.textContent = "JavaScript ile Başlık Güncellendi!"; // Sadece metin içeriğini değiştirir (güvenlidir)
    // baslik.innerHTML = "<i>JavaScript</i> ile <b>Başlık</b> güncellendi!"; // HTML içeriğini değiştirir (XSS riskine dikkat!)

Eleman Stillerini Değiştirme: Elemanların CSS özelliklerini doğrudan JavaScript üzerinden değiştirebilirsiniz.

Kod:

    const buton = document.getElementById("degistirButonu");
    buton.style.backgroundColor = "#4CAF50"; // Arka plan rengini değiştir
    buton.style.color = "white";             // Yazı rengini değiştir
    buton.style.padding = "10px 20px";       // İç boşluk ekle

Olay Dinleyicileri (Event Listeners): Kullanıcıların bir elemanla (tıklama, klavye girişi, fare hareketi vb.) etkileşimine tepki vermek için olay dinleyicileri kullanılır.

Kod:

    const buton = document.getElementById("degistirButonu");
    buton.addEventListener("click", function() {
        const paragraf = document.querySelector(".bilgiMetni");
        if (paragraf) {
            paragraf.textContent = "Butona tıklandı ve bu metin değişti!";
            paragraf.style.color = "red";
            paragraf.style.fontWeight = "bold";
        }
    });

DOM manipülasyonu, web sayfalarınızı interaktif ve dinamik hale getirmenin temelidir. Kullanıcı etkileşimlerine yanıt veren, içerikleri dinamik olarak yükleyen ve kullanıcı deneyimini zenginleştiren uygulamalar oluşturmak için bu yeteneği kullanırsınız.

Sonraki Adımlar ve Kaynaklar
Bu rehber, JavaScript'in temellerine güçlü bir giriş yaptı. Şimdi bu bilgileri pratikle pekiştirmeniz ve daha ileri konulara yönelmeniz önemlidir. İşte öğrenmeye devam edebileceğiniz bazı alanlar:

Daha İleri Veri Yapıları: JavaScript'te Map ve Set gibi diğer güçlü veri yapılarını keşfedin.
Asenkron JavaScript: Web uygulamalarının akıcılığını sağlayan Callbacks, Promises ve Async/Await konularını öğrenin.
Hata Yönetimi: Programlarınızdaki hataları
Kod:
```
try...catch
```
blokları ile nasıl yöneteceğinizi öğrenin.
Modüller: Büyük JavaScript projelerini daha küçük, yönetilebilir dosyalara bölmeyi sağlayan modül sistemini anlayın.
Modern JavaScript Kütüphaneleri ve Framework'leri: React, Angular, Vue.js gibi popüler kütüphaneleri ve framework'leri incelemeye başlayın.
Web API'leri: Tarayıcıların sunduğu Fetch API (veri almak için), Local Storage API (tarayıcıda veri depolamak için) gibi API'leri öğrenin.

Daha fazla derinlemesine bilgi için güvenilir bir kaynak: MDN Web Docs - JavaScript. Bu platform, JavaScript'in tüm yönlerini kapsayan detaylı ve güncel dokümantasyon sunar.

Sonuç
JavaScript, sürekli gelişen ve öğrenmesi oldukça keyifli bir dildir. Bu temelleri sağlam bir şekilde kavradığınızda, web geliştirme dünyasının ve ötesinin kapıları ardına kadar açılacaktır. Pratik yapmaktan, küçük projeler geliştirmekten ve karşılaştığınız sorunları araştırmaktan asla çekinmeyin. Her yazdığınız kod satırı ve çözdüğünüz her problem, sizi daha deneyimli ve yetkin bir geliştirici yapacaktır. Bol şans ve keyifli kodlamalar!