, JavaScript Kullanım Özellikleri | Nurcan Yurttaş

JavaScript Kullanım Özellikleri

JavaScript Kullanım Özellikleri
JavaScript Kullanım Özellikleri
Kullanıcı Puanı: 0 (0 votes)

 

Bu yazımda JavaScript  kullanım özelliklerine iki örnek vereceğim.

Birinci yöntem; javascript kodunu kullanacağınız elamana yazarak alacağınız sonuçtur.

aşağıda bulunan örnekte button elemanının onclick özelliğene “document.getElementById” ile bir id veriyoruz daha sonra  “.innerHTML” ile html bir döküman ekliyoruz.

son olarak button elemanına vermiş olduğumuz id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<button type=”button” onclick=”document.getElementById(‘birinci’).innerHTML = ‘eleman ile deneme'”>
eleman deneme </button>

<p id=”birinci”>eleman ile deneme sonucu buraya gelecek</p>

 

ikinci yöntem; javascript kodunu fonksiyon oluşturarak alacağınız sonuçtur.

aşağıda bulunan örnekte fonsiyonun ismi “ikinci” button elemanının onclick özelliğine yazılarak, fonksiyonun yapacağı işlemler onclick özelliğine atıyoruz. daha sonra fonksiyonumuzda bulunan  “document.getElementById” id ile kullanmak istediğimiz p etiketinin id eşleştiriyoruz.

<script>
function ikinci() {
document.getElementById(“ikincideneme”).innerHTML = “fonksiyon ile deneme”;
}
</script>

<button type=”button” onclick=”ikinci()”> fonksiyon deneme </button>
<p id=”ikincideneme”>fonksiyonun sonucu buraya gelecek</p>

Yukarıda bulunan iki örnek arasındaki fark; Javascrip kodunu fonksiyon olarak kullandığınızda, atamak istediğiniz elemana bütün kodları tekrar tekrar yazmak yerine sadece id isimlerini eşleştirerek kullanabilirsiniz, bu şekilde yapacağınız işlemleri daha düzenli ve daha hızlı bir şekilde yapmış olursunuz.

 

Çalışmalara ait örnek link

 

Tarafından Nurcan Yurttaş

Yanıt ver

E-Posta adresiniz yayınlanmayacaktır.Gerekli alanlar * ile işaretlenmişlerdir

Kabul edilen biçimler HTML tagları ve özellikler: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*