-
Notifications
You must be signed in to change notification settings - Fork 2
/
03-hesap-makinesi.htm
215 lines (159 loc) · 7.25 KB
/
03-hesap-makinesi.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
<link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
<script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
ALGORİTMA:
- İki metin kutusu (TextBox) ile, işlem yapılacak sayılar isteniyor.
- Matematiksel işlemleri yapmak için, dört düğme (Button) kullanılmış.
- Yapılan işlemin sonucu, başka bir metin kutusunda gösteriliyor.
TEMEL EĞİTİM:
Konu anlatımları ve daha fazlası için mobil uygulamayı kullanabilirsiniz.
(Android) https://play.google.com/store/apps/details?id=com.bugraozden.cik
PROJE ANLATIMI:
Projenin, adım adım anlatım videosu.
https://youtu.be/fAMWzewpE1Q
*/
// Giriş ve sonuç metin kutuları. (TextBox)
var txtSayi1
var txtSayi2
var txtSonuc
// İşlem düğmeleri. (Button)
var btnTopla
var btnCikar
var btnCarp
var btnBol
// İlk çalıştırılan fonksiyon.
var start = function() {
// Sayfanın arka plan rengini duman grisi olarak belirle.
page.color = "whitesmoke"
// Birinci sayı girişi için metin kutusu (TextBox) oluştur.
txtSayi1 = createTextBox()
// Metin olarak algılanması için, tırnak içinde yazalım.
txtSayi1.text = "0"
txtSayi1.title = "Sayı 1:"
txtSayi1.left = 20
txtSayi1.top = 50
// İkinci sayı girişi için metin kutusu oluştur.
txtSayi2 = createTextBox()
txtSayi2.text = "0"
txtSayi2.title = "Sayı 2:"
txtSayi2.left = txtSayi1.left
// Bu nesneyi, txtSayi1 nesnesinin 40px (piksel) altına yerleştir.
txtSayi2.top = txtSayi1.top + txtSayi1.height + 40
// Toplama düğmesi oluştur.
btnTopla = createButton()
btnTopla.text = "Topla"
btnTopla.left = txtSayi1.left
// Bu nesneyi, txtSayi2 nesnesinin 10px altına yerleştir.
btnTopla.top = txtSayi2.top + txtSayi2.height + 10
btnTopla.onClick(toplamaYap)
// Çıkartma düğmesi oluştur.
btnCikar = createButton()
btnCikar.text = "Çıkart"
// Bu nesneyi, btnTopla nesnesinin 10px sağına yerleştir.
btnCikar.left = btnTopla.left + btnTopla.width + 10
btnCikar.top = btnTopla.top
// Nesnenin rengini domates kırmızısı yap.
btnCikar.color = "tomato"
btnCikar.onClick(cikarmaYap)
// Çarpma düğmesi oluştur.
btnCarp = createButton()
btnCarp.text = "Çarp"
btnCarp.left = txtSayi1.left
// Bu nesneyi, btnTopla nesnesinin 10px altına yerleştir.
btnCarp.top = btnTopla.top + btnTopla.height + 10
btnCarp.color = "lightgray"
btnCarp.onClick(carpmaYap)
// Bölme düğmesi oluştur.
btnBol = createButton()
btnBol.text = "Böl"
// Nesneyi, btnCikar nesnesi ile aynı soldan boşluk olsun.
btnBol.left = btnCikar.left
// Nesneyi, btnCarp nesnesi ile aynı yukarıdan boşluk olsun.
btnBol.top = btnCarp.top
btnBol.color = "lightgray"
btnBol.onClick(bolmeYap)
// Sonuç için metin kutusu oluştur.
txtSonuc = createTextBox()
txtSonuc.title = "Sonuç:"
txtSonuc.left = txtSayi1.left
txtSonuc.top = btnCarp.top + btnCarp.height + 40
}
// Toplama yapan fonksiyon
var toplamaYap = function() {
// Toplama işlemini yap ve sonucu, metin kutusuna yaz.
txtSonuc.text = num(txtSayi1.text) + num(txtSayi2.text)
// NOT: num(metin) fonksiyonu,
// metin olarak gönderilen parametrenin,
// sayıya çevrilmiş halini cevap verir.
// ÖRNEK KULLANIMLAR:
// num("5") cevap: 5
// num("5.5") cevap: 5.5
// num("5.5", "integer") cevap: 5
// str(5) cevap: "5"
// NOT: str(numara) fonksiyonu ise,
// sayı olarak gönderilen parametrenin,
// metne çevrilmiş halini cevap verir.
}
// Çıkarma yapan fonksiyon.
var cikarmaYap = function() {
// Çıkarma işlemini sonucunu metin kutusuna yaz.
txtSonuc.text = num(txtSayi1.text) - num(txtSayi2.text)
}
// Çarpma yapan fonksiyon.
var carpmaYap = function() {
// Çarpma işlemini sonucunu metin kutusuna yaz.
txtSonuc.text = num(txtSayi1.text) * num(txtSayi2.text)
}
// Bölme yapan fonksiyon.
var bolmeYap = function() {
// Bölüme işlemini sonucunu metin kutusuna yaz.
txtSonuc.text = num(txtSayi1.text) / num(txtSayi2.text)
// Not: Ondalıklı sayıyı, tam sayıya çevirmek:
// 3 / 2 işleminin cevabı ondalıklı sayıdır. 1.5
// num("1.5", "integer") fonksiyonu, sonucu tam sayıya çevirir. 1
// txtSonuc.text = num(num(txtSayi1.text) / num(txtSayi2.text), "integer")
}
/*
GELİŞTİRME ÖNERİLERİ:
- Her işlem düğmesine basıldığında, sonuç metin kutusunun başlığı (.title) değişebilir.
"Toplama işleminin sonucu:", "Çıkarma işleminin sonucu:" vb.
- Sonuç, tam işlem olarak gösterilebilir. 2 + 1 = 3
- İşleme devam et düğmesi eklenebilir. Sonucu, ilk metin kutusuna yazar
ve ikinci metin kutusunu temizler.
İNGİLİZCE - TÜRKÇE SÖZLÜK:
Kullanılan kelimelerin, türkçe karşılıkları.
variable (kısaltılmışı var) = değişken
start = başlat
page = sayfa
color = renk
create = oluştur, oluşturmak
text = metin
box = kutu
title = başlık
pixel (kısaltılmışı px) = piksel, görüntü elemanı
top = üst
left = sol
width = genişlik
height = yükseklik
button = buton, düğme
on = üzerinde, üstünde, esnasında
click = tıkla, tıklamak
function = fonksiyon, işlev
number (kısaltılmışı num) = numara, sayı
integer = tam sayı tipinde değişken. 110
float = ondalıklı sayı tipinde değişken. 0.5
*/
</script>
</head>
<body>
<!-- HTML içeriği -->
</body>
</html>