Yükleniyor...

HTML’de JavaScript

Önceki derste erişilebilirlik yapıyı kullanılabilir kılıyordu. JavaScript bu HTML’nin üstüne davranış ekler: tıklama, metin güncelleme, sunucu. Bu ders HTML tarafında kalır: sayfa <script> ile betikleri nasıl yükler — tam bir JavaScript dil kursu değil.

Betik yükleme neden önemli

Tarayıcılar önce HTML çizer. Betikler bunu geciktirebilir, yanlış yolda sessizce düşebilir veya işaretlemede olması gereken içeriği gizleyebilir. <script> nereye, ne zaman src, ne HTML’e ait — sayfayı dürüst tutar. Erişilebilirlik alışkanlıkları geçerlidir.

Doğrudan yanıt

1) Küçük parça için <script>…</script> veya dış dosya için <script src="app.js"></script>. 2) Mantık büyüyünce dış .js. 3) Birçokları betikleri body sonuna yakın koyar. 4) Anlamlı metin ve denetimleri HTML’de tutun. 5) Modern uygulamalar type="module" kullanabilir. 6) Bu kurs yalnızca gömmeyi kapsar.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Gerçek düğmeyle satır içi betik

Küçük sayfa: id’li gerçek <button>, sonra tıklamayı dinleyip metni değiştiren <script>. İşaretleme erişilebilir kalır; betik yalnızca davranış ekler.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Satır içi demoyu okumak

  • Düğme gerçek HTML — JS olmadan da anlamlı
  • id betiğe kararlı kanca verir
  • script bloğu birkaç satır içi JS tutar
  • addEventListener davranışı bağlar; düğmeyi değiştirmez
  • Betik çalışmazsa «Say hi» kalır
  • Önceki ders yapı; burada davranış bağlama

src ile dış betik

Aynı fikir ayrı dosyada daha iyi ölçeklenir. HTML yalnızca yolu bildirir; mantık app.js’te. Yollar klasörünüzle uyuşmalı.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Dış kalıbı okumak

  • src dosyayı getirip çalıştırır
  • HTML kısa kalır; davranış ortak .js’te
  • Yanlış yol = yüklenmez — Network kontrol edin
  • Betiği düğmeden sonra koyun veya öğeyi bekleyin
  • Dev satır içi bloklardan bunu tercih edin
  • Sonraki HTML dersleri; derin JS ayrı kurs

Davranış nasıl yüklenir

  • Çok küçük demo: denetimin yanında satır içi yeterli olabilir
  • Yeniden kullanılan/büyüyen: app.js ve src
  • Kritik metin/gezinme: önce HTML, sonra JS
  • Bozuk hissi: önce src yolunu kontrol edin
  • Erişilebilirlik: button/a/label tutun — tıklanabilir div değil
  • Tam dil çalışması: döngü/çerçeveler JS kursunda

Alıştırma — HTML betiği yükler

  1. Satır içi demoyu kopyalayın; tıklayıp değişimi doğrulayın.
  2. Dinleyiciyi app.js’e taşıyın, src kullanın, doğrulayın.
  3. Yolu bozun (wrong.js); düğme «Say hi» kalsın.
  4. Betiği tamamen kaldırın; HTML hâlâ anlamlı olsun.
  5. Yeni id’li ikinci düğme ve bir dinleyici daha.
  6. Cümle: HTML içerik ve yapının sahibidir; script isteğe bağlı davranış yükler.
  7. Sonraki ders: kısa HTML özeti.

Kolay hatalar

  • Kritik cümleler yalnızca JavaScript içinde
  • src’de yazım hatası veya yanlış klasör
  • Bakımı zor dev satır içi betikler
  • Öğre var olmadan betiği çalıştırmak
  • Erişilebilir düğmeleri tıklanabilir div ile değiştirmek
  • Bu dersi tam JS müfredatı saymak
  • Erişilebilirlik alışkanlıklarını unutmak

Özet

  • script HTML sayfasına JavaScript yükler
  • Küçük demolar için satır içi; büyürken dış .js için src
  • İçerik görünsün ve kullanılabilir kalsın diye betikleri yerleştirin
  • Gerçek içeriği ve erişilebilir denetimleri HTML’de tutun
  • Erişilebilirlik yapıydı; bu ders davranış kablolaması
  • Sonraki: buraya kadarki yolun kısa HTML özeti

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 58 / 68
Html Ders