HTML Dökümanlarında JavaScript Kullanmak
JavaScript de tıpkı CSS gibi farklı bir programlama dilidir diyebiliriz.
script kelimesi; küçük bir program, anlamındadır.
CSS, bir html dökümanını süslemeye, stillendirmeye yarar.
JavaScript ise, bir html dökümanına canlılık katar, sayfanın interaktif olmasını sağlar. Örneğin javascript, bir fare tıklamasıyla bir içeriğin kendisini, stilini değiştirmemizi sağlayabilir, kullanıcıya bir formu yanlış doldurduğuna dair bir uyarı penceresi gösterebilir, API uygulamaları oluşturabilir...
Bir html dökümanında, javascript kodları, <script> ve </script> tagları arasında yazılır.
Web tarayıcıları, bu iki script arasındaki kodları, otomatik olarak, javascript kodu olarak algılarlar ve yorumlarlar.
Bazı tarayıcıların eski sürümleri, javascripti desteklemeyebilir. Sitemizin kullanıcıları arasında bu eski sürümleri kullananlar da olabilir. Bu yüzden, yazdığımız kodların tarayıcı tarafından okunmaması ihtimalini düşünerek <noscript> elemanı ile tedbirimizi almak iyi bir alışkanlık olacaktır.
Örneğe dikkat edelim:
<p id="deneme"></p>
<script>
document.getElementById("deneme").innerHTML = "merhaba JavaScript!";
</script>
<noscript>Üzgünüm, tarayıcınız JavaScript'i desteklememektedir! Lütfen tarayıcınızın son sürümünü yükleyin ya da ayarlarını değiştirin!</noscript>
document.getElementById("deneme").innerHTML = "merhaba JavaScript!";
</script>
<noscript>Üzgünüm, tarayıcınız JavaScript'i desteklememektedir! Lütfen tarayıcınızın son sürümünü yükleyin ya da ayarlarını değiştirin!</noscript>
Yukarıdaki kod karışık gelebilir. Bu şu an için normal bir durumdur. Kısaca kodları anlamaya çalışalım:
Önce bir paragraf elemanı oluşturduk ve kimliğini "deneme" olarak atadık: <p id="deneme"></p>
Daha sona javascript kodları ile kimliğini kullanıp bu paragraf elemanının içeriğine ulaştık: document.getElementById("deneme").innerHTML
Daha sonra, eşittir öperatörü ile parafrafın içeriğini "merhaba JavaScript!" olarak atadık.
Son olarak da; <noscript>Üzgünüm, tarayıcınız JavaScript'i desteklememektedir! Lütfen tarayıcınızın son sürümünü yükleyin ya da ayarlarını değiştirin!</noscript> elemanı ile javascript kodumuz çalışmadığı zaman, ekranda yazmasını istediğimiz notu ilan ettik.
document.getElementById("deneme").style.fontSize = "25px"; kodu ile de kimliği "deneme" olan html elemanının harf büyüklüğünü 25 pixel yaptık. Yani javacript ile bir CSS uyguladık: style.fontSize = "25px";
document.getElementById("resim").src = "picture.gif"; kodu ile de kimliği "resim" olan html elemanına içerik olarak "picture.gif" adında bir resim atadık.
Aşağıdaki örnekle devam edelim:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript uygulaması</h1>
<p id="deneme">JavaScript, bir HTML elemanının stilini değiştirebilir.</p>
<script>
function fonksiyonum() {
document.getElementById("deneme").style.fontSize = "25px";
}
</script>
<button type="button" onclick="fonksiyonum()">Tıkla Beni değişikliği gör</button>
</body>
</html>
Yukarıdaki örnekte; <button type="button" onclick="fonksiyonum()">Tıkla Beni!</button> kodu ile; tıklandığı (onclick) zaman fonksiyonum() adındaki bir fonksiyonu çalıştıracak bir gönder butonu oluşturduk.
fonksiyonum() adındaki fonksiyon ise, çalıştırıldığında, kimliği deneme olan paragraf elemanının yazı büyüklüğünü 25 pixel olarak stillendiriyor.
Bu kodların sayfamızdaki görütüsü şöyle olacaktır:
JavaScript uygulaması
JavaScript, bir HTML elemanının stilini değiştirebilir.
Şu seviyede bu kodları anlamak çok da mümkün değildir. Burada sadece javascript dilinin neler yapabildiğine dair kısaca fikir sahibi olmaya çalıştık.
İlerleyen günlerde bir javascript bloğu oluşturma projemiz de vardır. Umarım gerçekleşir ve sizlerle javascript derslerinde tekrar buluşuruz.
HTML derslerimiz, HTML5'in getirdiği yeniliklerle devam edecektir...
Hiç yorum yok:
Yorum Gönder