Anasayfa
Forum
Hakkında
Ders 17: HTML ile JavaScript Bağlantısı
Ders 17: HTML ile JavaScript Bağlantısı
Neden?
JavaScript etkileşimi HTML elementlerini seçerek ve olayları dinleyerek kurar.
Ne öğreneceğiz?
Bu derste script, defer, id ve temel olay bağlantısını öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Yola
JavaScript dosyasını HTML sayfasına ekleyebilecek ve temel bir etkileşim oluşturabileceksiniz.
PHP Kod:
<script src="js/script.js" defer></script>
defer, HTML belgesi çözümlendikten sonra JavaScript'in çalışmasını sağlar. script.js dosyası:
PHP Kod:
const buton = document.querySelector('#mesaj-buton');
const sonuc = document.querySelector('#sonuc');
buton.addEventListener('click', function () {
sonuc.textContent = 'Butona tıkladınız.';
});
HTML:
PHP Kod:
<button id="mesaj-buton" type="button">Mesaj göster</button>
<p id="sonuc"></p>
JavaScript, HTML elementlerini seçebilir ve içeriklerini değiştirebilir. Ancak sayfanın temel içeriği JavaScript olmadan da anlamlı olmalıdır. JavaScript çalışmadığında ana bilgi tamamen kaybolmamalıdır.
