Yükleniyor...

JavaScript nereye yazılır

JavaScript’in davranış kattığını artık biliyorsunuz. Sıradaki soru pratik: tarayıcı kodu bulsun ve değiştirmek istediğiniz öğeler zaten var olsun diye kod nereye konur?

JavaScript bir HTML sayfasında nereye konulmalı?

JavaScript’i bir <script> öğesine koyun — etiketler arasında satır içi, ya da bir .js dosyasına src ile dışarıdan. Sayfaya dokunan günlük başlangıç işinde betiği </body> kapanmadan hemen önce koyun ki üstteki HTML hazır olsun. Kod büyüyünce dış dosyaya taşıyın ve aynı body-sonu alışkanlığını koruyun (sonra defer göreceksiniz).

Üç yerleştirme seçeneği bir bakışta

📊 JavaScript nerede yaşayabilir

Seçenek Nerede durur Başlayan için en iyi kullanım
Head içinde satır içi <head> içinde <script> Yalnızca küçük kurulum; öğeler yoksa riskli
Body sonunda satır içi </body> öncesi <script> Başlık veya metin değiştiren kısa demolar için varsayılan
Dış .js dosyası <script src="app.js"> (çoğu zaman body sonu) Mantık büyüyünce veya dosya paylaşılınca varsayılan

Head’de betik (tanıyın, dikkatli kullanın)

Head’deki betik erken çalışır; tarayıcı belgesi hâlâ okurken. Görünür içeriği geciktirebilir. Kod hemen getElementById ile aşağıda bir öğe ararsa henüz yoktur — sonuç null veya hata.

Head’de betik

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Head betiği ne zaman uygundur

  • DOM gerekmeyen bir mesaj kaydetmek veya basit değer
  • Modern özniteliklerle kitaplık yüklemek (sonra defer / async)
  • Bu kurstaki «bu paragrafı değiştir» demoları için varsayılanınız değil

Body sonunda betik (başlayan varsayılanı)

Önce ziyaretçinin ihtiyaç duyduğu işaretlemeyi koyun. Sonra betiği çalıştırın. Betiğin üstündeki id’li öğeler, yönergeler çalışırken belgede zaten vardır.

Body sonunda betik

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Bu alışkanlık neden yardımcı olur

  • Başlık ve paragraf betik bitmeden görünebilir
  • getElementById("title") gerçek bir düğüm bulur
  • Dil öğrenirken kısa demolar tek dosyada kalır
  • Sonra aynı yönergeleri fikri değiştirmeden dış dosyaya taşırsınız

Dış JavaScript dosyası (proje varsayılanı)

Yapıyı HTML’de, mantığı app.js’te tutun. Dosyayı src ile gösterin. Yollar, klasör vermedikçe HTML’e göredir.

app.js yükleyen HTML

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

Dış app.js

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Büyüdükçe dış dosya neden kazanır

  • Bir .js birden fazla sayfaya hizmet edebilir
  • Düzenleyiciler JavaScript’i kendi dosyasında daha net renklendirir
  • İşaretlemede kocaman <script> bloklarından kaçınırsınız
  • Yanlış src yolu sayfada sessizce başarısız olur — bir şey çalışmazsa Console ve Network’e bakın

Sıra önemlidir

Tarayıcı yukarıdan aşağı okur. Ayrıştırıcı betiğe ulaşınca çalışır (ileri öznitelikler sonra). İlk satır #title isterse o öğe HTML’de betiğin üstünde olmalı veya belgenin bitmesini beklemelisiniz. Body sonu bu sırayı tutturmanın basit yoludur.

Kendiniz deneyin

  1. Body-sonu örneğiyle where.html oluşturun. Açın ve başlığın güncellendiğini doğrulayın.
  2. textContent dizisini değiştirin, kaydedin, yenileyin.
  3. Dış örnekteki JavaScript ile app.js oluşturun. where.html’de </body> öncesinde yalnızca <script src="app.js"></script> kalsın.
  4. Geçici olarak app.js adını değiştirin veya src yolunu bozun, yenileyin ve Console’a bakın — sonra yolu düzeltin.
  5. İsteğe bağlı: aynı betiği defer olmadan head’e taşıyın; getElementById başarısız olabilir — sonra body sonuna geri alın.

Yaygın hatalar

  • DOM güncelleyen betiği head’e koyup getElementById’nin öğe yokken çalışması
  • Yazım hatası veya yanlış klasörle <script src="app.js"> — sayfa iyi görünür ama hiçbir şey çalışmaz
  • Ortak bir .js yerine her HTML’de yüzlerce satır satır içi bırakmak
  • Bu dersi CSS bağlama ile karıştırmak: stiller <link> / <style>; davranış <script>

Özet

  • JavaScript bir <script> içinde yaşar — satır içi veya .js dosyasına src ile
  • Kod sayfa öğelerine dokununca body sonu başlangıç dostu varsayılandır
  • Head betikleri erken çalışır; yükleme özniteliklerini bilene kadar orada DOM güncellemeyin
  • Demolar büyüyünce dış dosyalar proje varsayılanıdır
  • Betik sırası, ileri seçenekler gelene kadar belge sırasını izler
  • Çalışan satır içi demoyu HTML + app.js diye bölerek pratik yapın

🧠 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

❓
6
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 2 / 4
Javascript Ders