-
Mehmet
- 9 Mart 2023
Basit Barkod Tarayıcı: HTML ve JavaScript ile Yapımı
Bugün, size adım adım bir basit barkod tarayıcı uygulaması nasıl oluşturulacağını göstereceğim. Bu uygulama, HTML ve JavaScript kullanarak klavyeden girilen verileri barkod olarak alacak ve tarandığında son taranan barkodu görüntüleyecek.
Adım 1: Temel HTML Yapısı
İlk olarak, HTML belgemizi oluşturuyoruz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Basit Barkod Tarayıcı</title> <script> // JavaScript kodları burada olacak </script> </head> <body> <h1>Basit Barkod Tarayıcı</h1> <strong>Son taranan barkod: </strong> <div id="last-barcode"></div> </body> </html> |
Bu temel HTML belgesinde, bir başlık, son taranan barkodu göstermek için bir div ve JavaScript kodlarını eklemek için bir script etiketi bulunmaktadır.
Adım 2: Barkod Tarayıcı JavaScript Kodları
Şimdi, JavaScript kodlarını ekleyerek barkod tarayıcı işlevselliğini oluşturacağız:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var barcode = ''; var interval; document.addEventListener('keydown', function(evt) { if (interval) clearInterval(interval); if (evt.code == 'Enter') { if (barcode) handleBarcode(barcode); barcode = ''; return; } if (evt.key != 'Shift') barcode += evt.key; interval = setInterval(() => barcode = '', 20); }); function handleBarcode(scanned_barcode) { document.querySelector('#last-barcode').innerHTML = scanned_barcode; } |
Bu JavaScript kodları, klavyeden herhangi bir tuşa basıldığında çalışacak bir olay dinleyicisi ekler. Tarayıcıdaki Enter tuşuna basıldığında, taranan barkodu alacak ve handleBarcode işlevini çağıracaktır. Bu işlev, taranan barkodu görüntülemek için HTML içinde belirtilen div öğesine yerleştirir.
Sonuç
Bu adımları takip ederek, basit bir barkod tarayıcı uygulamasını HTML ve JavaScript kullanarak oluşturmuş olduk. Bu uygulama, klavyeden girilen verileri barkod olarak almanın ve son taranan barkodu görüntülemenin temel bir örneğini sunar.
Umarım bu yazı, temel HTML ve JavaScript becerilerinizi geliştirmenize yardımcı olur. Daha karmaşık projelerde bu temel kavramları kullanarak daha güçlü uygulamalar oluşturabilirsiniz.
