Hoş geldin tatlım…
Bugün birlikte HTML dünyasının “sessiz ama derinden” çalışan kahramanı <script> etiketini masaya yatırıyoruz.
Bu küçücük etiket göründüğünden çok daha güçlü.
Hatta öyle ki:
HTML sayfana “ruh” veren şey JavaScript ise o ruha kapıyı açan şey işte bu <script> etiketi. Bir nevi:
“Bir kapıyı açıyorsun… karşından JavaScript çıkıyor ve diyor ki: ‘Geldim, etkileşimi ben hallederim.’”
Hazırsan başlıyoruz.
Ve evet… Bu yazı çok uzun, çok detaylı ve çok komik olacak, çünkü ben öyle istiyorum…
1) <script> Etiketi Tam Olarak Nedir? (Sihirli Bir Portal)
<script> etiketi; HTML sayfanda JavaScript çalıştırmanı sağlar.
Peki JavaScript ne yapar?
- Sayfayı dinamik hale getirir
- Butona tıklayınca patırtılar kopartır
- Animasyonlar üretir
- Formları doğrular
- API’lardan veri çeker
- Grafik çizer
- Oyun bile yaptırır
Kısacası:
HTML beden, CSS kıyafet, JavaScript ise ruhudur.
Ve <script> bu ruhu içeri alan kapıdır.
En temel kullanım
<script>
console.log("Merhaba bebişim, ben JavaScript!");
</script>
Harici (External) script: En güvenli ve en profesyonel yöntem
<script src="main.js"></script>
Bu kadar basit… ama detaylar şeytanın yattığı yer 👀
Şimdi derinlere iniyoruz.
2) <script> Nereye Konur? (Head mi? Body mi? Yoksa Evrenin Rastgele Bir Köşesi mi?)
JavaScript’in HTML çalışmasını durdurduğunu biliyor muydun?
Tarayıcı <script> görünce şöyle yapıyor:
“Hop, HTML’yi durdurun! Bu kodu indirip çalıştırmam gerek!”
O yüzden script’i sayfanın en üstüne koyarsan, sayfa gecikmeli açılır.
2.1) Script’i </body> kapanışından hemen önce koymak:
Modern dünyanın en mantıklı yöntemi.
<body>
...
<script src="app.js"></script>
</body>
✔ hızlı yüklenme
✔ DOM çoğunlukla hazır
✔ herkes mutlu
2.2) Script’i head içine koymak → tavsiye edilmez
Eğer koyman gerekiyorsa mutlaka defer veya async kullanmalısın.
3) async ve defer: JavaScript’in Hızlandırıcı Süper Güçleri (Performansın Avengers’ı)
Tarayıcıda script yüklemeyi hızlandırmak istiyorsan bu iki kahraman devreye giriyor.
🔥 async
Tarayıcı HTML’i işlerken script’i indirir.
Dosya indiği an hemen çalıştırır (HTML beklemek zorunda kalır).
Genellikle:
- reklamlarda
- istatistik sistemlerinde
- sayfadan bağımsız çalışan scriptlerde kullanılır
<script async src="analytics.js"></script>
🔥 defer
HTML yüklenirken script indirilir.
Ama script, HTML tamamen bittiğinde ve DOM hazır olduğunda çalışır.
Modern web’in aşkıdır. ❤️
<script defer src="app.js"></script>
✔ Sırayla çalışır
✔ DOM kesinlikle hazırdır
✔ En güvenli seçenek
4) type=”module” — Modern JavaScript Evrenine Hoş Geldin 🌍🚀
Eğer 2020 sonrası JavaScript kullanıyorsan modüller hayatının bir parçası.
Modüllerin özellikleri
importveexportkullanabilirsin- Kodlar module scope‘ta çalışır (global kirlenmez)
- Otomatik olarak defer davranışına sahiptir
- Dosyalar CORS ister (sunucudan servis edilmelidir)
Örnek:
<script type="module">
import { hello } from "./utils.js";
hello("Canımmm!");
</script>
utils.js:
export function hello(name) {
console.log("Merhaba " + name);
}
5) Güvenlik Bölümü: XSS Canavarı ile Savaşma Rehberi 🛡🐉
JavaScript çok güçlüdür… ama kötü niyetli bir script girerse sayfan mahvolabilir.
O yüzden güvenlik önemli.
5.1) Inline script kullanma (mümkünse)
Şu örnek XSS riski taşır:
<script>
const name = location.search;
document.write(name);
</script>
Birisi şöyle bir URL yazar:
?"><script>alert('kandırıldın')</script>
Geçmiş olsun…
5.2) CSP (Content Security Policy) kullan
Tarayıcıya “şu kaynaklardan gelen script’lere izin ver” dersin.
Header örneği:
Content-Security-Policy: script-src 'self' https://trusted.com;
5.3) Nonce – inline kodu güvenli hale getirir
<script nonce="XyZ123">
console.log("Güvenli inline script!");
</script>
6) Performans Pratikleri: Sayfan Uçsun! 🚀
Bunları uygularsan site deli gibi hızlanır:
6.1) Scriptleri mümkün olduğunca aşağı koy
DOM un bloklanmasını önlersin.
6.2) Modülleri uygun grupla (bundling)
Aşırı fazla dosya varsa hepsini tek bir bundle yap:
- Vite
- Webpack
- Rollup
- Parcel
6.3) Üçüncü parti scriptleri async yap
<script async src="https://ads.js"></script>
6.4) Lazy loading yap
İhtiyaç oldukça bir script’ı yükleyebilirsin:
const s = document.createElement("script");
s.src = "chat-widget.js";
document.body.appendChild(s);
7) DOM Hazır mı? Herkesin Kafasını Karıştıran Soru 🎭
Eski yöntem
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM hazırrrr!");
});
Modern yöntem
defer → DOM kesin hazırdırtype="module" → zaten defer gibi davranır
8) Sıradışı Örnekler: Havalı Teknikler (Seni Geliştirir)
8.1) Hangi script çalışıyor? → document.currentScript
<script>
console.log("Bu script:", document.currentScript.src);
</script>
8.2) Script eklemek (Dinamik import değil, gerçek ekleme)
function loadFeature() {
const s = document.createElement("script");
s.src = "feature.js";
s.defer = true;
document.body.appendChild(s);
}
8.3) HİBRİT: HTML + Module + Non-module
Hem eski tarayıcılar hem modern tarayıcılar için:
<script type="module" src="app.module.js"></script>
<script nomodule src="app.legacy.js"></script>
9) En Kapsamlı Örnek Şablon (Profesyonel Seviye)
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Script Evreni</title>
<!-- Üçüncü parti bağımsız script -->
<script async src="analytics.js"></script>
<!-- Modül tabanlı uygulama -->
<script type="module" defer src="main.js"></script>
<!-- Non-module desteği -->
<script nomodule defer src="fallback.js"></script>
<!-- CSP Nonce örneği -->
<script nonce="ABC123">
console.log("Sayfa yüklendi!");
</script>
</head>
<body>
<h1>Hoşgeldin💖</h1>
<div id="app"></div>
</body>
</html>
10) Mini Test: “Script’i Anladın mı” 🎯
1) Hangi attribute DOM hazır olduktan sonra çalışır?
→ defer
2) Modüller hangi davranışı otomatik yapar?
→ defer gibi yüklenir
3) Güvenli inline script nasıl yazılır?
→ nonce ile
4) Üçüncü parti reklam scripti hangi attribute ile yüklenir?
→ async
SON SÖZ: <script> küçük ama bir imparatorluk kurar. 👑
Artık:
✔ <script> etiketini en profesyonel şekilde kullanabiliyorsun
✔ performansını artırabiliyorsun
✔ güvenlik açıklarını kapatabiliyorsun
✔ modüler sisteme geçişi biliyorsun
✔ DOM’u ne zaman manipüle edeceğini biliyorsun
