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;
|
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> <meta charset="utf-8"> <title>Untitled Document</title> <script> function Yaz() { document.write("<h1>www.yazilimkodlama.com</h1>"); } </script> </head> <body> <form> <input onClick="Yaz()" type="button" id="button" value="TIKLA"/> </form> </body> </html> |
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.
|
1 2 3 4 5 6 |
function Yaz() { document.write("<h1>www.yazilimkodlama.com</h1>"); } |
JavaScript dosyamızı hazırladık. Şimdi bu dosyayı html dosyamıza ekleyelim. Bu işlem için aşağıdaki kodu kullanacağız.
|
1 2 3 |
<script src="harici.js"></script> |
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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> </head> <body> <form> <input onClick="Yaz()" type="button" id="button" value="TIKLA"/> </form> <script src="harici.js"></script> </body> </html> |
Sayfamızı görüntülediğimizde ve butona tıkladığımızda aynı sonuç alınacaktır.
merhabalar benim pc de css çağırma kodu çalışmıyor yazdııpnız kodun aynısını yazdığım halde çalışmıyor uygulamayı sildim yükledim ama olmadı lütfen yardımcı olur musunuz gmailden döner misiniz?
Teşekkürler tam aradığım cevap, basitmiş.