Sayfaları oluştururken bazen sayfaya yerleştirilen butona tıkladığınızda tarayıcıda yazar tarafından programlanmış bir olay meydana gelmesi gerekebilir. Bunu yapmak için, oluşturulan belgeye JavaScript kodunu yerleştirmeniz ve onu gerekli düğmeye bağlamanız gerekir. Amaçlanan olayı uygulamak için gereken kod miktarına bağlı olarak, düğmeyi koda bağlamak için farklı yollar kullanabilirsiniz.
Talimatlar
Aşama 1
Çoğu zaman, JavaScript kod çağrıları onclick olayına, yani farenin sol düğmesine tıklanmasına bağlıdır. Gerçekleşmesi gereken eylemi açıklamak için çok fazla koda ihtiyacınız yoksa, bunların tümü doğrudan düğme etiketine yerleştirilebilir. Örneğin, tarayıcıyı bir düğmeye tıklandığında basit bir mesaj gösterecek şekilde programlamak için JavaScript komut dosyası şöyle görünür: uyarı ('Kod çalıştı!') Yalnızca bir ifade ve metin alır. Tüm bunlar, düğme etiketinin onclick olay açıklamasına kolayca yerleştirilebilir. Bu durumda, sayfanın en basit HTML kodu şöyle görünebilir:
Kodlu düğme
Kodlu düğme
Adım 2
Daha karmaşık JavaScript kodunu doğrudan düğme etiketine yerleştirmek pratik değildir. Bundan ayrı bir işlev yapmak ve çağrısını onclick olayına koymak daha kolaydır. Örneğin, bu, bir düğmenin tıklanma zamanını içeren bir pencereyi gösteren bir işlev gibi görünebilir: function getTime () {
var şimdi = yeni tarih ();
alert ("Çalışan kod" + now.getHours () + ":" + now.getMinutes ());
} Sayfanın başlığına (ve etiketleri arasına) yerleştirilmelidir. Düğmeye bağlı bu işleve yapılan bir çağrı ile sayfanın tam kodu şöyle görünebilir:
İşlev çağrı düğmesi
function getTime() {
var şimdi = yeni tarih ();
alert ("Çalışan kod" + now.getHours () + ":" + now.getMinutes ());
}
İşlev çağrı düğmesi
Aşama 3
Aynı JavaScript kodu ile tanımlanabilecek bir olay meydana gelmelidir. Örneğin, mesaj kutusuna basılan düğmenin kimliğini eklemek için önceki işlevi biraz değiştirebilirsiniz: function getTime (btnString) {
var şimdi = yeni tarih ();
uyarı (btnString + "tıklandı" + now.getHours () + ":" + now.getMinutes ());
} Bu tür üç düğme içeren bir sayfanın tam kodu şöyle görünebilir:
Bir işlev çağrısı ile üç düğme
function getTime (btnString) {
var şimdi = yeni tarih ();
uyarı (btnString + "tıklandı" + now.getHours () + ":" + now.getMinutes ());
}
İlk düğme
İkinci düğme
Üçüncü düğme
