msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

day 8 translated to Turkish

Browse Source
pull/423/head
Hasan Hüseyin Alav 2 years ago committed by GitHub
parent 0e38ae4932
commit 654512b2a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 2630 additions and 0 deletions
Show Stats Download Patch File Download Diff File

598
Turkish/08_Day_Objects/08_day_objects.md
Unescape View File

@ -0,0 +1,598 @@
<div align="center">
<h1> 30 Günde Javascript: Objects - Nesneler</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<sub>Çevirmen:
<a href="https://github.com/hsynalv" target="_blank">Hasan Hüseyin Alav</a><br>
<small> Temmuz 2022</small>
</sub>
</div>
[<< 7. Gün](../07_Day_Functions/07_day_functions.md) | [9. Gün >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md)
![Thirty Days Of JavaScript](/images/banners/day_1_8.png)
- [📔 8. Gün](#-day-8)
- [Scope - Kapsam Alanları](#scope---kapsam-alanları)
- [Window Global Object](#window-global-object)
- [Global Scope](#global-scope)
- [Local Scope](#local-scope)
- [📔 Object - Nesne](#📔-object---nesne)
- [Boş Nesne Oluşturmak](#boş-nesne-oluşturmak)
- [Değerlerle Birlikte Bir Nesne Oluşturmak](#değerle-birlikte-nesne-oluşturmak)
- [Nesneden Değerleri Alabilmek](#nesneden-değerleri-alabilmek)
- [Object - Nesne Methodu Oluşturma](#object-methodları-oluşturma)
- [Object İçin Yeni Bir key Oluşturma](#object-için-yeni-bir-anahtar-değer-key-oluşturma)
- [Object Methodları](#object-methodları)
- [Object.keys() Metodu](#objectkeys-methodu)
- [Object.values() Methodu](#objectvalues-methodu)
- [Object.entries() Methodu](#objectentries-methodus)
- [hasOwnProperty() Methodu](#hasownproperty-methodu)
- [💻 Exercises](#-exercises)
- [Exercises: Level 1](#exercises-level-1)
- [Exercises: Level 2](#exercises-level-2)
- [Exercises: Level 3](#exercises-level-3)
# 📔 8. Gün
## Scope - Kapsam Alanları
Bu konu değişken tanımlamanın temel kısmını oluşturur. Farklı veri türlerini depolamak için değişken tanımlarız. Bir değişkeni tanımlamak için `var`, `let` veya `const` anahtar sözcüklerini kullanırız. Bir değişken farklı kapsam alanlarında tanımlanabilir. Bu bölümde, `var` veya `let` kullandığımızda kapsam değişkenlerinin kodumuzu nasıl etkilediğini göreceğiz.
Değişken scope'ları şu şekilde olabilir.
- Global
- Local
> `var`, `let` veya `const` olmadan tanımlanan her değişken global scope olarak geçerlidir.
Scope.js adında bir dosyanızın olduğunu düşünelim.
### Window Global Object
Geçerli dosya içerisinde global scope da diyebiliriz bu duruma
Console.log() metodunu kullanmadan tarayıcınızı açın ve kontrol edin; tarayıcıya a veya b yazarsanız a ve b değerlerini görebilirsiniz. Bu durum a ve b değişkenlerinin zaten hali hazırda mevcut olduğu anlamına gelir.
```js
//scope.js dosyası içerisi
a = 'JavaScript' // bir değişkeni let veya const anahtar kelimeleri olamadan tanımlamako değişkeni global hale getirir ve geçerli dosya içerisinde her yerden erişilebilir.
b = 10 // bu gloabl scope olarak tanımlanmıştır ve dosya içerisinde her yerden erişilebilir.
function letsLearnScope() {
console.log(a, b)
if (true) {
console.log(a, b)
}
}
console.log(a, b) // erişilebilir
```
### Global scope
Aynı dosyanın her yerinde global olarak tanımlanan bir değişkene erişilebilir. Global olma durumu iki şekilde olabilir Dosyanın direkt kendisinde global olabilir veya bazı kod bloklarına göre global olabilir.
```js
//scope.js
let a = 'JavaScript' // bu dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır
let b = 10 // bu da dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır
function letsLearnScope() {
console.log(a, b) // JavaScript 10, erişilebilir
if (true) {
let a = 'Python'
let b = 100
console.log(a, b) // Python 100
}
console.log(a, b)
}
letsLearnScope()
console.log(a, b) // JavaScript 10, erişilebilir
```
### Local scope
Yerel olarak tanımlanan bir değişkene yalnızca belirli kod bloğunda erişilebilir.
- Block Scope
- Function Scope
```js
//scope.js dosyasının içerisi
let a = 'JavaScript' // bu dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır.
let b = 10 // bu dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır.
// Function scope
function letsLearnScope() {
console.log(a, b) // JavaScript 10, erişilebilir
let value = false
// block scope
if (true) {
let a = 'Python'
let b = 20
let c = 30
let d = 40
value = !value
console.log(a, b, c, value) // Python 20 30 true
}
//c değişkenine erişemiyoruz çünkü c değişkeni sadec if bloğunda geçerli bir değişkendir
console.log(a, b, c, value) // JavaScript 10 undefined true
}
letsLearnScope()
console.log(a, b) // JavaScript 10, erişilebilir
```
Artık scope'lar hakkında bir şeyler öğrendik. `var` anahtar kelimesi ile tanımlanan bir değişken fonksiyon scope'u içerisinde geçerlidir. Ancak `let` veya `const` anahtar kelimeleri ile tanımlanan değişkenler block scope'unda geçerlidir. (fonksiyon, if veya diğer dönggü blokları). Block kapsamını biraz daha netleştirmek gerekirse Javascript ve diğer çoğu yazılım dili için süslü parantezler arası demek olur. `{ }`
```js
//scope.js
function letsLearnScope() {
var gravity = 9.81
console.log(gravity)
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
// yukarıdaki çıktı konsol ekranında alacağımız hatanın çıktısıdır.
if (true){
var gravity = 9.81
console.log(gravity) // 9.81
}
console.log(gravity) // 9.81
for(var i = 0; i < 3; i++){
console.log(i) // 0, 1, 2
}
console.log(i) // 3
```
```js
//scope.js
function letsLearnScope() {
// you can use let or const, but gravity is constant I prefer to use const
const gravity = 9.81
console.log(gravity)
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
if (true){
const gravity = 9.81
console.log(gravity) // 9.81
}
// console.log(gravity), Uncaught ReferenceError: gravity is not defined
for(let i = 0; i < 3; i++){
console.log(i) // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: i is not defined
```
`let` ve `const` anahtar kelimeleri ile tanımlanan değişkenlerin kapsam alanlarının aynı olduğunu ifade ettik. Peki aralarındaki fark ne? Basitçe açıklamak gerekirse `const` ile tanımlanan bir değişkenin değerini daha sonraki satırlarda değiştiremeyiz ancak `let` ile tanımlanan değişkenin değerini değiştirebiliriz. Ben `let` ve `const` kullanarak temiz kod yazmanızı ve hata ayıklamanın zor olmasını önlemek için `let` ve `const` 'ı kullanmanızı tavsiye ederim. Temel kural olarak, herhangi bir sabit değer için `let` ve dizi, nesne, ok fonksiyonu ve işlev ifadesi için `const` özelliğini kullanabilirsiniz.
## 📔 Object - Nesne
Her şey bir nesne olabilir ve nesnelerin özellikleri ve özelliklerinin değerleri vardır, bu nedenle bir nesne bir anahtar değer çiftidir.
Bir nesneyi tam anlamıyla oluşturmak için iki köşeli parantez kullanırız.
### Boş nesne oluşturmak
Boş bir nesne
```js
const person = {}
```
### Değerle birlikte nesne oluşturmak
Şimdi oluşturacağımız person nesnesinin firstName, lastName, age, country, city ve skills gibi bazı özellikleri olacak şekilde oluşturalım.
```
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
isMarried: true
}
console.log(person)
```
### Nesneden değerleri alabilmek
Nesnenin değerlerine iki yöntem kullanarak erişebiliriz:
- `.` operatörünü kullanarak erişebiliriz
- köşeli parantez kullanarak erişebiliriz
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName}${this.lastName}`
},
'phone number': '+3584545454545'
}
// "." operatörü kullanarak
console.log(person.firstName)
console.log(person.lastName)
console.log(person.age)
console.log(person.location) // undefined
// kçşeli parantez kullanarak
console.log(person['firstName'])
console.log(person['lastName'])
console.log(person['age'])
console.log(person['age'])
console.log(person['location']) // undefined
// örneğin, telefon numarasına erişmek için yalnızca köşeli parantez yöntemini kullanırız
console.log(person['phone number'])
```
### Object methodları oluşturma
Şimdi, kişi nesnesinin getFullName özellikleri vardır. getFullName, kişi nesnesinin içindeki işlevdir ve biz ona nesne yöntemi diyoruz. _this_ anahtar sözcüğü, nesnenin kendisine atıfta bulunur. Nesnenin farklı özelliklerinin değerlerine erişmek için _this_ kelimesini kullanabiliriz. Bir arrow funtionu nesne yöntemi olarak kullanamayız çünkü bu sözcüğü nesnenin kendisi yerine bir arrow funtionun içindeki pencereyi ifade eder. Örnek olarak:
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName} ${this.lastName}`
}
}
console.log(person.getFullName())
// Asabeneh Yetayeh
```
### Object için yeni bir anahtar değer (key) oluşturma
Nesne, eşlenebilen bir veri yapısıdır ve oluşturulduktan sonra nesnenin içeriğini değiştirebiliriz.
nesne de yeni key'ler oluşturabilme
```js
const person = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
age: 250,
country: 'Finland',
city: 'Helsinki',
skills: [
'HTML',
'CSS',
'JavaScript',
'React',
'Node',
'MongoDB',
'Python',
'D3.js'
],
getFullName: function() {
return `${this.firstName} ${this.lastName}`
}
}
person.nationality = 'Ethiopian'
person.country = 'Finland'
person.title = 'teacher'
person.skills.push('Meteor')
person.skills.push('SasS')
person.isMarried = true
person.getPersonInfo = function() {
let skillsWithoutLastSkill = this.skills
.splice(0, this.skills.length - 1)
.join(', ')
let lastSkill = this.skills.splice(this.skills.length - 1)[0]
let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`
let fullName = this.getFullName()
let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`
return statement
}
console.log(person)
console.log(person.getPersonInfo())
```
```sh
Asabeneh Yetayeh is a teacher.
He lives in Finland.
He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.
```
### Object methodları
Bir nesneyi manipüle etmek için farklı yöntemler vardır. Mevcut yöntemlerden bazılarını görelim.
_Object.assign_:Nesneyi orijinal nesneyi değiştirmeden kopyalamak için kullanılır
```js
const person = {
firstName: 'Asabeneh',
age: 250,
country: 'Finland',
city:'Helsinki',
skills: ['HTML', 'CSS', 'JS'],
title: 'teacher',
address: {
street: 'Heitamienkatu 16',
pobox: 2002,
city: 'Helsinki'
},
getPersonInfo: function() {
return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`
}
}
//Object methods: Object.assign, Object.keys, Object.values, Object.entries
//hasOwnProperty
const copyPerson = Object.assign({}, person)
console.log(copyPerson)
```
#### Object.keys() methodu
_Object.keys_: Bir nesnenin anahtarlarını veya özelliklerini dizi olarak almak için kullanılır
```js
const keys = Object.keys(copyPerson)
console.log(keys) //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address)
console.log(address) //['street', 'pobox', 'city']
```
#### Object.values() methodu
_Object.values_: Nesnenin key'lerine karşılık gelen değerleri dizi içerisinde almak için kullanılır
```js
const values = Object.values(copyPerson)
console.log(values)
```
#### Object.entries() methodu
_Object.entries_: Bir dizideki key ve value değerlerini almak için kullanılır
```js
const entries = Object.entries(copyPerson)
console.log(entries)
```
#### hasOwnProperty() methodu
_hasOwnProperty_: Bir nesnede belirli bir anahtar veya özelliğin bulunup bulunmadığını kontrol etmek için kullanılır
```js
console.log(copyPerson.hasOwnProperty('name'))
console.log(copyPerson.hasOwnProperty('score'))
```
🌕 Tebrikler 8. günü de başarıyla tamamladın. 9. günde görüşmek üzere
## 💻 Exercises
### Exercises: Level 1
1. Create an empty object called dog
1. Print the the dog object on the console
1. Add name, legs, color, age and bark properties for the dog object. The bark property is a method which return _woof woof_
1. Get name, legs, color, age and bark value from the dog object
1. Set new properties the dog object: breed, getDogInfo
### Exercises: Level 2
1. Find the person who has many skills in the users object.
1. Count logged in users, count users having greater than equal to 50 points from the following object.
````js
const users = {
Alex: {
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript'],
age: 20,
isLoggedIn: false,
points: 30
},
Asab: {
email: 'asab@asab.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
age: 25,
isLoggedIn: false,
points: 50
},
Brook: {
email: 'daniel@daniel.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
age: 30,
isLoggedIn: true,
points: 50
},
Daniel: {
email: 'daniel@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
age: 20,
isLoggedIn: false,
points: 40
},
John: {
email: 'john@john.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
age: 20,
isLoggedIn: true,
points: 50
},
Thomas: {
email: 'thomas@thomas.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
age: 20,
isLoggedIn: false,
points: 40
},
Paul: {
email: 'paul@paul.com',
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
age: 20,
isLoggedIn: false,
points: 40
}
}```
1. Find people who are MERN stack developer from the users object
1. Set your name in the users object without modifying the original users object
1. Get all keys or properties of users object
1. Get all the values of users object
1. Use the countries object to print a country name, capital, populations and languages.
### Exercises: Level 3
1. Create an object literal called _personAccount_. It has _firstName, lastName, incomes, expenses_ properties and it has _totalIncome, totalExpense, accountInfo,addIncome, addExpense_ and _accountBalance_ methods. Incomes is a set of incomes and its description and expenses is a set of incomes and its description.
2. **** Questions:2, 3 and 4 are based on the following two arrays:users and products ()
```js
const users = [
{
_id: 'ab12ex',
username: 'Alex',
email: 'alex@alex.com',
password: '123123',
createdAt:'08/01/2020 9:00 AM',
isLoggedIn: false
},
{
_id: 'fg12cy',
username: 'Asab',
email: 'asab@asab.com',
password: '123456',
createdAt:'08/01/2020 9:30 AM',
isLoggedIn: true
},
{
_id: 'zwf8md',
username: 'Brook',
email: 'brook@brook.com',
password: '123111',
createdAt:'08/01/2020 9:45 AM',
isLoggedIn: true
},
{
_id: 'eefamr',
username: 'Martha',
email: 'martha@martha.com',
password: '123222',
createdAt:'08/01/2020 9:50 AM',
isLoggedIn: false
},
{
_id: 'ghderc',
username: 'Thomas',
email: 'thomas@thomas.com',
password: '123333',
createdAt:'08/01/2020 10:00 AM',
isLoggedIn: false
}
];
const products = [
{
_id: 'eedfcf',
name: 'mobile phone',
description: 'Huawei Honor',
price: 200,
ratings: [
{ userId: 'fg12cy', rate: 5 },
{ userId: 'zwf8md', rate: 4.5 }
],
likes: []
},
{
_id: 'aegfal',
name: 'Laptop',
description: 'MacPro: System Darwin',
price: 2500,
ratings: [],
likes: ['fg12cy']
},
{
_id: 'hedfcg',
name: 'TV',
description: 'Smart TV:Procaster',
price: 400,
ratings: [{ userId: 'fg12cy', rate: 5 }],
likes: ['fg12cy']
}
]
```
Imagine you are getting the above users collection from a MongoDB database.
a. Create a function called signUp which allows user to add to the collection. If user exists, inform the user that he has already an account.
b. Create a function called signIn which allows user to sign in to the application
3. The products array has three elements and each of them has six properties.
a. Create a function called rateProduct which rates the product
b. Create a function called averageRating which calculate the average rating of a product
4. Create a function called likeProduct. This function will helps to like to the product if it is not liked and remove like if it was liked.
🎉 CONGRATULATIONS ! 🎉
[<< Day 7](../07_Day_Functions/07_day_functions.md) | [Day 9 >>](../09_Day_Higher_order_functions/09_day_higher_order_functions.md)

2013
Turkish/08_Day_Objects/08_day_starter/data/countries_data.js
View File

File diff suppressed because it is too large Load Diff

17
Turkish/08_Day_Objects/08_day_starter/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>30DaysOfJavaScript:08 Day </title>
</head>
<body>
<h1>30DaysOfJavaScript:08 Day</h1>
<h2>Objects</h2>
<script src="./data/countries_data.js"></script>
<script src="./scripts/main.js"></script>
</body>
</html>

2
Turkish/08_Day_Objects/08_day_starter/scripts/main.js
Unescape View File

@ -0,0 +1,2 @@
console.log(countries)
alert('Open the console and check if the countries has been loaded')
Write Preview
Loading…
Cancel
Save