JavaScript, web geliştirmede sıklıkla kullanılan ve sayısal işlemler yaparken kullanıcıya esneklik sağlayan bir programlama dilidir. Sayısal işlemler sırasında, özellikle finansal verilerde virgülden sonra kaç basamak gösterileceği önem taşır. JavaScript ile bir sayının virgülden sonra kaç basamak göstereceğini belirlemek için toFixed(), toPrecision() gibi fonksiyonlar kullanılır. toFixed() fonksiyonu, sayıların belirli bir ondalık basamağa yuvarlanmasını sağlar ve bir sayı sonucunu kesin olarak belirli bir ondalık basamağa ayarlamak istediğinizde kullanılır. Örneğin, 3.14159.toFixed(2) işlemi sonucu “3.14” olur. Bu durum, kullanıcıya daha anlamlı ve yuvarlanmış veriler sunmak için faydalıdır.

Modern web tasarımında, bu fonksiyonlar çeşitli HTML ve CSS yapıları ile birlikte kullanılabilir. Örneğin, bir sayfada kullanıcı bir sayı girdiğinde ve istediği ondalık basamak sayısını seçtiğinde, JavaScript bu girdiyi alır ve ekranda sonucu gösterir. Responsive tasarım ile mobil cihazlarda da aynı hassasiyette çalışır. JavaScript ile basamak belirleme özelliği, finansal hesaplama uygulamaları, ölçüm birimlerinin gösterimi veya matematiksel simülasyonlar gibi birçok farklı alanda kullanılabilir. Böylece, kullanıcılar ek bir hesaplama yapmadan verilerini istediği doğrulukta görebilir. Örneğimizde HTML yapısında bir sayısal giriş alanı ve virgülden sonraki basamak sayısını ayarlayabileceğiniz bir alan bulunmaktadır. JavaScript fonksiyonuyla bu girdilerden değerler alınarak basamak sayısı uygulanır.

HTML

<div class="container">
  <h2>Ondalık Basamak Ayarlayıcı</h2>
  <div class="input-group">
    <label for="number">Bir sayı giriniz:</label>
    <input type="number" id="number" step="any">
  </div>
  <div class="input-group">
    <label for="decimalPlaces">Virgülden sonraki basamak sayısı:</label>
    <input type="number" id="decimalPlaces" min="0">
  </div>
  <button onclick="formatNumber()">Hesapla</button>
  <div class="result" id="result"></div>
</div>

CSS

body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; margin: 0; }
.container { background: #fff; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 8px; width: 300px; }
h2 { color: #333; text-align: center; }
.input-group { margin: 15px 0; }
label { font-size: 14px; color: #555; }
input { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; }
button { width: 100%; padding: 10px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #218838; }
.result { margin-top: 20px; font-size: 18px; text-align: center; color: #333; }

Javascript

function formatNumber() {
    const number = parseFloat(document.getElementById('number').value);
    const decimalPlaces = parseInt(document.getElementById('decimalPlaces').value);

    if (!isNaN(number) && !isNaN(decimalPlaces)) {
      document.getElementById('result').textContent = `Sonuç: ${number.toFixed(decimalPlaces)}`;
    } else {
      document.getElementById('result').textContent = 'Lütfen geçerli bir sayı ve basamak girin.';
    }
}

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.

Javascript konusuyla ilgili yazdığım tüm yazıları bu bağlantıdan veya github hesabımdan inceyebilirsiniz.