JavaScript farklı şekillerde konumlandırılır. Bir HTML sayfasının içine yazılabildiği, CSS gibi ayrı bir dosyada da yazılabilir.
Daha önceki örnek kodlarda gördüğünüz gibi HTML elementi içine satır içi olarak da JavaScript kodu yazılabilir. Bu genelde tercih edilen bir yol değildir.
Eğer çok kısa JavaScript kodunuz varsa bunu HTML ile birlikte aynı dosya içine yazabilirsiniz.
Çok uzun JavaScript kodunuz varsa bunu ayrı bir dosya içinde tutabilirsiniz.
HTML'de JavaScript kodları <script> ve </script> etiketleri arasına yazılır.
<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
</script>
<script> etiketi HTML sayfada <head> ya da <body> etiketi içinde bulunabilir.
<head> içinde <script> etiketinin konumlandırırsanız, kodunuz önce yüklenir. Bu bazen istenen bazen de istenmeyen bir durumdur.
Bu şimdilik kafanızı karıştırmasın.
Aşağıdaki örnekte bir JavaScript fonksiyonu sayfa içindeki <head> bölümününe yerleştirilmiştir.
Bu fonksiyon daha sonra bir buton tıklandığında çalışacak şekilde atama yapılmıştır.
function yaziyiDegistir() {
document.getElementById("demo").innerHTML = "Yazı değiştirildi.";
}
onclick ile bu metod butonla ilişkilendirilmiştir.Aşağıdaki örnekte JavaScript kodu <body> bölümüne yazılmıştır. İki örnek arasında teknik olarak hiç bir fark yoktur.
<!DOCTYPE html>
<html>
<body>
<h1>Bir Web Sayfası</h1>
<p id="demo">bu bir paragraf</p>
<button type="button" onclick="yaziyiDegistir()">Dene</button>
<script>
function yaziyiDegistir() {
document.getElementById("demo").innerHTML = "Yazı değiştirildi!";
}
</script>
</body>
</html>
Eğer JavaScript kodunuz çok fazlaysa, HTML etiketleri ve JavaScript kodlarını birbirinden ayırmak istiyorsanız o zaman JavaScript kodlarınızı harici bir dosyada tutabilirsiniz.
JavaScript dosyasının uzantısı .js olmalıdır. Dosya adını dilediğiniz gibi verebilirsiniz.
Yukarıdaki kodu script1.js adında harici bir dosyaya alırsak bu dosyayı <script src="script1.js"></script> şeklinde HTML dosyaya linkleyebiliriz.
<!DOCTYPE html>
<html>
<body>
<h2> Harici JavaScript</h2>
<p id="demo">bu bir paragraf!</p>
<button type="button" onclick="yaziyiDegistir()">Dene</button>
<p>yaziyiDegistir()metodu harici bir javascript dosyasında tutuluyor</p>
<script src="/dosyalar/script1.js"></script>
</body>
</html>
Harici JavaScript dosyasını ister <head> ister <body> bölümünde kullanabilirsiniz.
JavaScript kodlarını harici bir dosyada tutmak bazı avantajlar sağlar:
Harici JavaScript kullanımı en yaygın yöntemdir.
Hangi yöntemi kullanmalıyım derseniz çok az JavaScript kodunuz varsa <script> etiketi ile sayfaya ekleyin.
JavaScript kodunuz büyükse ve artacaksa harici dosya kullanın.
Birden fazla harici JavaScript dosyanız varsa sayfaya şu şekilde ekleyebilirsiniz:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Eğer kullanmak istediğiniz JavaScript dosyası başka bir web sayfasında / sunucusundaysa bu dosyaya referans verebilirsiniz.
Jquery gibi hazır JavaScript kütüphaneleri genelde bu yöntem ile sayfaya eklenir.
<script src="https://uzmanim.net/js/ornek.js"></script>
Sayfaya eklemek istediğiniz JavaScript dosyası başka bir klasörde olabilir. O zaman sayfaya eklerken dosya adının başında klasörün adını da belirtmeniz gerekir.
<script src="/klasor/script.js"></script> gibi.