Javascript ile Neler Yapılabilir?
Javascript öğrenmeye başlamadan önce Javascript ile neler yapabileceğimize göz atalım.
Javascript HTML içeriğini değiştirir
Javascript’in en çok kullanılan HTML metodlarından biri getElementById() metodudur ve bu metodun işlevi verilen id’ye sahip HTML etiketini bulmaktır. Bu metoda eklenen .innerHTML fonksiyonunun işlevi ise etiketin içindeki HTML içeriğini değiştirmektir.
Javascript kodu;
document.getElementById("id_degeri").innerHTML = "Merhaba JavaScript";
Yukarıdaki ifade de id_degeri olarak id verilmiş HTML etiketi bulunur ve innerHTML fonksiyonu gereği içeriği bir eylem dinleyici yardımı ile tetiklendiğinde Merhaba Javascript yazacak şekilde değiştirilir. Bunu bir örnekle inceleyecek olursak;
See the Pen
Javascript ile HTML dosyasının içeriğini değiştirmek by Oben SEVEN (@obenseven)
on CodePen.
Javascript HTML etiketlerinin özelliklerini değiştirir
Örneğin sayfanıza resim eklemenizi sağlayan <img> HTML etiketinin, resmin adresini belirten src=”” kaynak adresini Javascript ile değiştirebilirsiniz. Aşağıdaki örnekte butonatıklanması eylemi resmi değiştirmeyi sağlıyor. Böylece her iki butona tıkladığınızda da farklı resimler görüntüleyebiliyorsunuz.
See the Pen
Javascript ile HTML Etiketlerinin Özelliklerini Değiştirmek by Oben SEVEN (@obenseven)
on CodePen.
Javascript CSS stil şablonlarını değiştirir
Javascript ile HTML etiketlerinin özelliklerini değiştirme işlemine benzer şekilde bu etiketlerin görünümlerine de CSS stil kuralları uygulayarak müdahale edebilirsiniz.
See the Pen
Javascript ile HTML Etiketine CSS Stilleri Eklemek by Oben SEVEN (@obenseven)
on CodePen.
Bu sayede Javascript ile web sayfasının içeriğinde yer alan nesneleri gizleyebilir ya da gizli olarak oluşturduğunuz nesneleri daha sonra görünür hale getirebilirsiniz. Seçenekler sınırsız.
See the Pen
Javascript ile İçerik Gizlemek ya da Göstermek by Oben SEVEN (@obenseven)
on CodePen.
Javascript Web Sayfasına Nasıl Bağlanır?
Javascript HTML sayfanızın <body> içerik alanına ya da <head> başlık alanına yerleştirilebilir. Ya da isterseniz tek bir HTML kodu içinde her iki alana da javascript kodu yerleştirebilirsiniz. Ancak tüm javascript kodlarını tek bir yerde tutmak karmaşıklığı önlemek açısından faydalıdır.
HTML kodu içerisinde yer alan Javascript kodları <script> etiketinin içine yerleştirilir.
Eğer javascript kodunuzu <body> alanına yazacaksanız örnekte gördüğünüz gibi en alta </body> kapatma etiketinin hemen üzerine yazmanız sayfanızın daha hızlı yüklenmesi açısından faydalı olacaktır. Çünkü tarayıcılar sayfayı yukarıdan aşağıya doğru okur ve javascript kodlarınız en altta yer alırsa önce sayfada görüntülenen nesneler yüklenir ve kullanıcı sayfayı görür, sonra javascript kodu çalıştırılmak üzere hazırlanır.
Ayrıca Javascript web sayfasında yer alan nesneler üzerinde çalıştığı için öncelikle tüm sayfa elemanlarının yüklenmesini sağlamak ve en sonunda javascript’in yüklenmesini sağlamak genellikle tercih edilen yöntemdir.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<p id="deneme"></p>
<script>
document.getElementById("deneme").innerHTML = "İlk JavaScript Kodum !";
</script>
</body>
</html>Ancak bu şekidle HTML sayfası içine Javascript yazmak çok tercih edilmeyen bir yöntemdir. Sadece sayfada çok az Javascript kullanacaksanız tercih edilebilir. Önemli miktarda javascript kullanacaksanız bunun yerine harici bir dosyada tutulması ve oradan web sayfasına bağlanması daha iyi bir yöntemdir. Ayrıca, bu durumda projeniz içindeki tüm HTML dosyalarından erişilebilir ve tek bir Javascript yazarak projeniz içindeki tüm dosyalarda kullanabilirsiniz. HTML dosyalarınızda harici javascript kullanmak için <head> ya da <body> alanlarında bu dosyanın konumunu belirterek referans vermeniz gereklidir.
jsdosyam.js dosyamızı aşağıdaki şekilde hazırlayarak HTML dosyalarımızın hemen yanına kaydedelim.
function ilkFonksiyonum() {
document.getElementById("deneme").innerHTML =
"Paragraf değiştirildi.";
}HTML dosyamızı da index.html adıyla Javascript kodumuzla aynı klasöre kaydedelim.
<!DOCTYPE html> <html> <head> <script src="jsdosyam.js"></script> </head> <body> <h1>Web Sayfam</h1> <p id="deneme"> Burada bir paragrafımız mevcut</p> <button type="button" onclick="ilkFonksiyonum()">Javascript Çalıştır</button> </body> </html>
Buradaki örnekte öncekilerden farklı bir kullanımı görmeniz için javascript kodumuzu HTML dosyamız içindeki <head> alanına yerleştirdik. Artık HTML kodumuz içerisinde eylem dinleyiciler(event listener) kullanarak javascript dosyamız içindeki bir fonksiyonu çalıştırabiliriz.
See the Pen
HTML içinde harici javascript dosyası kullanmak by Oben SEVEN (@obenseven)
on CodePen.
Javascript’te Çıktıyı Görmek
Javascript’in gerçekleştirdiği işlemleri görmenin ya da kullanıcıya göstermenin 4 farklı yolu vardır ;
- window.alert() ile bir mesaj kutusunda görüntülemek
- document.write() ile Html sayfasında görüntülemek
- innerHTML ile bir Html etiketi içinde görüntülemek
- console.log() ile tarayıcı konsolunda görüntülemek
Mesaj Kutusu Görüntülemek
Javascript kodunuzun çıktısını bir mesaj kutusunda gösterebilirsiniz.
See the Pen
Javascript Tarayıcı Mesaj Kutusu by Oben SEVEN (@obenseven)
on CodePen.
Web Sayfasına Yazdırmak
Javascript kodunuzun çıktsını document.write() fonksiyonu yardımıyla HTML sayfanızın istediğiniz yerinde gösterebilirsiniz.
See the Pen
Çıktıyı Web Sayfasına Direkt Yazdırmak by Oben SEVEN (@obenseven)
on CodePen.
HTML Koduna Yerleştirmek
HTML etiketlerine ulaşabilmek için Javascript document.getElementById(id) metodunu kullanır. id tanımlayıcısı HTML etiketine verilen ismi belirtir. innerHTML() methodu ise HTML içeriğinin ne olacağını belirler.
Daha önceki örneklerimizde de sıkça kullandığımız, en çok tercih edilen veri görüntüleme yöntemidir.
See the Pen
HTML içinde harici javascript dosyası kullanmak by Oben SEVEN (@obenseven)
on CodePen.
Tarayıcı Konsolunda Çıktı Görüntülemek
Bu yöntem ile Javascript kodunuzun çıktısını kullanılan tarayıcının komut ekranında görüntülersiniz. Sitenizin ziyaretçileri bu yöntemi kullanarak oluşturduğunuz çıktıları göremezler. Çoğu zaman geliştiricilerin tarayıcının geliştirici araçlarını kullanarak ulaştıkları Javascript konsolunda bir takım test sonuçlarını görüntülemelerini sağlar.
See the Pen
Tarayıcı konsolunda çıktı görüntülemek by Oben SEVEN (@obenseven)
on CodePen.
Bağlantıda Kalalım