Skip to content

Commit 523719a

Browse files
committed
Translate 20_Day_Writing_Clean_Code document to Turkish
1 parent dfc09e0 commit 523719a

File tree

1 file changed

+360
-0
lines changed

1 file changed

+360
-0
lines changed
Lines changed: 360 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,360 @@
1+
<div align="center">
2+
<h1> 30 Days Of JavaScript: Writing Clean Codes</h1>
3+
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
4+
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
5+
</a>
6+
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
7+
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
8+
</a>
9+
10+
<sub>Author:
11+
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
12+
<small> January, 2020</small>
13+
</sub>
14+
15+
</div>
16+
17+
[<< Gün 19](../19_Day_Closuers/19_day_closures.md) | [Gün 21 >>](../21_Day_DOM/21_day_dom.md)
18+
19+
![Thirty Days Of JavaScript](../../images/banners/day_1_20.png)
20+
- [Gün 20](#gun-20)
21+
- [Temiz Kod Yazmak](#temiz-kod-yazmak)
22+
- [JavaScript Stil Kılavuzu](#javaScript-stil-kılavuzu)
23+
- [Neden stil kılavuzuna ihtiyacımız var?](#neden-stil-kılavuzuna-ihtiyacımız-var)
24+
- [Airbnb JavaScript Style Guide](#airbnb-javascript-style-guide)
25+
- [Standard JavaScript Style Guide](#standard-javascript-style-guide)
26+
- [Google JavaScript Style Guide](#google-javascript-style-guide)
27+
- [JavaScript Kodlama Kuralları](#javaScript-kodlama-kuralları)
28+
- [30DaysOfJavaScript'te kullanılan kurallar](#30DaysOfJavaScript-kullanılan-kurallar)
29+
- [Değişkenler](#Degiskenler)
30+
- [Arrays(Diziler)](#arrays)
31+
- [Fonksiyonlar](#fonksiyonlar)
32+
- [Döngüler](#donguler)
33+
- [Nesneler](#nesneler)
34+
- [Koşullar](#kosullar)
35+
- [Sınıflar](#sınıflar)
36+
37+
# Gün 20
38+
39+
## Temiz Kod Yazmak
40+
41+
### JavaScript Stil Kılavuzu
42+
43+
JavaScript stil kılavuzu, JavaScript kodunun nasıl yazılması ve düzenlenmesi gerektiğini söyleyen bir dizi standarttır. Bu bölümde JavaScript rehberlerinden ve temiz kod nasıl yazılırdan bahsedeceğiz.
44+
45+
JavaScript bir programlama dilidir ve insan dili gibi syntax(sözdizimi) yapısına sahiptir. JavaScript'in sözdizimi, kolaylık ve basitlik adına belirli bir stil yönergesini izleyerek yazılmalıdır.
46+
47+
### Neden stil kılavuzuna ihtiyacımız var?
48+
49+
Çok uzun zamandır tek başına kodlama yapıyorsun ama şimdi bir ekip halinde çalışıyorsun gibi düşünelim. Tek çalıştığın sürece nasıl kod yazdığınız bu kadar önemli değil, ancak 10 veya 20 veya daha fazla geliştirici ekibinde bir projede ve aynı kod tabanı üzerinde çalıştığınızda, kod dağınık ve yönetilmesi zor olacaktır. İzlenecek herhangi bir yönerge yoktur.
50+
51+
Kendi yönergelerinizi ve sözleşmelerinizi geliştirebilir veya iyi geliştirilmiş yönergeleri de uyarlayabilirsiniz. Bize en yaygın bilinen yönergeleri bildirin.
52+
En yaygın JavaScript Stil Kılavuzları
53+
54+
- Airbnb JavaScript Style Guide
55+
- JavaScript Standard Style Guide
56+
- Google JavaScript Style Guide
57+
58+
#### Airbnb JavaScript Style Guide
59+
60+
Airbnb, internetteki en popüler JavaScript stil kılavuzlarından birine sahiptir. JavaScript'in neredeyse her yönünü de kapsar ve birçok geliştirici ve şirket tarafından benimsenmiştir. [Airbnb stil rehberine](https://github.com/airbnb/javascript) göz atabilirsiniz. ben de denemenizi tavsiye ederim. Stillerinin kullanımı çok kolay ve anlaşılması kolaydır.
61+
62+
#### Standard JavaScript Style Guide
63+
64+
Bu kılavuz Airbnb kadar popüler değil ama bakmaya değer. [Stil kılavuzlarında](https://standardjs.com/) noktalı virgülü kaldırdılar.
65+
66+
#### Google JavaScript Style Guide
67+
68+
Google'ın yönergesi hakkında pek bir şey söylemiyorum ve kullanmadım, bunun yerine şu [link'e](https://google.github.io/styleguide/jsguide.html) bir göz atmanızı öneririm.
69+
70+
### JavaScript Kodlama Kuralları
71+
72+
Bu görevde ayrıca genel JavaScript kodlama yazım kurallarını ve kılavuzlarını kullandık. Kodlama kuralları, bir kişi, bir ekip veya bir şirket tarafından geliştirilen programlama için stil yönergeleridir.
73+
74+
Kodlama kuralları aşağıdakilere yardımcı olur:
75+
76+
- temiz kod yazmak
77+
- kod okunabilirliğini geliştirmek
78+
- kodun yeniden kullanılabilirliğini ve sürdürülebilirliğini geliştirmek için
79+
80+
Kodlama kuralları şunları içerir:
81+
82+
- Değişkenler için adlandırma ve bildirim kuralları
83+
- Fonksiyonlar için adlandırma ve bildirim kuralları
84+
- Boşluk, girinti ve yorumların kullanımına ilişkin kurallar
85+
- Programlama uygulamaları ve ilkeleri
86+
87+
#### 30DaysOfJavaScript'te kullanılan kurallar
88+
89+
Bu meydan okumada normal JavaScript kuralını takip ediyoruz, ancak yazma tercihimi de ekledim.
90+
91+
- Değişkenler ve fonksiyonlar için camelCase kullandık.
92+
- Tüm değişken isimleri bir harfle başlar.
93+
- Sabitler, diziler, nesneler ve işlevler için *const* kullanmayı seçtik. Çift alıntı yerine tek tırnak veya ters tik kullanmayı tercih ettik. Tek alıntı moda oluyor.
94+
- Kodumuzdan noktalı virgülleri de kaldırdık ama bu kişisel tercih meselesidir.
95+
- Aritmetik operatörler, atama operatörleri ve virgülden sonra boşluk
96+
- Fonksiyon bildirimi yerine arrow function
97+
- Fonksiyon bir satır ise, implicit return yerine explicit return
98+
- Bir nesnenin son değerinin sonunda virgül yok
99+
- Daha uzun versiyon yerine +=, -=, *= /=, **= bunu tercih ediyoruz
100+
- console.log()'u kullandığımızda, konsolun nereden geldiğini belirlemek için bir etiket dizgisi ile yazdırmak iyidir.
101+
102+
#### Değişkenler
103+
104+
```js
105+
106+
let firstName = 'Asabeneh'
107+
let lastName = 'Yetayeh'
108+
let country = 'Finland'
109+
let city = 'Helsinki'
110+
111+
const PI = Math.PI
112+
const gravity = 9.81
113+
```
114+
115+
#### Arrays(Diziler)
116+
117+
Dizi isimlerini çoğul yapmayı seçtik
118+
119+
- names
120+
- numbers
121+
- countries
122+
- languages
123+
- skills
124+
- fruits
125+
- vegetables
126+
127+
```js
128+
// arrays
129+
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
130+
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]
131+
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland']
132+
const languages = ['Amharic', 'Arabic', 'English', 'French', 'Spanish']
133+
const skills = ['HTML', 'CSS', 'JavaScript', 'React', 'Python']
134+
const fruits = ['banana', 'orange', 'mango', 'lemon']
135+
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']
136+
```
137+
138+
#### Fonksiyonlar
139+
140+
Şimdiye kadar çok tanıdık fonksiyon declaration, expression fonksiyon, arrow fonksiyon ve anonymous fonksiyon sahipsiniz. Bu zorlukta, diğer fonksiyonlar yerine arrow fonksiyonunu kullanma eğilimindeyiz. Arrow fonksiyonu, diğer fonksiyonların yerine geçmez. Ayrıca arrow fonksiyon ve fonksiyon declaration tam olarak aynı değildir. Bu yüzden ne zaman kullanacağınızı ve ne zaman kullanmayacağınızı bilmelisiniz. Farkı diğer bölümlerde ayrıntılı olarak ele alacağım. Fonksiyon bir satır ise, implicit return yerine explicit return kullanacağız.
141+
142+
```js
143+
// bir kişinin tam adını döndüren fonksiyon
144+
const printFullName = (firstName, lastName) => firstName + ' ' + lastName
145+
146+
// bir sayının karesini döndüren fonksiyon
147+
const square = (n) => n * n
148+
149+
// rastgele hexa renkleri oluşturan fonksiyon
150+
const hexaColor = () => {
151+
const str = '0123456789abcdef'
152+
let hexa = '#'
153+
let index
154+
for (let i = 0; i < 6; i++) {
155+
index = Math.floor(Math.random() * str.length)
156+
hexa += str[index]
157+
}
158+
return hexa
159+
}
160+
161+
// tarih ve saati gösteren bir fonskiyon
162+
const showDateTime = () => {
163+
const now = new Date()
164+
const year = now.getFullYear()
165+
const month = now.getMonth() + 1
166+
const date = now.getDate()
167+
let hours = now.getHours()
168+
let minutes = now.getMinutes()
169+
if (hours < 10) {
170+
hours = '0' + hours
171+
}
172+
if (minutes < 10) {
173+
minutes = '0' + minutes
174+
}
175+
176+
const dateMonthYear = date + '.' + month + '.' + year
177+
const time = hours + ':' + minutes
178+
const fullTime = dateMonthYear + ' ' + time
179+
return fullTime
180+
}
181+
```
182+
183+
`new Dat().toLocaleString()` geçerli tarih ve saati görüntülemek için de kullanılabilir. `toLocaleString()` yöntemleri farklı argümanlar alır. Bu [bağlantıdan](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) tarih ve saat hakkında daha fazla bilgi edinebilirsiniz.
184+
185+
#### Döngüler
186+
187+
Bu zorluklarda birçok döngü türünü ele alıyoruz. Normal for döngüsü, while döngüsü, do while döngüsü, for of döngüsü, forEach döngüsü ve for in döngüsü.
188+
Bunları nasıl kullandığımızı görelim:
189+
190+
```js
191+
for (let i = 0; i < n; i++){
192+
console.log()
193+
}
194+
195+
// dizi değişkenlerini tanımlıyoruz
196+
const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
197+
198+
// normal for döngüsü kullanarak bir diziyi yineleme
199+
let len = names.length;
200+
for(let i = 0; i < len; i++){
201+
console.log(names[i].toUpperCase())
202+
}
203+
204+
205+
// for of kullanarak bir diziyi yinelemek
206+
for( const name of names) {
207+
console.log(name.toUpperCase())
208+
}
209+
210+
// forEach kullanarak bir diziyi yineleme
211+
names.forEach((name) => name.toUpperCase())
212+
213+
214+
const person = {
215+
firstName: 'Asabeneh',
216+
lastName: 'Yetayeh',
217+
age: 250,
218+
country: 'Finland',
219+
city: 'Helsinki',
220+
skills: ['HTML','CSS','JavaScript','React','Node','MongoDB','Python','D3.js'],
221+
isMarried: true
222+
}
223+
for(const key in person) {
224+
console.log(key)
225+
}
226+
227+
```
228+
229+
#### Nesneler
230+
231+
Nesne değişmezini *const* ile tanımlarız.
232+
233+
```js
234+
// nesne değişmezi tanımlama
235+
const person = {
236+
firstName: 'Asabeneh',
237+
lastName: 'Yetayeh',
238+
age: 250,
239+
country: 'Finland',
240+
city: 'Helsinki',
241+
skills: ['HTML','CSS','JavaScript','TypeScript', 'React','Node','MongoDB','Python','D3.js'],
242+
isMarried: true
243+
}
244+
// nesne anahtarları aracılığıyla yineleme
245+
for(const key in person) {
246+
console.log(key, person[key])
247+
}
248+
249+
```
250+
251+
#### Koşullar
252+
253+
Önceki zorluklarda if, if else, if else if else, switch ve üçlü operatörleri bahsetmiştik.
254+
255+
```js
256+
// syntax(sözdimi)
257+
if (condition) {
258+
// kodun bu kısmı doğru koşul için çalıştırılır
259+
} else {
260+
// kodun bu kısmı yanlış koşul için çalıştırılır
261+
}
262+
```
263+
264+
```js
265+
// if else
266+
let num = 3
267+
if (num > 0) {
268+
console.log(`${num} is a positive number`)
269+
} else {
270+
console.log(`${num} is a negative number`)
271+
}
272+
// 3 is a positive number
273+
```
274+
275+
```js
276+
// if else if else if else
277+
278+
let a = 0
279+
if (a > 0) {
280+
console.log(`${a} is a positive number`)
281+
} else if (a < 0) {
282+
console.log(`${a} is a negative number`)
283+
} else if (a == 0) {
284+
console.log(`${a} is zero`)
285+
} else {
286+
console.log(`${a} is not a number`)
287+
}
288+
```
289+
290+
```js
291+
// Daha fazla switch kullanımı
292+
let dayUserInput = prompt('What day is today ?')
293+
let day = dayUserInput.toLowerCase()
294+
295+
switch (day) {
296+
case 'monday':
297+
console.log('Today is Monday')
298+
break
299+
case 'tuesday':
300+
console.log('Today is Tuesday')
301+
break
302+
case 'wednesday':
303+
console.log('Today is Wednesday')
304+
break
305+
case 'thursday':
306+
console.log('Today is Thursday')
307+
break
308+
case 'friday':
309+
console.log('Today is Friday')
310+
break
311+
case 'saturday':
312+
console.log('Today is Saturday')
313+
break
314+
case 'sunday':
315+
console.log('Today is Sunday')
316+
break
317+
default:
318+
console.log('It is not a week day.')
319+
}
320+
```
321+
322+
```js
323+
// ternary (Üçlü)
324+
325+
let isRaining = true
326+
isRaining
327+
? console.log('You need a rain coat.')
328+
: console.log('No need for a rain coat.')
329+
```
330+
331+
#### Sınıflar
332+
333+
Sınıfı büyük harfle başlayan CamelCase ile tanımlıyoruz
334+
335+
```js
336+
// syntax
337+
class ClassName {
338+
// code goes here
339+
}
340+
```
341+
342+
```js
343+
// sınıfımızı oluşturuyoruz
344+
class Person {
345+
constructor(firstName, lastName) {
346+
console.log(this) // buradan çıktı alıyoruz
347+
this.firstName = firstName
348+
this.lastName = lastName
349+
}
350+
}
351+
352+
```
353+
354+
Takip ettiğiniz stil kılavuzu ne olursa olsun tutarlı olun. Bazı programlama paradigmalarını ve tasarım modellerini takip edin. Unutmayın, kodunuzu belirli bir düzende veya şekilde yazmazsanız, kodunuzu okumak zor olacaktır. Bu nedenle, okunabilir kod yazarak kendiniz veya kodunuzu okuyacak biri için bir iyilik yapın.
355+
356+
🌕 Düzenlisin. Artık temiz kod yazmayı biliyorsun, böylece İngilizce bilen herkes kodunuzu anlayabilir. Her zaman ilerliyorsunuz ve mükemmelliğe giden yolda 20 adım öndesiniz.
357+
358+
🎉 TEBRİKLER ! 🎉
359+
360+
[<< Gün 19](../19_Day_Closuers/19_day_closures.md) | [Gün 21 >>](../21_Day_DOM/21_day_dom.md)

0 commit comments

Comments
 (0)