1. HTML Input Oluşturma
Input kutuları kullanıcıdan veri almak için kullanılır. Kullanıcı sayı veya yazı girebilir.
<input type="number" id="ilkKutucuk" placeholder="Bir sayı gir">
Burada:
- type="number" → sadece sayı girilmesini sağlar
- id → JavaScript’in elementi bulmasını sağlar
- placeholder → kutu içindeki örnek yazıdır
2. Sonuç Yazdırma Alanı
Paragraf etiketleri sonuç göstermek için kullanılabilir. JavaScript bu yazıları değiştirebilir.
<p id="sonucYazisi">Sonuç burada görünecek</p>
Bu alandaki yazı daha sonra JavaScript tarafından değiştirilecektir.
3. HTML Elementini JavaScript ile Bulma
JavaScript, HTML’deki elementleri seçebilmek için genellikle getElementById() kullanır.
const kutu =
document.getElementById("formAlani");
Bu satır HTML’deki elementi JavaScript’e bağlar.
4. Fonksiyon Oluşturma
Fonksiyonlar tekrar kullanılabilen işlem bloklarıdır. Hesaplamalar genelde fonksiyon içinde yapılır.
function sonucuHesapla() {
}
Fonksiyon çağrıldığında içindeki kodlar çalışır.
5. Inputtan Veri Alma
Input içine yazılan değeri almak için .value kullanılır.
const birinciSayi =
Number(document.getElementById("ilkKutucuk").value) || 0;
Burada:
- value → input içindeki değeri alır
- Number() → değeri sayıya çevirir
- || 0 → kutu boşsa değeri 0 yapar
6. Matematiksel İşlem Yapma
JavaScript ile toplama, çıkarma ve diğer işlemler yapılabilir.
const toplamDeger =
sayi1 + sayi2 + sayi3;
Bu satır farklı değişkenleri toplar.
const sonuc =
anaDeger - toplamDeger;
Bu satır çıkarma işlemi yapar.
7. Yüzde Hesaplama
Bir değerin oranını bulmak için bölme işlemi yapılır ve sonuç 100 ile çarpılır.
let oran = 0;
if (anaDeger > 0) {
oran =
(sonuc / anaDeger) * 100;
}
Buradaki kontrol sayesinde 0’a bölme hatası önlenir.
8. HTML Yazısını Değiştirme
JavaScript, HTML içindeki yazıları değiştirebilir.
document.getElementById("sonucYazisi")
.textContent =
`Sonuç: ${sonuc}`;
Burada:
- textContent → yazıyı değiştirir
- ${ } → değişkeni yazının içine ekler
9. Koşul Kullanımı
Koşullar sayesinde farklı sonuçlara göre farklı mesajlar gösterilebilir.
if (sonuc < 0) {
durum = "Düşük";
} else if (sonuc == 0) {
durum = "Normal";
} else {
durum = "Yüksek";
}
Burada JavaScript sonucu kontrol eder ve uygun mesajı seçer.
10. Virgüllü Sayıyı Düzenleme
Uzun ondalıklı sayıları daha düzenli göstermek için toFixed() kullanılır.
oran.toFixed(1)
Örneğin:
- 45.6789 → 45.7
- 12.999 → 13.0
11. addEventListener Kullanımı
Kullanıcı bir işlem yaptığında JavaScript fonksiyonu çalıştırılabilir.
document.getElementById("ilkKutucuk")
.addEventListener("input", sonucuHesapla);
Burada:
- input → kullanıcı yazı yazınca çalışır
- addEventListener → olayı dinler
- sonucuHesapla → çalıştırılacak fonksiyon
12. Genel JavaScript Mantığı
- HTML’den veri alınır
- Veri JavaScript’e aktarılır
- Değişkenlerde saklanır
- Matematik işlemi yapılır
- Koşul kontrol edilir
- Sonuç HTML’ye geri yazdırılır 22 Subat 2022 Tarihinde Yazilmistir