Sefik.net - Javascript Kullanımı

Javascript Kullanımı

Bir html sayfasında javascript kodları <script> ... </script> etiketleri arasına yazılabilir.

<script>
     alert("Merhaba");
</script>

Bu yapı html sayfasında ihtiyaca göre body etiketleri arasına veya head etiketleri arasına eklenebilir.

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>Merhaba</h1>");
document.write("<p>Bu metin javascript ile yazıldı.</p>");
</script>
.
.
</body>
</html>

Bu yukarıdaki kullanımlarda javascript komutları sayfa yüklendiğinde çalışacaktır. Genellikle javascript komutlarının bir olaya bağlı olarak çalıştırılması istenir. Bu durumda komutlar bir fonksiyon içerisine yazılır. Fonksiyon içerisindeki komutlar sayfa yüklendiğinde kullanıma hazır olacaktır. Komutlar sadece bir olaya bağlı olarak fonksiyon çağırıldığında çalışacaktır.

Örnek: Javascript fonksiyon örneği

<!DOCTYPE html>
<html>
<head>
<script>
function Mesaj() {
   alert("Merhaba") ; 
}
</script>
</head>
<body>
<a href=# onclick="Mesaj()">Tıkla</a>
</body>
</html>

Aşağıda tarayıcı çıktısında verilen linke tıklandığında fonksiyon çağrılarak alert komutu çalışacaktır. Eğer aler komutu bir fonksiyon içerisine yazmak yerine direk script etiketleri arasına yazılsaydı sayfa yüklendiğinde alert komutu direk çalışacaktı.

Tıkla

Harici Bir Javascript Dosyası Kullanma

Yukarıdaki örneklerde Javascript komutları bir html sayfası içine eklenmiştir. Javascript komutları harici bir dosyaya da yazılarak bu dosya, html içerisine dahil edilebilir. Javascript komutlarını ayrı bir dosyaya eklememiz aynı kodları farklı html sayfalarına daha kolay eklememizi sağlar ve bu şekilde gereksiz kod tekrarları engellenmiş olacaktır. Ayrıca html kodları ile javascript kodlarının iç içe olmasından dolayı bir kod karmaşasının oluşması engellenmiş olur.

Not : Komutlar harici bir dosyaya yazılırken script etiketleri kullanılmaz.

Örneğin ornek.js isminde bir dosya oluşturarak içerisine şu komutları yazalım.

Örnek : ornek.js

function Mesaj() {
   alert("Merhaba") ; 
}

Yukarıda oluşturduğumuz dosya dosyayı html sayfamızda eklemek için <script src="ornek.js"></script> satırlarını sayfamızda istediğimiz bir alan içerisinde (head, body) ekleyebiliriz.

<!DOCTYPE html>
<html>
<head>
<script src="ornek.js"></script>
</head>
<body>
<a href=# onclick="Mesaj()">Tıkla</a>
</body>
</html>

Ekleyen:admin