1-)JavaScript kodları bir web sayfasına iki farklı şekilde eklenebilir. Bunlardan birincisi “head” etiketleri arasında “script” etiketleri arasında kullanımıdır. Bu yöntemde javaScript kodları html sayfasını içinde çalışmaktadır. Kullanımına basit bir örnek vermek gerekirse;
2-)Yukarıdaki örnek inline (satıriçi) kullanımına örnektir. Görüldüğü gibi JavaScript kodları html sayfası içinde head etiketlerinde script etiketleri içine yazılmıştır. Sayfamızı çalıştırıp buton’ a tıkladığımızda aşağıdaki sonuç elde edilecektir.
Şimdi de aynı harici olarak hazırlanan JavaScript dosyasının html dosyasına nasıl ekleneceğine bakalım. Bu işlemde oldukça basittir. Yapmamız gereken .js uzantılı içinde javaScript kodlarının bulunduğu dosyayı hazırlamak ve .html dosyamızda bu dosyayı göstermektir.
İlk olarak harici.js isimli dosyamızı hazırlayarak başlayalım. Bu işlem html dosyası hazırlamak gibidir. Tek fark dosya uzantısının .js olmasıdır.
3-)JavaScript dosyamızı hazırladık. Şimdi bu dosyayı html dosyamıza ekleyelim. Bu işlem için aşağıdaki kodu kullanacağız.
4-)Yazmış olduğumuz bu kodu head etiketleri arasına ekleyebiliriz. Fakat bu çok önerilen bir yöntem değildir. Bunun nedeni Javascript dosyası yüklenip işlenmesi bitene kadar sayfa boş bir sayfa olarak görününecektir, tabi buda istenen bir durum değildir.
Bu sebeple kodumuzu body kapatma etiketinden hemen önce koyacağız. Bu yöntem web sayfalarımızın daha hızlı açılmasını sağlayacak bir yöntemdir.
Sonuç olarak html sayfamızın son hali aşağıdaki gibi olacaktır.
1-)
JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function Yaz()
{
document.write("<h1>www.realitycheats.com</h1>");
}
</script>
</head>
<body>
<form>
<input onClick="Yaz()" type="button" id="button" value="TIKLA"/>
</form>
</body>
</html>2-)
JavaScript:
function Yaz()
{
document.write("<h1>www.realitycheats.com</h1>");
}
JavaScript:
<script src="harici.js"></script>4-)
JavaScript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.realitycheats.com</title>
</head>
<body>
<form>
<input onClick="Yaz()" type="button" id="button" value="TIKLA"/>
</form>
<script src="harici.js"></script>
</body>
</html>
Son düzenleme:
