-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path29-use-with-html.htm
135 lines (93 loc) · 4.34 KB
/
29-use-with-html.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
<!DOCTYPE html>
<html>
<head>
<title>HTML ile Birlikte Kullanım</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
overflow: auto !important;
font-family: Arial;
}
.color-btn {
background-color: white;
padding: 10px;
border-radius: 8px;
opacity: 0.9;
font-weight: bold;
cursor:pointer;
color:rgba(255, 255, 255, 0.85);
filter: brightness(120%);
}
.color-btn:hover {
filter: brightness(100%);
}
</style>
<script>
/*
HTML ve CSS ile geliştirilmiş, bir web sayfasının veya uygulamanın,
html kodlarının içindeki bir elemente, basic.js nesnelerini eklemek.
*/
// DEĞİŞKENLER
var boxDIV
var boxColor
var lblColor
// ÖZEL FONKSİYONLAR
// İlk çalışan fonksiyon.
var start = function() {
// Renk kutusunu oluştur.
// Renk Arka Plan Kutusu
boxDIV = createBox(0, 0, 80, 80)
boxDIV.border = 0
boxDIV.color = "#141414"
boxDIV.round = 8
// Bu nesneyi, Belirtilen DIV elementinin içine taşı.
document.getElementById("color-box").appendChild(boxDIV.element)
// Renk Kutusu
boxDIV.boxColor = createBox(0, 0, 30, 30)
boxDIV.add(that)
that.color = "white"
that.border = 0
that.round = 4
that.center()
that.top -= 10
// Renk İsmi
boxDIV.lblColor = createLabel(0, 0)
boxDIV.add(that)
that.aline(boxDIV.boxColor, "bottom", 5)
that.text = "white"
that.left = 0
that.width = boxDIV.width
that.textAlign = "center"
that.fontSize = 14
that.textColor = "white"
}
// DİĞER FONKSİYONLAR
// Renk kutusunu değiştiren fonksiyon.
var changeColor = function(color) {
// Renk ve ismini değiştir.
boxDIV.boxColor.color = color
boxDIV.lblColor.text = color
}
</script>
</head>
<body>
<div style="position:relative;width:500px;background-color:whitesmoke;padding: 30px;border-radius: 8px;">
<h2>Kodlama Nedir?</h2>
<p>Yapılmasını istediğimiz görevlerin, bilgisayar tarafından gerçekleştirilmesini sağlamak için kod olarak adlandırılan kelimeleri kullanıyoruz. Bu kodların, yazılma eylemine ise kodlama yapmak (kod yazmak) diyoruz.</p>
<p>Aşağıdaki renkler, basıldığında işlem yapar:</p>
<p style="margin-bottom: 40px;">
<span onclick="changeColor('orangered')" class="color-btn" style="background-color:orangered;">Kırmızı</span>
<span onclick="changeColor('steelblue')" class="color-btn" style="background-color:steelblue;">Mavi</span>
<span onclick="changeColor('seagreen')" class="color-btn" style="background-color:seagreen;">Yeşil</span>
</p>
<p>Aşağıdaki görüntü alanında, robot isminde bir resim var. robot.ilerle() kodunu çalıştırarak; bilgisayardan, robot resmini bir adım sağ doğru hareket ettirmesini istemiş olacağız.</p>
<p>Kodu çalıştır düğmesine basalım ve bilgisayarın, kod alanına yazılanları nasıl uyguladığını görelim.</p>
<!-- RENK KUTUSUNU TAŞIYAN DIV -->
<div id="color-box" style="position: absolute;top:20px;right:20px;width:80px;height:80px;"></div>
</div>
</body>
</html>