- Katılım
- 7 Nis 2025
- Konular
- 367
- Mesajlar
- 780
- Çözümler
- 1
- Tepkime puanı
- 121
- Puan
- 93
- Konum
- İstanbul
- Web sitesi
- forumagel.com
Hazır Kod Bankası - Konu 8: JavaScript Temelleri
Hazır Kod Bankası Serimizin Sekizinci Konusu: JavaScript!
Merhaba arkadaşlar! HTML ile yapı, CSS ile görünüm kazandırdığımız web sayfalarımızı daha canlı, dinamik ve kullanıcı etkileşimli hale getirme zamanı! İşte burada web'in üçüncü temel taşı devreye giriyor: JavaScript (JS).
JavaScript, genellikle web tarayıcılarında çalışan (client-side) bir betik dilidir. Kullanıcının tarayıcısında çalışarak web sayfasının içeriğini, görünümünü ve davranışını kullanıcı etkileşimlerine (tıklama, fare hareketleri vb.) göre değiştirebilir. Sayfayı yeniden yüklemeye gerek kalmadan interaktif öğeler (açılır menüler, slayt gösterileri, form doğrulama, basit oyunlar) oluşturmak için kullanılır.
Önceki konumuz PHP, sunucu tarafında çalışıp sayfayı oluştururken, JavaScript sayfa kullanıcıya ulaştıktan sonra tarayıcıda çalışır. HTML, CSS ve JavaScript üçlüsü modern front-end (kullanıcı arayüzü) web geliştirmenin temelini oluşturur.
(Not: JavaScript ayrıca Node.js ile sunucu tarafında da çalıştırılabilir, ancak bu konuda tarayıcı tarafındaki kullanımına odaklanacağız.)
Bu konuda JavaScript'in temel sözdizimini, bir HTML sayfasına nasıl eklendiğini, değişkenleri, temel işlemleri ve sayfa elementleriyle (DOM - Document Object Model) nasıl etkileşime girebileceğini göreceğiz.
1. JavaScript Nedir ve Neden Kullanılır?
- İnteraktiflik: Sayfaya dinamik içerikler (saat, sayaç), animasyonlar ve kullanıcı eylemlerine tepkiler ekleme.
- DOM Manipülasyonu: HTML elementlerini JavaScript ile seçme, içeriklerini, özelliklerini veya stillerini değiştirme, yeni elementler ekleme veya silme.
- Asenkron İşlemler: Sayfayı yeniden yüklemeden sunucuya istek gönderip veri alabilme (AJAX - Modern geliştirme için çok önemlidir).
- Form Doğrulama: Form verilerini sunucuya göndermeden önce tarayıcıda kontrol etme.
- Oyun Geliştirme: Basit tarayıcı tabanlı oyunlar yazma.
2. JavaScript Kodu Nasıl Eklenir?
JavaScript kodları, HTML dosyası içine `<script>` etiketleri kullanılarak eklenir. Üç ana yolu vardır:
- Dahili (Internal) JavaScript: HTML dosyasının `<head>` veya `<body>` bölümündeki `<script>` etiketleri arasına yazılır.
HTML:<head> <script> // JavaScript kodları buraya yazılır alert("Merhaba JavaScript!"); </script> </head> - Harici (External) JavaScript: JavaScript kodları `.js` uzantılı ayrı bir dosyaya yazılır ve HTML dosyasında `<script src="dosya_adi.js"></script>` şeklinde bu dosyaya bağlantı verilir. Büyük projeler için en iyi yöntem budur. Kodlar daha düzenli olur ve farklı HTML sayfalarında aynı kod kullanılabilir.
HTML:<head> <script src="script.js"></script> </head> - Satır İçi (Inline) JavaScript: Doğrudan HTML etiketlerinin event (olay) özelliklerine yazılır (örn: `onclick`). Küçük ve basit işlemler dışında kullanımı önerilmez.
HTML:<button onclick="alert('Butona Tıklandı!')">Tıkla</button>
3. Temel Sözdizimi ve Değişkenler
- Noktalı Virgül (
: Her komutun sonuna noktalı virgül konulması iyi bir pratiktir, ancak bazı durumlarda zorunlu değildir (otomatik eklenir). Yine de yeni başlayanlar için eklemek tutarlılık sağlar. - Yorum Satırları: `//` (tek satır) veya `/* ... */` (çok satır) kullanılır.
- Büyük/Küçük Harf Duyarlılığı: JavaScript büyük/küçük harf duyarlıdır (`degisken` ile `Degisken` farklıdır).
- Değişkenler: Veri saklamak için kullanılır. Modern JavaScript'te `let` ve `const` kullanılır. `var` eski kullanımdır. JavaScript dinamik tiplidir (değişkenin tipini belirtmenize gerek yoktur).
[JAVASCRIPT]
let ad = "Mehmet"; // Metin (String) değişken
const yas = 30; // Sayı (Number) değişken (değeri sonradan değiştirilemez)
let aktifMi = true; // Mantıksal (Boolean) değişken
let sayi1 = 10;
let sayi2 = 5;
let toplam = sayi1 + sayi2; // İşlemler yapılabilir
[/JAVASCRIPT]
Açıklama: `let` ile tanımlanan değişkenin değeri sonradan değiştirilebilir, `const` ile tanımlananın değeri değiştirilemez. `var` eski tip değişken tanımıdır.
4. Çıktı Alma Yöntemleri
JavaScript kodunuzun çıktısını veya hata ayıklama bilgilerini görmek için farklı yöntemler vardır:
- `console.log()`: Geliştirici konsoluna (tarayıcınızın F12 ile açılan konsol sekmesi) çıktı verir. Kod yazarken hata ayıklamak için en sık kullanılan yöntemdir.
[JAVASCRIPT]
console.log("Bu konsola yazılır.");
console.log(toplam); // Değişkenlerin değerini de yazdırabilirsiniz
[/JAVASCRIPT] - `alert()`: Kullanıcıya küçük bir bilgi penceresi (pop-up) gösterir. Kullanımı sınırlıdır çünkü kullanıcı etkileşimi bekler.
[JAVASCRIPT]
alert("Sayfaya hoş geldiniz!");
[/JAVASCRIPT] - HTML İçeriğini Değiştirme: HTML elementlerinin içeriğini JavaScript ile değiştirebilirsiniz (DOM manipülasyonu).
[JAVASCRIPT]
// ID'si 'mesaj' olan bir HTML elementinin içeriğini değiştirme
document.getElementById("mesaj").innerHTML = "Yeni içerik burada!";
[/JAVASCRIPT]
Açıklama: `document.getElementById()` ile HTML elementini seçeriz. `.innerHTML` o elementin içeriğini temsil eder.
5. Operatörler, Kontrol Akışları ve Fonksiyonlar (Temel)
Diğer dillerde olduğu gibi JavaScript'te de matematiksel, karşılaştırma, mantıksal operatörler ve kodun akışını kontrol eden yapılar (if/else, döngüler) bulunur. Kodları belirli görevler için gruplamak üzere fonksiyonlar tanımlanır.
- Karşılaştırma Operatörleri: `==` (eşittir, tip kontrolü yapmaz), `===` (kesin eşittir, tip kontrolü yapar - önerilir), `!=` (eşit değildir), `!==` (kesin eşit değildir), `>`, `<`, `>=`, `<=`. Sonuç her zaman `true` veya `false` (Boolean) olur.
[JAVASCRIPT]
let x = 5;
let y = "5";
console.log(x == y); // true döner (değerler eşit)
console.log(x === y); // false döner (tipler farklı: number vs string)
[/JAVASCRIPT] - Kontrol Akışları (if/else): Belirli bir koşula göre farklı kod bloklarını çalıştırma.
[JAVASCRIPT]
let saat = 20;
if (saat < 18) {
console.log("İyi günler!");
} else {
console.log("İyi akşamlar!");
}
[/JAVASCRIPT] - Döngüler (for): Bir kod bloğunu belirli sayıda tekrarlama.
[JAVASCRIPT]
for (let i = 0; i < 5; i++) {
console.log("Döngü Sayısı: " + i); // 0'dan 4'e kadar yazar
}
[/JAVASCRIPT] - Fonksiyonlar: Belirli bir görevi yerine getiren yeniden kullanılabilir kod blokları.
[JAVASCRIPT]
function selamVer(isim) {
return "Merhaba, " + isim + "!"; // Geriye değer döndürür
}
let mesaj = selamVer("Ali"); // Fonksiyonu çağırma
console.log(mesaj); // Çıktı: Merhaba, Ali!
[/JAVASCRIPT]
6. DOM (Document Object Model) ile Etkileşim Örneği
HTML elementlerine JavaScript ile erişip onları değiştirmek (DOM manipülasyonu) en temel JavaScript yeteneklerindendir.
İşte basit bir örnek: Bir buton tıklandığında, altındaki bir paragrafın metnini değiştirelim.
index.html Dosyası:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript DOM Örneği</title>
</head>
<body>
<h1>JavaScript DOM İle Değişiklik</h1>
<p id="metinParagrafi">Bu metin değiştirilecek.</p>
<button onclick="metniDegistir()">Metni Değiştir</button>
[B]<script>[/B]
[B]// JavaScript kodu buraya[/B]
[B]function metniDegistir() {[/B]
[B]// ID'si 'metinParagrafi' olan elementi bul[/B]
[B]let paragraf = document.getElementById("metinParagrafi");[/B]
[B]// Paragrafın içeriğini değiştir[/B]
[B]paragraf.innerHTML = "Metin [B]JavaScript[/B] ile [B]değiştirildi[/B]!";[/B]
[B]// İsteğe bağlı: Stiilini de değiştirelim[/B]
[B]paragraf.style.color = "blue";[/B]
[B]paragraf.style.fontWeight = "bold";[/B]
[B]}[/B]
[B]</script>[/B]
</body>
</html>Sıra Sizde!
HTML içine JavaScript kodu eklemeyi denediniz mi? `console.log()` ile çıktıları kontrol ettiniz mi? `let`, `const` kullanarak değişkenler tanımlayıp değer atamayı denediniz mi? Yukarıdaki DOM örneğini çalıştırıp üzerinde değişiklikler yapmayı denediniz mi? (Örn: Başka bir elementi değiştirmek, farklı stiller uygulamak).
JavaScript sözdizimi, değişkenler, fonksiyonlar veya DOM etkileşimi hakkında aklınıza takılan soruları bu konu altında sorabilirsiniz.
Serinin Geleceği?
JavaScript ile web sayfalarına hayat vermeye başladık. Seriyi buradan sonra nasıl devam ettirelim?
- JavaScript'te daha ileri konular (Olay Dinleyicileri, Asenkron JS, Fetch API, Diziler, Objeler)?
- Popüler JavaScript Kütüphane/Frameworklerine Giriş (React, Vue, Angular)?
- Python gibi popüler başka bir dile giriş?
- Veya başka önerileriniz mi var?
Umarım bu konu JavaScript'e güzel bir başlangıç olmuştur. Görüşmek üzere!
Bu konu, "Hazır Kod Bankası" serisinin sekizinci parçasıdır ve "Yazılım Bilgi ve Yeni Başlayanlar İçin" kategorisi altında paylaşılmıştır.