JavaScript derslerine giriş yaptığımızda şimdi ise JavaScript kodlarını nereye ve ne şekilde yazabileceğimizi bilmektir. Sizlere pek önemsiz gelebilir fakat önemli olan konu eklediğiniz yerlere göre internet sitenizin hızı ya yavaşlayabilir yada tam tersine hızlanabilir.
JavaScript kodları nereye yazılır sorusu ile karşı karşıya geldiğinizde asıl önemli olan bilmeniz gereken şey ise bizim HTML içine yazıp bunları istediğimiz taktirde dışarıdan çekebilir istediğimiz zaman ise sayfanın en üst kısmında oluşturabilir yada hemen kullanacağımız yerde oluşturuyor olabiliriz.
JavaScript Kodları Nerelere Yazılabilir ?
JavaScript kodlarını temel olarak 3 farklı yere yazabiliriz. Bunlar ise HTML ile oluşturacağımız internet sitesinde head ve body kısmı içine diğer üçüncü olan yöntem ise dışarıdan bir .js uzantılı bir dosya içine ekleyeceğimiz tüm JavaScript kodlarını yazabilir ve ardından ise bu yazmış olduğumuz JavaScript uzantılı dosyayı kullanacağımız sayfa içine çağırabiliriz.
[accordion] [accordion_content title=”Head Kısmı İçine JavaScript Kodu Yazmak” icon=”” active=”active”] İnternet sitemizin head kısımları içine tıpkı CSS ‘te olduğu gibi JavaScript kodlarını yazabiliriz. Bunun için ise head kısmı içine script taglarını oluşturmamız yeterli olacaktır.
<head>
<script>
function ilkFunction() {
document.getElementById("demo").innerHTML = "Merhaba ben Gökmen Efsun"; }
</script>
</head>
<body>
<p id="demo">Merhaba JavaScript</p>
<button type="button" onclick="ilkFunction()">Tıkla da Gör</button>
</body>Yukarıda yer alan örnekte JavaScript kodlarını head kısmı içinde oluşturup ardından JavaScript ‘in HTML değiştirme özelliğini kullanarak butona tıklandığında Merhaba JavaScript yazsının değişmesini sağladık.[/accordion_content]
[accordion_content title=”Body Kısmı İçine JavaScript Kodları Yazmak” icon=”” active=”active”]Bu sefer ise illa ki head kısmı içine JavaScript kodlarını yazmak istemeyebiliriz. Her hangi bir durumda duruma göre JavaScript kodlarını anlık olarak body kısmı içine ekleyebiliriz. Eklediğimiz kodlar body kısmı içinde olur ise sayfamız yüklenir yüklenmez head kısmında bu kodları yüklemek ile uğraşmayıp daha hızlı bir şekilde yüklenecektir.
<body>
<script>
function ilkFunction() {
document.getElementById("demo").innerHTML = "Merhaba ben Gökmen Efsun"; }
</script>
<p id="demo">Merhaba JavaScript</p>
<button type="button" onclick="ilkFunction()">Tıkla da Gör</button>
</body>Yukarıda yer alan örnekte’de butona tıklanıldığı zaman JavaScript kodları çalışacak ve ardından butona tıklandığında ise Merhaba JavaScript yazısı Merhaba ben Gökmen Efsun yazısı ile değişecektir.[/accordion_content][accordion_content title=”Harici JavaScript Dosyası Ekleme” icon=”” active=”active”] Bu kısımda ise HTML içeriğine hiç bu kadar JavaScript kodu yazmadan nasıl oluşturmuş olduğumuz JavaScript sayfasını çekme işlemini yapacağımızdan bahsedeceğim. Bunun için ise :
<head> <script src ="oluşturduğunuzscript.js"></script> </head> <body> <p id="demo">Merhaba JavaScript</p> <button type="button" onclick="ilkFunction()">Tıkla da Gör</button> </body>
Bu sayede de yukarıda ki örneklerde var olan function komutlarını harici bir dosya oluşturup uzantısını .js olarak kaydediyoruz. Ardından da src etikti sayesinde bu dosyayı ismi ile çağırıp bu sayfada gerekli JavaScript komutlarını çalıştırmasını sağlayabiliriz.[/accordion_content] [/accordion]
Yukarıda yer alan örnekler sayesinde JavaScript kodları ekleme işlemini üç farklı şekilde gerçekleştirebiliriz. Oldukça basit ama faydalı olan bu konuyu ise unutmamak gerekir. Çoğu zaman ise oluşturulan JavaScript kodları harici bir dosyadan çekilerek eklenmektedir.