Bu yazımda JavaScript kodları nereye yazılır? Harici JavaScript dosyalarını Html sayfalarına nasıl referans verebiliriz? Dahili JavaScript kodlarını Html sayfalarında nereye yazabiliriz? ve Son olarak satır içi JavaScript kodları nasıl yazılır? sorularına cevap bulacağız.
JavaScript kodlarını 3 farklı şekilde yazabiliriz.
1 – Harici JavaScript Kodları Nereye Yazılır?
Bu şekilde tanımlama için .js uzantılı bir dosya oluşturup tüm JavaScript kodlarımızı bu dosyanın içerisine yazarız.
Bu dosyayı hangi Html sayfasında kullanmak istiyorsak o sayfanın <body></body> etiketleri içerisinde en altta veya <head></head> etiketleri arasında tanımlarız.
Referans verirken <script></script> etiketinin src attribute’una JavaScript dosyamızın yolunu yazıyoruz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <!-- Harici JavaScript Dosyası Ekleneme Yeri 1 --> <script src="main.js"></script> </head> <body> <!-- Harici JavaScript Dosyası Ekleneme Yeri 2 --> <script src="main.js"></script> </body> </html> |
En kullanışlı yöntemdir. Çünkü aynı JavaScript kodunu referans verdiğimiz tüm web sayfalarında kullanabiliriz. Aynı zamanda tüm web sayfalarının JavaScript yönetimini tek dosyadan yapmış olacağız.
Harici JavaScript dosyası kullanmanın diğer birkaç avantajını şöyle sıralayabiliriz:
- Html ile JavaScript kodlarını ayırmış oluruz.
- Html ve JavaScript kodlarının okunmasını ve bakımını kolaylaştırmış oluruz.
- Önbelleğe alınan JavaScript dosyaları sayfa yüklemelerini hızlandırır.
Şimdi bir örnek üzerinde daha iyi anlamaya çalışalım.
Örneğin main.js dosyamız olsun. İçerisinde küçük bir JavaScript kodu yazıp Html sayfamıza ekleyelim.
main.js Dosyası
|
1 2 3 4 5 |
function myFunction() { document.getElementById("test").innerHTML = "Jquery Dersleri"; } |
Yukarıdaki JavaScript dosyasını Html sayfamıza referans verelim.
Html Sayfası
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <p id="test">JavaScript Dersleri</p> <button onclick="myFunction()">Tıkla</button> <script src="main.js"></script> </body> </html> |
Html sayfalarına birden fazla JavaScript dosyasını referans verebiliriz. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <script src="main.js"></script> <script src="slider.js"></script> <script src="popup.js"></script> </body> </html> |
Dışarıdan referanslar ile de JavaScript dosyalarını Html sayfalarımıza ekleyebiliriz. Örneğin en popüler JavaScript kütüphanelerinden olan Jquery‘i projemize dahil edelim.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> </body> </html> |
2 – Dahili JavaScript Kodları Nereye Yazılır?
Html sayfasının içerisinde <script></script> etiketi oluşturup içerisine JavaScript kodlarımızı yazabiliriz.
Genelde <body></body> etiketleri içerisinde en altta <script> etiketi oluşturulur. Yazılan kodlar sadece o sayfadaki Html etiketlerine uygulanır.
Html Sayfası
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <p id="test"></p> <script> document.getElementById("test").innerHTML = "JavaScript Dersleri"; </script> </body> </html> |
JavaScript kodlarını yazabileceğimiz bir diğer yer ise <head></head> etiketleri içerisidir. Örneğin;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("test").innerHTML = "Jquery Dersleri"; } </script> </head> <body> <p id="test">JavaScript Dersleri</p> <button onclick="myFunction()">Tıkla</button> </body> </html> |
3 – Satır İçi JavaScript Kodları Nereye Yazılır?
Html sayfasındaki etiketlerin içerisinde kullanabileceğimiz bazı nitelikler ile JavaScript kodlarını yazabiliriz.
Bu yöntem tavsiye edilmez. Çünkü Html kodları ile JavaScript kodları iç içe geçeceği için karışıklık oluşacaktır.
Html Sayfası
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <button onclick="alert('Butona tıklandı!')">Tıkla!</button> </body> </html> |
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
JavaScript Nedir? JavaScript Ne İşe Yarar?
Yeni bir yazımda görüşmek üzere.
){kind=link}