1. JavaScript Nedir?
JavaScript, web sayfalarına davranış ve etkileşim kazandıran bir programlama dilidir.
Bir web sitesinde gördüğümüz butonlar, menüler, formlar, uyarılar ve birçok dinamik işlem JavaScript kullanılarak kontrol edilebilir.
Örneğin bir web sayfasında:
Bir butona tıklayınca mesaj gösterilmesi,
Menüye tıklayınca menünün açılması,
Bir formun kontrol edilmesi,
Ürün sepete eklendiğinde toplam fiyatın değişmesi,
Sunucudan yeni verilerin alınması
gibi işlemler JavaScript ile gerçekleştirilebilir.
Kısaca:
JavaScript, web sayfasının davranışını ve etkileşimini kontrol eder.
2. JavaScript Nerelerde Kullanılır?
JavaScript özellikle web geliştirme alanında çok yaygın olarak kullanılır.
Web sitelerinde
JavaScript ile;
Form işlemleri,
Buton ve menü işlemleri,
Animasyonlar,
Dinamik içerikler,
Kullanıcı etkileşimleri,
API işlemleri,
Alışveriş sepetleri,
Yönetim panelleri
gibi birçok özellik geliştirilebilir.
Ancak JavaScript yalnızca web sitelerinde kullanılmaz.
Günümüzde JavaScript;
Web uygulamalarında,
Sunucu tarafında,
Mobil uygulamalarda,
Masaüstü uygulamalarında,
Oyun geliştirmede
de kullanılabilmektedir.
Örneğin Node.js sayesinde JavaScript sunucu tarafında da çalıştırılabilir.
3. HTML, CSS ve JavaScript İlişkisi
Web geliştirmeye başlarken üç temel teknolojiyi birbirinden ayırmak çok önemlidir:
HTML + CSS + JavaScript
Bu üç teknolojinin görevleri farklıdır.
HTML → Yapı
HTML, web sayfasının içeriğini ve yapısını oluşturur.
Örneğin:
<h1>JavaScript Dersleri</h1> <button>Tıkla</button>
HTML bize:
"Sayfada bir başlık ve bir buton olsun."
der.
CSS → Görünüm
CSS, oluşturduğumuz HTML elemanlarının nasıl görüneceğini belirler.
Örneğin:
button { background: blue; color: white; }
CSS sayesinde butonun;
Rengini,
Boyutunu,
Yazı tipini,
Konumunu,
Kenarlıklarını
belirleyebiliriz.
JavaScript → Davranış
JavaScript ise sayfadaki elemanların nasıl davranacağını belirler.
Örneğin:
button.addEventListener("click", function () { alert("Merhaba!"); });
Bu kod ile:
"Kullanıcı butona tıklarsa Merhaba mesajını göster."
demiş oluruz.
Kısaca
TeknolojiGörevi
HTMLYapı ve içerik
CSSGörünüm ve tasarım
JavaScriptDavranış ve etkileşim
Bunu aklımızda tutmak için basitçe şöyle düşünebiliriz:
HTML = Yapı
CSS = Görünüm
JavaScript = Davranış
4. JavaScript Nasıl Çalışır?
JavaScript kodlarımızın çalışabilmesi için JavaScript'i anlayıp çalıştırabilen bir ortama ihtiyacımız vardır.
Web geliştirmede JavaScript'in en yaygın kullanım alanlarından biri web tarayıcılarıdır.
Örneğin Google Chrome içerisinde JavaScript kodlarını çalıştırabilen V8 JavaScript motoru bulunur.
Basitleştirilmiş olarak çalışma mantığını şöyle düşünebiliriz:
JavaScript kodu ↓ JavaScript Motoru ↓ Kod çalıştırılır ↓ Sonuç ortaya çıkar
Örneğin:
console.log(10 + 20);
JavaScript bu işlemi çalıştırır ve sonuç olarak:
30
değerini üretir.
Bu dersin ilerleyen bölümlerinde JavaScript'in çalışma mantığını daha ayrıntılı olarak inceleyeceğiz.
5. JavaScript'i HTML Sayfasına Eklemek
JavaScript kodlarımızı HTML sayfasına farklı şekillerde ekleyebiliriz.
Başlangıç için en basit yöntemlerden biri <script> etiketini kullanmaktır.
Örneğin:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>JavaScript Ders 1</title> </head> <body> <h1>JavaScript Öğreniyorum</h1> <script> console.log("Merhaba JavaScript!"); </script> </body> </html>
Burada:
<script>
etiketi içerisinde JavaScript kodumuzu yazıyoruz.
Sayfa tarayıcıda açıldığında JavaScript kodumuz çalıştırılır.
6. JavaScript'i Ayrı Bir Dosyada Kullanmak
Gerçek projelerde JavaScript kodlarını genellikle HTML dosyasının içine yazmak yerine ayrı bir .js dosyasında tutarız.
Örneğin projemizde:
index.html script.js
şeklinde iki dosyamız olduğunu düşünelim.
script.js
console.log("Merhaba JavaScript!");
Daha sonra JavaScript dosyamızı HTML sayfamıza bağlarız:
<script src="script.js"></script>
Buradaki src özelliği JavaScript dosyamızın konumunu belirtir.
Bu yöntem sayesinde HTML ve JavaScript kodlarımızı birbirinden ayırabiliriz.
7. Browser Console Nedir?
JavaScript öğrenirken en sık kullanacağımız araçlardan biri Console ekranıdır.
Console sayesinde JavaScript kodlarımızı hızlı bir şekilde çalıştırabilir ve sonuçlarını görebiliriz.
Chrome'da geliştirici araçlarını açmak için:
F12
tuşuna basabiliriz.
Daha sonra:
Console
sekmesine geçebiliriz.
Buraya doğrudan JavaScript kodları yazabiliriz.
Örneğin:
console.log("Merhaba!");
Sonucu:
Merhaba!
şeklinde görebiliriz.
8. console.log() Kullanımı
console.log() JavaScript öğrenirken en sık kullanacağımız komutlardan biridir.
Bir değeri Console ekranında görmek için kullanılır.
Örneğin:
console.log("Merhaba Dünya!");
Console:
Merhaba Dünya!
Bir sayı da yazdırabiliriz:
console.log(100);
Sonuç:
100
Matematiksel işlem de yapabiliriz:
console.log(10 + 20);
Sonuç:
30
Başka bir örnek:
console.log("JavaScript öğreniyorum"); console.log(10 + 20); console.log(2026);
Console ekranında:
JavaScript öğreniyorum 30 2026
sonuçlarını görürüz.
9. İlk JavaScript Uygulamamız
Şimdi öğrendiklerimizi küçük bir uygulama ile deneyelim.
Console ekranını açın ve aşağıdaki kodları çalıştırın:
console.log("Merhaba!"); console.log("JavaScript öğreniyorum."); console.log(10 + 20);
Çalıştırdığınızda:
Merhaba! JavaScript öğreniyorum. 30
sonucunu görmelisiniz.
Şimdi kodu kendinize göre değiştirelim:
console.log("Benim adım ..."); console.log("JavaScript öğreniyorum."); console.log(2026 - 2000);
Buradaki ... bölümünü kendi adınızla değiştirmeyi deneyin.
Ayrıca farklı matematiksel işlemler yaparak Console'da sonuçlarını inceleyin.
Örneğin:
console.log(50 + 25); console.log(100 - 40); console.log(10 * 5); console.log(100 / 4);
10. Mini Kontrol
Dersimizi tamamlamadan önce kendimizi test edelim.
Soru 1
Web sayfasının yapısını hangi teknoloji oluşturur?
Cevap: HTML
Soru 2
Web sayfasının görünümünü hangi teknoloji belirler?
Cevap: CSS
Soru 3
Web sayfasına davranış ve etkileşim kazandıran teknoloji hangisidir?
Cevap: JavaScript
Soru 4
JavaScript kodlarını tarayıcıda hızlıca denemek için hangi araç kullanılabilir?
Cevap: Console
Soru 5
Console ekranına bilgi yazdırmak için hangi komutu kullanırız?
Cevap:
console.log()
Ders Özeti
Bu derste JavaScript'in temellerine giriş yaptık.
Öğrendiğimiz temel noktalar:
JavaScript bir programlama dilidir.
Web sayfalarına davranış ve etkileşim kazandırabilir.
HTML sayfanın yapısını oluşturur.
CSS sayfanın görünümünü belirler.
JavaScript sayfanın davranışını kontrol eder.
JavaScript tarayıcılarda JavaScript motorları tarafından çalıştırılabilir.
JavaScript kodları HTML içerisindeki <script> etiketiyle veya harici .js dosyalarıyla kullanılabilir.
console.log() ile Console ekranına bilgi yazdırabiliriz.
Unutma!
HTML → Yapı
CSS → Görünüm
JavaScript → Davranış
Bu üçlü, web geliştirme yolculuğumuzun temelini oluşturacaktır.
Bir sonraki derste JavaScript'te değişkenler ve veri saklama konusuna geçerek artık daha gerçek programlar yazmaya başlayacağız.
Yorumlar