2022'de JavaScript, HTML ve CSS kullanarak bir Hesap Makinesi oluşturun
Yayınlanan: 2021-01-02İster yeni bir programlama dili, isterse bir geliştirme çerçevesi öğreniyor olun, gerçek dünya projeleri üzerinde çalışmanız gereken bir zaman gelir. Konuda ilerlerken, dil becerilerinizi ve anlayışınızı test etmelisiniz. Yeni öğrenilen teknolojiyi veya çerçeveyi kullanarak bir proje oluşturmak iyi bir fikirdir. Bilginizle ne yaratmanız gerektiğine dair çevrimiçi olarak pek çok fikir var.
En yaygın olarak bulunan öneriler , JavaScript'te bir Hesap Makinesi ve Yapılacaklar Listesi'ni içerir. Kolay görünseler de, bu projeler üzerinde çalışmaya başladığınızda oldukça zor olabilir. Burada, sizin için olaylı olduğu kadar kolay ve mantıklı hale getireceğiz.
Başlayalım mı?
İçindekiler
Herşeyden Önce Mantık
İster hesap makinesi ister yapılacaklar listesi olsun, bir proje üzerinde çalışmaya başladığınızda, tanımlamanız gereken ilk şey mantıktır.
Hesap makinesi nasıl çalışır?
- Hesap makinesinde verilen sayı tuşlarını kullanarak iki veya daha fazla sayı (herhangi bir sayıda basamak) eklersiniz.
- Daha sonra bu sayılar üzerinde toplama, çıkarma, çarpma ve bölme gibi temel aritmetik işlevleri gerçekleştirirsiniz.
- Hesap makinesi doğru çözümleri hesaplayabilmeli ve verebilmelidir.
Hesap makinesi aracınızın temeli budur. Yani bir tuş takımına, bir ekran birimine ve fonksiyon elemanlarına ihtiyacınız var.
“Eşittir” düğmesi cevabı değerlendirirken “temizle” düğmesi hesap makinesi ekranındaki tüm girdilerin kaldırılmasını sağlayacaktır.

Dünyanın en iyi Üniversitelerinden Çevrimiçi yazılım geliştirme kursları öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.
Projeyi Ele Almak: Kodu Oluşturmanın Anahtarı
Hemen koda gitmek yerine, yeni bir projeyle nasıl başa çıkacağınızı öğrenmeniz gerekir. Sizin için hazır iki şey var: JavaScript, HTML ve CSS gibi ön uç teknolojilerin mantığı ve temel anlayışı.
JavaScript kullanarak hesap makinenizi oluşturmaya başlamadan önce aşağıdakilere ihtiyacınız vardır:
- Üç teknolojiyi de kullanarak projenizi oluşturmanıza yardımcı olacak Entegre Geliştirme Ortamı.
- Kodlarınızı test etmenize ve hataları gidermenize yardımcı olacak yerel bir sunucu. Sonuç olarak, uygulamayı daha hızlı ve daha çevik bir şekilde başlatabileceksiniz.
#1 HTML'ye Başlarken
İlk adım, hesap makinenizin ana hatlarını oluşturabilmeniz için ellerinizi HTML ile biraz kirletmektir.
Hesap makinesinde 0 ile 9 arasında değişen on düğme vardır. HTML, her basamak için anahtarların oluşturulmasından sorumludur.
Bunun dışında, JavaScript kullanarak bir hesap makinesi oluştururken farklı aritmetik işlevler için ayrı anahtarlar oluşturmak için HTML kullanmanız gerekecektir .
Girilen rakamları veya sonuçları görüntülemek ve ekranı temizlemek için düğme eklemek için HTML kullanabilirsiniz.
Hesap makinenizin görsel birimi, düğmelerin ve kimliklerinin HTML kullanılarak oluşturulması gereken HTML ve CSS'ye tamamen bağlıdır.
Genel Bilgi Kodu
<!DOCTYPE html>
<html lang=”tr”>
<kafa>
<meta karakter kümesi=”UTF-8″>
<meta name=”viewport” content=”width=cihaz genişliği, ilk ölçek=1.0″>
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>
<title>Hesap makinesi</title>
</head>
<body>
Hesap Makinesi Anahattı Oluşturmak için Gerçek Kod
(
<!– hesap makinesi –>
<div class="hesap makinesi">
<!– ekran –>
<input type="text" class="display" devre dışı>
<!– tuşlar –>
<div class=”anahtarlar”>
<!– 4 sıra tuş –>
<div class=”satır”>
<button value=”7″>7</button>
<button value=”8″>8</button>
<button value=”9″>9</button>
<button value=”+” class=”operatör”>+</button>
</div>
<div class=”satır”>
<button value=”4″>4</button>
<button value=”5″>5</button>
<button value=”6″>6</button>
<button value=”-” class=”operatör”>-</button>
</div>
<div class=”satır”>
<button value=”1″>1</button>
<button value=”2″>2</button>
<button value=”3″>3</button>
<button value=”*” class=”operatör”>*</button>
</div>
<div class=”satır”>
<button value=”C” class=”operator”>C</button>
<button value=”0″>0</button>
<button value=”/” class=”operatör”>/</button>
<button value=”=” class=”operatör”>=</button>
</div>
</div>
</div>
<!– hesap makinesi gövdesi biter –>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
Öğrenin: Yeni Başlayanlar İçin Github'daki En İyi 20 Javascript Projesi
#2 CSS ile Stil
Hesap makinesinin yapısını tanımladıktan sonra, hesap makinenize stil vermek ve onu görsel olarak çekici ve kullanımı kolay hale getirmek için satır içi CSS öğelerini kullanacaksınız.
Uygulamanızın görünümünü tasarlamak ve şekillendirmek söz konusu olduğunda satır içi CSS mükemmel olsa da, SEO dostu olmayabilir. Bunun dışında harici CSS öğelerini de aynı kök dizine etiketleyerek kullanabilirsiniz. Hatta head bölümündeki <style></style> etiketlerinde bulunan dahili veya gömülü CSS öğelerini bile kullanabilirsiniz.
Burada, hesap makinenizi biçimlendirmek için kullanabileceğiniz kodu size göstereceğiz.
(İsterseniz bu kodun varyasyonlarını oluşturabilirsiniz.)
/* ortak stiller */
* {

dolgu: 0;
kenar boşluğu: 0;
}
gövde {
genişlik: 100vw;
yükseklik: 100vh;
taşma: gizli;
ekran: esnek;
haklı içerik: merkez;
hizalama öğeleri: merkez;
arka plan rengi: #222831;
yazı tipi ailesi: sans-serif;
}
/* ortak stiller biter */
/* hesap makinesi */
.hesap makinesi {
genişlik: 300 piksel;
alt dolgu: 15 piksel;
sınır yarıçapı: 7 piksel;
arka plan rengi: #000;
kutu gölgesi: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
/* hesap makinesi stili sonu */
/* Görüntüle */
.Görüntüle {
genişlik: %100;
yükseklik: 80 piksel;
sınır: yok;
kutu boyutlandırma: kenarlık kutusu;
dolgu: 10 piksel;
yazı tipi boyutu: 2rem;
arka plan rengi: #00ff44;
renk: #000;
metin hizalama: sağa;
sol üst kenarlık yarıçapı: 7 piksel;
sağ üst kenarlık yarıçapı: 7 piksel;
}
/* görüntüleme stili sonu */
/* sıra */
.sıra {
ekran: esnek;
justify-content: boşluk-arasında;
}
/* satır stili sonu */
/* buton */
düğme {
genişlik: 50 piksel;
yükseklik: 50 piksel;
sınır yarıçapı: %50;
sınır: yok;
anahat: yok;
yazı tipi boyutu: 1.5rem;
arka plan rengi: #222;
renk: #fff;
kenar boşluğu: 10 piksel;
}
düğme: fareyle üzerine gelin {
imleç: işaretçi;
}
/* düğme stili sonu */
/* Şebeke */
.Şebeke {
arka plan rengi: #00ff44;
renk: #000;
}
/* operatör stili sonu */
#3 JavaScript ile İşlevsellik Ekleme
Şimdi JavaScript kullanarak bir hesap makinesi oluşturmanın görünür yönlerini ayrıntılı olarak tartıştık . Hesap makinesini işlevsel hale getirmeye ve hesaplama görevlerini gerçekleştirmeye yardımcı olacak bazı komut dosyaları yapalım. Kodu daha hızlı geliştirmenize yardımcı olacak JS kodunun oluşturulmasıyla ilgili birkaç adımı anlayacağız.
- JavaScript kullanarak bireysel işlevler için oluşturduğunuz HTML etiketlerini çağırmanız gerekecektir. Bu girdilerin her birini çağırmak ve bunları bir değişkende saklamak için seçicileri kullanacaksınız. Her fonksiyon için bir değişkene ihtiyacınız olacak. Örneğin, görüntüleme, rakamlar, temizleme işlevi ve eşit işlevi için ayrı bir değişken vardır. Bu durumda getElementbyID() işlevi kullanılabilir.
- Diyelim ki 20+30 gibi basit bir hesaplama yapmak istiyorsunuz, yukarıdaki yöntemi kullanarak önce 20'yi arayacaksınız. 30'u ve aritmetik işlevini çağırmadan önce, daha önce çağrılan 20'yi bir yere kaydetmeniz gerekecektir. Kodunuz, hesaplamaları kolaylaştırmak için sayıların geçici olarak saklanması için yer açmalıdır. Boş bir dizi, sayıyı bir dize olarak tutacaktır. Eval() kullanarak diğer sayıyı ve aritmetik fonksiyonu ekledikten sonra sayıları değerlendirebilir ve cevabı alabilirsiniz.
- Hesap makinesindeki düğmelere tıkladığınızda, bazı sonuçların görüntülenmesini veya değerlendirilmesini istersiniz. Bunun için kodunuza olay dinleyicileri eklemelisiniz. Bu şekilde, düğmeler tıklamayı dinleyecektir. Olay dinleyicilerine işlev eklediğinizde, tıklama sesinde görevi otomatik olarak gerçekleştireceklerdir.
- Görüntüleme birimi, tıkladığınız düğmenin değerini döndürmelidir. Olayın meydana geldiği öğenin değerini döndüreceği için event.target nesnesini kullanabilirsiniz. Örneğin, üzerine tıkladığınız anda “1” sayısının görüntülenmesini istiyorsunuz. Bunun için sayıyı bir değişken şeklinde saklamanız gerekecektir. “İf” işlevini kullanarak, sıfır olup olmadığını belirlemek için mevcut değişkeni karşılaştıracaksınız. Sıfır olması durumunda, onu boş bir dizeye eklersiniz, böylece hiçbir sayı sıfırla başlamaz. Son olarak, “1” anahtarının içeriğini görüntüleme değişkenine ekleyeceksiniz. Sonuç olarak, sayı tuşu tetiklenir tetiklenmez, ekran kutusunda içeriği göreceksiniz.
- Son olarak, görüntülenen sayılara matematiksel işlemlerin uygulanmasına yardımcı olacak işlevi oluşturmanız gerekir. JavaScript'teki hesap makinenizin matematiksel hesaplamaları kolaylıkla gerçekleştirebildiğinden emin olun . Bu işlevi etkinleştirmek için sözdizimleri ve yöntemlerin bir kombinasyonunu kullanabilirsiniz. İncelemeniz için aşağıdaki JavaScript öğelerinin kodunu belirledik.
// tüm düğmeleri seç
const düğmeleri = document.querySelectorAll('düğme');
// <input type=”text” class=”display” disable> öğesini seçin
const display = document.querySelector('.display');
// her butona eventListener ekle
button.forEach(işlev(düğme) {
button.addEventListener('tıklayın', hesaplayın);
});
// fonksiyonu hesapla
fonksiyon hesapla(olay) {
// mevcut tıklanan butonların değeri
const clickedButtonValue = event.target.value;
if (clickedButtonValue === '=') {
// ekranın boş olup olmadığını kontrol edin, ardından sadece hesaplamayı yapın
if (display.value !== ”) {
// görüntülenecek cevabı hesapla ve göster
display.value = eval(display.value);
}
} else if (clickedButtonValue === 'C') {
// ekrandaki her şeyi temizle
gösterge.değer = ”;
} Başka {
// aksi takdirde ekrana birleştir
display.value += tıklananButtonValue;

}
}
Mutlaka Okuyun: Java Mimarisi ve Bileşenleri Açıklandı
Özetliyor
JavaScript'te bir hesap makinesi oluşturuyor veya daha karmaşık bir proje üzerinde çalışıyor olsanız da fikir, içeriği mantıklı ve anlaşılır bir şekilde parçalamaktır. Bu, tam sözdizimini türetmenize yardımcı olacak ve akıcı bir web uygulamasına yol açacaktır. Doğrudan kodlama ile başlamak yerine, kullandığınız teknolojinin gerçek amacının ne olduğunu anlamaya çalışın, sizi koda yönlendirecektir.
Java, tam yığın yazılım geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin Yazılım Geliştirmede Yönetici PG Programına göz atın – Çalışan profesyoneller için tasarlanmış ve 500 saatten fazla zorlu eğitim sunan Tam Yığın Geliştirmede Uzmanlık , 9+ proje ve ödev, IIIT-B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.
