basicjs-turkce/02-carpim-tablosu.htm at main · bug7a/basicjs-turkce · GitHub

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
<!DOCTYPE html>
<html>
    <head>

        <title>Çarpım Tablosu</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:

        Bir metin kutusu (TextBox) ile, işlem yapılacak sayı isteniyor.
        Ve düğmeye (Button) basıldığında; verilen sayının, 1 den 10 a kadar çarpımları listeleniyor.


        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://www.youtube.com/watch?v=euFpefGUNYs

        */

        // Sayının alınacağı metin kutusu. (TextBox)
        var txtSayi
        // Oluşturma düğmesi. (Button)
        var btnOlustur
        // Çarpım tablosunun listeleneceği etiket. (Label)
        var lblCarpimTablosu

        // İlk çalıştırılan fonksiyon.
        var start = function() {

            // Sayfanın arka plan rengini beyaz duman olarak belirle.
            page.color = "whitesmoke"

            // Metin kutusu (TextBox) nesnesi oluştur.
            txtSayi = createTextBox()
            // Nesnenin içeriğini belirle.
            txtSayi.text = "8"
            // Nesnenin başlığını belirle.
            txtSayi.title = "Bir sayı giriniz:"
            // Nesnenin sola olan mesafesini belirle.
            txtSayi.left = 50
            // Nesnenin yukarıya olan mesafesini belirle.
            txtSayi.top = 50
            // Nesnenin genişliğini belirle. (Pixel cinsinden)
            txtSayi.width = 130

            // Düğme (Button) nesnesi oluştur.
            btnOlustur = createButton()
            // Nesnenin üzerindeki yazıyı belirle.
            btnOlustur.text = "Oluştur"
            // Konumunu, txtSayi nesnesine göre hesaplayarak belirle.
            btnOlustur.left = txtSayi.left
            btnOlustur.top = txtSayi.top + txtSayi.height + 10
            // Düğmeye basıldığında çalışacak fonksiyonu belirle.
            btnOlustur.onClick(tabloOlustur)

            // Etiket (Label) nesnesi oluştur.
            lblCarpimTablosu = createLabel()
            // Nesnenin içeriğini temizle.
            lblCarpimTablosu.text = ""
            // Sola olan mesafesi txtSayi nesnesinin 30px sağında olsun.
            lblCarpimTablosu.left = txtSayi.left + txtSayi.width + 30
            // Yukarıya olan mesafesi txtSayi nesnesi ile aynı olsun.
            lblCarpimTablosu.top = txtSayi.top

        }

        // Düğmeye basıldığında, çarpım tablosunu oluşturan fonksiyon.
        var tabloOlustur = function() {

            // Etiketin içini temizle.
            lblCarpimTablosu.text = ""

            // 10 kere tekrar et.
            for (var i = 1; i <= 10; i++) {

                // İşlemin görünümünü oluştur. Örnek: 1 x 7 =
                var islem = i + " x " + txtSayi.text + " = "

                // Çarpma işleminin sonucunu hesapla.
                var sonuc = num(txtSayi.text) * i

                // Not: num(metin) fonksiyonu,
                // metin olarak gönderilen parametrenin,
                // sayıya çevrilmiş halini cevap verir.

                // İşlemi etikete ekle
                lblCarpimTablosu.text = lblCarpimTablosu.text + islem + sonuc + "<br>"

                // Not: <br> kelimesi, HTM (Hyper Text Markup) dilinde,
                // bir alt satıra geçmek için kullanılır.

            }

        }

        /*

        GELİŞTİRME ÖNERİSİ:

        lblCarpimTablosu nesnesinin sağında, aynısından bir tane daha olsun ve
        istenen sayının bir fazlası ile ikinci bir çarpım tablosu daha oluşturulsun.


        İ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ı

        */

        </script>

    </head>
    <body>

        <!-- HTML içeriği -->

    </body>
</html>