Bu yazımızda hazırlamış olduğumuz bir web sayfasına JavaScript kodu nasıl eklenir? bunu göreceğiz. Bir HTML sayfasında JavaScript kodları <script> </script> etiketleri arasına yazılır.
İlk örneğimizi inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> </head> <body> <h2>JavaScript Kullanımı</h2> <p id="kutu"></p> <script> document.getElementById("kutu").innerHTML = "Merhaba JavaScript"; </script> </body> </html> |
Örneğimizde Html sayfasında bulunan kutu ismindeki div içeriğinin JavaScript kodu ile içeriğinin “Merhaba javaScript” olarak değiştirilmesini sağlamış olduk.
Ekran Çıktımız ise şu şekilde olacaktır.
script kodlarını istersek bir fonksiyon olarak tanımlayıp bir olaya (Örneğin button tıklanması) atayabiliriz. Bununla ilgili örnekleri yazının devamında görebilirsiniz.
JavaScript Kodları Nereye Yazılmalı?
Html belgesinde kullanılacak JavaScript kodlarını <head> </head> etiketleri arasına ya da <body> </body> etiketleri arasına yazıp çalıştırabilirsiniz.
Örnek 1: Bu örneğimizde script kodlarını <head> </head> bölümünde oluşturalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <script> function degistir() { document.getElementById("kutu").innerHTML = "www.yazilimkodlama.com"; } </script> </head> <body> <h2>JavaScript Dersleri</h2> <p id="kutu">JavaScript kodları head bloğunda tanımlanabilir.</p> <button type="button" onclick="degistir()">Tıkla</button> </body> </html> |
Kodları inceleyelim <head> </head> etiketleri içinde oluşturduğumuz script kodlarında id‘ si kutu olan div içeriğinin www.yazilimkodlama.com olarak ayarlandığını görüyoruz.
body kısmında ise bu fonksiyonun bir button oluşturularak onclick olayı yani tıklama olayı ile çağrıldığını görüyoruz.
Sayfamızı çalıştıralım.
Örnek 2 : Yukarıdaki örneğin aynısını script kodlarını <body> etiketine yazarak çalıştıralım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> </head> <body> <h2>JavaScript Dersleri</h2> <p id="kutu">JavaScript kodları head bloğunda tanımlanabilir.</p> <button type="button" onclick="degistir()">Tıkla</button> <script> function degistir() { document.getElementById("kutu").innerHTML = "www.yazilimkodlama.com"; } </script> </body> </html> |
Sayfayı çalıştırdığımız zaman Örnek 1 de <head> etiketi içine yazmış olduğumuz görüntünün aynısının oluştuğunu göreceğiz.
Görüldüğü gibi JavaScript kodlarının sayfada head veya body etiketine yazılması sonucu değiştirmemektedir. Fakat tavsiye edilen JavaScript kodlarının </body> kapatma etiketinin hemen üstüne yazılmasıdır. Bunun sebebi komut dosyası derleme işleminin <head> kısmına yazıldığında sayfa açılma hızını yavaşlatmasıdır.
Script kodları </body> kapatma etiketi üstüne yazıldığında sayfa görüntüleme hızı artacaktır.
Harici JavaScript
JavaScript kodları harici dosyalara yazılarak kullanılabilir. Harici javaScript dosyası aynı kodların birden fazla sayfada kullanılması durumunda büyük kolaylık sağlayacaktır.
Oluşturulan bu JavaScript dosyalarının dosya uzantısı “.js” dir.
Harici JavaScript dosyası sayfaya aşağıdaki gibi eklenir.
|
1 2 3 |
<script src="js-1.js"></script> |
Yukarıdaki satırda js-1.js ismli JavaScript dosyasının yolu gösterilmiştir.
.html sayfası şu şekilde olacaktır. Bu durumda scrpt kodları .js uzantılı dosyada yazılacaktır. İlerleyen konularda bu şekilde kullanım örneğine değinilecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> </head> <body> <h2>JavaScript Dersleri</h2> <p id="kutu">JavaScript kodları head bloğunda tanımlanabilir.</p> <button type="button" onclick="degistir()">Tıkla</button> <script src="js-1.js"></script> </body> </html> |
JavaScript kodlarını harici olarak yerleştirmenin bazı avantajları vardır:
HTML ve kodu birbirinden ayırır.
HTML ve JavaScript’in okunmasını ve bakımını kolaylaştırır.
Önbelleklenen JavaScript dosyaları, sayfa yüklemelerini hızlandırır .
