Web Sayfasına JavaScript Kodu Ekleme – Web Tasarım & Programlama
Javascript Web Tasarım

Web Sayfasına JavaScript Kodu Ekleme

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.

Ö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.

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.

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.

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.

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 .

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box