Javascript İle Tarayıcı Tabanlı Bir Dinamik Vücut Kitle Endeksi Hesaplayıcı Nasıl Yapılır?

JavaScript ile Tarayıcı Tabanlı Bir Dinamik Vücut Kitle Endeksi Hesaplayıcı Nasıl Yapılır?

Vücut Kitle Endeksi (VKE), bireyin kilosunun boyuna oranla sağlıklı bir aralıkta olup olmadığını anlamak için kullanılan temel bir sağlık metriğidir. Bir yazılım geliştirici olarak, modern web standartlarını kullanarak tarayıcı tabanlı bir VKE hesaplayıcı geliştirmek, JavaScript temellerini, DOM (Document Object Model) manipülasyonunu ve kullanıcı etkileşimini anlamak için mükemmel bir projedir. Bu rehberde, 2026 yılı standartlarına uygun, temiz ve sürdürülebilir bir kod yapısıyla bu uygulamayı nasıl inşa edeceğinizi adım adım öğreneceksiniz.

Bu makale, web geliştirme dünyasına yeni adım atan veya JavaScript bilgilerini pratik bir proje ile pekiştirmek isteyen geliştiriciler için hazırlanmıştır. Projemiz boyunca modern ES6+ sözdizimini (syntax) kullanacak, kullanıcı girdilerini doğrulayacak ve sonuçları dinamik olarak arayüzde göstereceğiz. Hiçbir dış kütüphaneye ihtiyaç duymadan, saf JavaScript ile tarayıcı üzerinde çalışan profesyonel bir araç geliştireceğiz.

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için herhangi bir karmaşık kurulum yapmanıza gerek yoktur. Modern bir web tarayıcısı (Chrome, Firefox veya Edge) ve basit bir metin düzenleyici (VS Code gibi) yeterlidir. Çalışmalarımızı üç ana dosya üzerinde yürüteceğiz: index.html (yapı), style.css (görünüm) ve script.js (mantık).

• HTML5: Sayfanın iskeletini oluşturmak için.
• CSS3: Kullanıcı dostu ve duyarlı (responsive) bir tasarım için.
• JavaScript (ES6+): Hesaplama mantığı ve DOM etkileşimi için.

Kodlarınızı test etmek için VS Code üzerinde "Live Server" eklentisini kullanmanızı öneririm. Bu eklenti, her kaydetme işleminde tarayıcıyı otomatik olarak yenileyerek geliştirme sürecinizi hızlandıracaktır.

Adım 1: HTML ile Arayüz Yapısını Oluşturma

Uygulamamızın temelini oluşturan HTML yapısı, kullanıcının boy ve kilo bilgilerini girebileceği alanları ve sonucu göstereceğimiz bir kapsayıcıyı içermelidir. Aşağıdaki örnek, temiz bir form yapısını göstermektedir.

    


VKE Hesaplayıcı
    
    
    Hesapla
    

Bu kodda input etiketleri için type="number" kullanarak tarayıcının sadece sayısal girişlere izin vermesini sağladık. step özelliği, kullanıcıların ondalıklı sayı girmesine olanak tanır.

Adım 2: JavaScript ile Veri Alma ve Temel Hesaplama

Şimdi, kullanıcıdan alınan verileri işleyecek mantığı kuralım. JavaScript'te document.getElementById kullanarak HTML elemanlarına erişir ve addEventListener ile tıklama olaylarını dinleriz.

const hesaplaBtn = document.getElementById('hesapla-btn');

hesaplaBtn.addEventListener('click', () => {
    const boy = parseFloat(document.getElementById('boy').value) / 100;
    const kilo = parseFloat(document.getElementById('kilo').value);

    if (boy > 0 && kilo > 0) {
        const vke = (kilo / (boy * boy)).toFixed(2);
        console.log("Hesaplanan VKE: " + vke);
    } else {
        alert("Lütfen geçerli değerler girin.");
    }
});

Burada parseFloat kullanarak metin girdilerini sayısal değerlere dönüştürdük. Boyu santimetreden metreye çevirmek için 100'e böldük. toFixed(2) metodu, sonucun virgülden sonra sadece iki basamağını almamızı sağlar.

Adım 3: Dinamik Sonuç Gösterimi ve Hata Yönetimi

Kullanıcıya sadece bir sayı vermek yerine, sonucun ne anlama geldiğini (zayıf, normal, kilolu) göstermek kullanıcı deneyimini artırır. Aşağıdaki fonksiyon, hesaplanan değeri sınıflandırır.

function vkeDegerlendir(vke) {
    if (vke < 18.5) return "Zayıf";
    if (vke < 25) return "Normal";
    if (vke < 30) return "Kilolu";
    return "Obez";
}

// Kullanımı:
const durum = vkeDegerlendir(vke);
document.getElementById('sonuc-alani').innerText = `VKE Değeriniz: ${vke} (${durum})`;

Bu adımda if-else yapısı yerine daha okunabilir bir mantık kurduk. innerText kullanarak sonucu doğrudan DOM üzerinde güncelledik.

Adım 4: Güvenlik ve Giriş Doğrulama (Validation)

Web uygulamalarında kullanıcı girdilerine asla güvenmemelisiniz. Kullanıcı negatif bir boy değeri veya çok yüksek bir kilo değeri girebilir. Bu tür hataları önlemek için bir doğrulama katmanı eklemek şarttır.

Uyarı: Tarayıcı tabanlı hesaplamalar asla tıbbi teşhis yerine geçmez. Bu araç sadece bilgilendirme amaçlıdır. Kullanıcıya sonucun bir uzman görüşü olmadığını belirten bir not eklemek, yasal sorumluluk açısından önemlidir.

function girdileriDogrula(boy, kilo) {
    if (isNaN(boy) || boy < 50 || boy > 250) return false;
    if (isNaN(kilo) || kilo < 10 || kilo > 300) return false;
    return true;
}

Bu fonksiyon, girilen değerlerin mantıklı bir aralıkta olup olmadığını kontrol eder. isNaN (is Not a Number), girilen değerin sayı olup olmadığını denetler.

Karşılaştırmalı Yöntemler Tablosu

Adım 5: Kodun Optimizasyonu ve Modüler Yapı

Kodunuzu daha profesyonel hale getirmek için fonksiyonları modüler parçalara ayırın. Bu, kodun bakımını kolaylaştırır ve okunabilirliği artırır. 2026 standartlarına uygun olarak const ve let kullanımı, kapsam (scope) hatalarını engeller.

const VKEApp = {
    init: function() {
        document.getElementById('hesapla-btn').addEventListener('click', this.hesapla);
    },
    hesapla: function() {
        // Hesaplama mantığı burada...
    }
};

VKEApp.init();

Nesne tabanlı (Object Literal) yaklaşım, kodunuzu global kapsamdan (global scope) kurtarır ve diğer scriptlerle çakışmasını önler.

Güvenlik Notu: Bu uygulama istemci tarafında (tarayıcıda) çalışır. Kullanıcı girdilerini sunucuya göndermediğiniz sürece XSS (Cross-Site Scripting) riski düşüktür. Ancak verileri bir veritabanına kaydedecekseniz, sunucu tarafında mutlaka "input sanitization" (girdi temizleme) yapmalısınız.

Sıkça Sorulan Sorular

VKE hesaplarken neden 100'e bölüyoruz?

Formül gereği boyun metre cinsinden olması gerekir. Kullanıcılar genellikle boylarını santimetre (örn: 175 cm) olarak girdiği için, 100'e bölerek bunu 1.75 metreye dönüştürüyoruz.

Neden "input" yerine "number" tipi kullandık?

HTML5 number tipi, mobil cihazlarda kullanıcıya otomatik olarak sayısal klavyeyi açar ve bu da kullanıcı deneyimini doğrudan iyileştirir.

Hesaplama sonucunda neden "toFixed(2)" kullanıyoruz?

Bölme işlemi sonucunda bazen çok uzun ondalıklı sayılar oluşabilir (örn: 24.12345678). İki basamak, sağlık verileri için yeterli hassasiyeti sağlar ve arayüzde temiz görünür.

Bu projeyi nasıl daha ileriye taşıyabilirim?

Yerel depolama (LocalStorage) kullanarak kullanıcının geçmiş ölçümlerini tarayıcıda saklayabilir veya bir grafik kütüphanesi ile gelişimini görselleştirebilirsiniz.

Kod hatalarını nasıl ayıklarım (debug)?

Tarayıcınızın Geliştirici Araçları'nı (F12) açın ve "Console" sekmesini takip edin. console.log() kullanarak değişkenlerin o anki değerlerini adım adım izleyebilirsiniz.

LocalStorage ile Veri Kalıcılığı Sağlama

Kullanıcıların hesapladıkları VKE değerlerini tarayıcıyı kapattıktan sonra da görebilmeleri için localStorage API'sini kullanabiliriz. Bu, uygulamanıza bir "Geçmişim" özelliği kazandırmanın en kolay yoludur.

Aşağıdaki kod bloğu, her hesaplama sonrası sonucu bir diziye ekleyip tarayıcı hafızasına nasıl kaydedeceğinizi göstermektedir:

function gecmiseEkle(vkeDegeri) {
    let gecmis = JSON.parse(localStorage.getItem('vkeGecmisi')) || [];
    const yeniKayit = {
        tarih: new Date().toLocaleString(),
        sonuc: vkeDegeri
    };
    gecmis.push(yeniKayit);
    localStorage.setItem('vkeGecmisi', JSON.stringify(gecmis));
    console.log("Veri kaydedildi:", yeniKayit);
}

Bu verileri ekrana yansıtmak için ise sayfa yüklendiğinde localStorage.getItem('vkeGecmisi') metodunu çağırarak verileri çekebilir ve bir liste elemanı (

) içerisinde döngüye sokarak listeleyebilirsiniz.

Uygulamanın Performansını Artırmak İçin İleri İpuçları

Küçük ölçekli projelerde performans genellikle sorun teşkil etmese de, kodunuzu profesyonel standartlara taşımak için şu yöntemleri uygulayabilirsiniz:

• Event Debouncing: Kullanıcı her tuşa bastığında hesaplama yapılması yerine, yazmayı bıraktıktan 300ms sonra hesaplama tetiklenmesini sağlayarak işlemci yükünü azaltabilirsiniz.
• DOM Erişimlerini Azaltma: document.getElementById gibi sorguları döngülerin dışında tutun. Değişkenleri bir kez tanımlayıp referanslarını kullanın.
• CSS ile Görselleştirme: Hesaplama sonucuna göre dinamik sınıflar (class) ekleyerek (örneğin: vke-dusuk, vke-normal) kullanıcıya anlık renkli geri bildirimler verin.

Örnek bir debouncing yaklaşımı:

let timer;
const inputElement = document.getElementById('agirlik');

inputElement.addEventListener('input', () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
        hesapla(); // Hesaplama fonksiyonunu gecikmeli çalıştır
    }, 300);
});

Test Süreçleri ve Kullanıcı Deneyimi

Uygulamanızı yayına almadan önce farklı senaryoları test etmeniz kritik öneme sahiptir. Özellikle uç değerleri (çok düşük veya çok yüksek kilo/boy verileri) girerek uygulamanın nasıl tepki verdiğini gözlemleyin.

Senaryo	Beklenen Sonuç
Negatif sayı girişi	Hata mesajı gösterilmeli
Boş input ile hesapla	Uyarı tetiklenmeli
Çok yüksek boy değeri (örn: 500cm)	Mantıksal sınır kontrolü yapılmalı

Bu testleri manuel yapabileceğiniz gibi, Jest gibi JavaScript test kütüphanelerini kullanarak otomatik birim testleri (unit tests) yazarak kodunuzun sağlamlığını garanti altına alabilirsiniz.

Sonuç

JavaScript ile dinamik bir VKE hesaplayıcı yapmak, web geliştirme temellerini pekiştirmek için harika bir başlangıçtır. Bu rehberde, HTML yapısından başlayarak JavaScript ile mantık kurmaya, kullanıcı girdilerini doğrulamaktan kodunuzu optimize etmeye kadar geniş bir yelpazeyi ele aldık. Unutmayın, yazılım geliştirme pratik yaparak öğrenilir; bu kodları kendi bilgisayarınızda çalıştırın, CSS ile tasarımını geliştirin ve farklı özellikler ekleyerek projenizi özelleştirin. Bir sonraki adım olarak, LocalStorage kullanarak verileri tarayıcıda kalıcı hale getiren bir "Geçmişim" özelliği eklemeyi deneyebilirsiniz.