Backend Geliştirme Serisi: Node.js, Js Temelleri modül 1-2 #2

Armin'

Moderasyon Tim Lideri
7 Tem 2013
8,384
967
Blackwell Academy
modül 1 içerik: GİRİŞ
Node.js nedir?
Node.js'i yüklemek
v8 ve tarayıcıdan farkı​
modül 2 içerik: JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir?
let & const
arrow functions
nesneler, fonksiyonlar
array kavramı, referans tipleri
spread & rest operatörleri
destructuring kavramı
async kod ve promise
template literals​

Bkz: Ana Konu: Backend Geliştirme Serisi: Node.js, GraphQL API, REST API, MongoDB, SQL, & Deno.js serisi #1
GİRİŞ

Öncelikle bu seriye başlamadan önce okunması ve anlaşılması gereken bazı şeyler var. Bunlar için forumumuzdan faydalı kaynakları buraya bırakalım. Öncelikle aşağıdaki konuları sırasıyla okuyun. Bilenler geçsin.






Node.js indirmek için:

Yukarıdaki konularımızı okuduktan sonra buraya gelin. Node.js'in ne olduğunu, programlamanın temel kavramlarını anlayabiliriz. Özetle js sayfayla etkileşime girmemizi sağlayan bir dil ama bununla sınırlı kalmadı Nodejs ile birlikte iş farklı boyutlara taşınıyor serverda da kullanılabilmesi sağlanıyor. Nodejs v8 motorunu kullanır ve bu motor js kodunu compile eder motorun kendisi c++ ile yazılmıştır özetle nodejs yüklediğimizde geliştirilmiş bir v8 versiyonunu js kodlarını çalıştırmak için kullanabiliyoruz. Node.js'i kurmak epey kolay indirip next nextleyip geçiyoruz uğraşmıyoruz.

faY0uj.png


Kurulumu yapamayanlar:
Select “Next”



Capture34-2.png


Capture42.png


Capture51.png


Capture61.png


Capture71image

Şimdi kurulum başarılı olmuş mu olmamış mı diye kontrol edin en üstte attığım şekilde "node -v" yazarak yapabilirsiniz.

faY7Cb.png


Tebrikler Algoritmanın ne olduğunu Node.js'in ne olduğunu Js'nin ne olduğunu az çok biliyorsunuz. Devam edelim.

modül 1 içerik: GİRİŞ
Node.js nedir? ✅
Node.js'i yüklemek ✅
v8 ve tarayıcıdan farkı ✅

Nedir bu V8 Engine perde arkası nedir?

V8 chrome'a güç veren webde gezinirken js kodunu çalıştıran motor ve tarayıcıdan bağımsız bir şey yani diğer ortamlarda da kullanılabilir node.js v8 i kullanarak sunucularda js kodunu çalıştırabiliyor SpiderMonkey, JavaScriptCore (nitro da denilir) Edge (bildiğimiz old ie ama o da chromium v8 e geçti bu bahsettiğim motorların hepsi js kodunu ecmascript es262 standardını takip ederek farklı tarayıcılarda böylece tutarlı şekilde çalışabiliyor. v8'in c++ ile yazıldığından bahsetmiştim v8 js kodunu satır satır yorumlamak yerine hızlı yürütme için derler js'i derlemek biraz daha fazla zaman alır ama çok fazla js kodu içeren karmaşık web uygulamaları için hızlı çalışır özetle v8 web sayfalarının ve node.js uygulamalarının hızlı yüklenmesini sağlayıp düzgün çalışmasını sağlar verimli hale getirir yani. Node.js'i tarayıcı gibi düşünebilirsiniz ama sınırlarının kalkmış hali. Tarayıcı dom manipülasyonu ve web apilerine çerezlere carta curta odaklanırken node.jste dosya sistemi gibi tarayıcılarda olmayan özellikler var.

JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir? ✅
let & const
arrow functions
nesneler, fonksiyonlar
array kavramı, referans tipleri
spread & rest operatörleri
destructuring kavramı
async kod ve promise
template literals
Eksik kalan kısımları tamamlayalım. Bu arada vscode ile ilgili şu konuyu da inceleyebilirsiniz


Tavsiye ettiğim vscode eklentileri

Material Icon Theme

Şimdi vscode'u açın bir klasör açın kendinize first-app.js diye bir dosya oluşturalım ve yukarıdaki modülde eksik kalan içeriği halledelim. Vscode'da üst menüden yeni terminal açın new terminal diyerek alta gelir.

fabDhR.png


çalıştırmak için node dosyaadi.js

burada console.log yazıp bir şey göstermek yerine örneğin merhaba.txt diye bir dosya oluştursun ve içerisine bir şey yazabileceğimiz bir kod yazalım.

Kod:
const fs = require('fs');

fs.writeFilSync('merhaba.txt', 'bir seyler bir seyler');

şimdi seriden

Kod:
//primitive türler

string
number
boolean
undefined
null
BigInt
Symbol

let name = "deneme"; //string
let age = 30; //number
let message = "Merhaba, dünya!";
let greeting = 'Merhaba, dünya!';


primitive types dilin temel veri türleri demektir jsdeki primitif türler
  • Number:
    • Sayıları temsil eder (hem tam sayılar hem de ondalık sayılar).
    • Örnek: 42, 3.14
  • String:
    • Karakter dizilerini temsil eder.
    • Örnek: "Merhaba, dünya!", 'JavaScript'
  • Boolean:
    • Mantıksal değerleri temsil eder: true veya false.
    • Örnek: true, false
  • Undefined:
    • Bir değişkene değer atanmamış olduğunu belirtir.
    • Örnek: let x; // x is undefined
  • Null:
    • Hiçbir şeyin, boş bir değerin kasıtlı olarak atanmış olduğunu belirtir.
    • Örnek: let y = null;
  • Symbol (ES6 ile tanıtıldı):
    • Benzersiz ve değişmez bir değeri temsil eder. Genellikle nesnelerin özellik anahtarları olarak kullanılır.
    • Örnek: let sym = Symbol('description');
  • BigInt (ES2020 ile tanıtıldı):
    • Çok büyük tamsayıları temsil eder.
    • Örnek: let bigInt = 1234567890123456789012345678901234567890n;

Reference typelar da array, object ve functions

Kod:
let person = {
    name: "Alice",
    age: 25
}; //object

let numbers = [1, 2, 3, 4, 5]; // array

function greet() {
    console.log("Hello, world!");
} //function

fabd9Z.png


let selectedColors = ['red', 'blue'];
arraydeki her elemanın kendine ait indexi var 0,1,2....

console.log(selectedColors[0]);
selectedColors[2] = 'green';

jsde array içerisinde farklı türler bulunabilir

selectedColors[3] = 100;

fabBSx.png


let name = 'ozgur';
const age = 29; //const sabitler icin degistirilemezler
let hasHobbies = true;

var function scope özelliği taşıyan değişken oluşturuyor let ise block scope özelliği taşıyan değişken oluşturuyor yani let ile oluşturulan değişken sadece olduğu yerdeki scopelar içerisinde. ayrıca jsde hoisting yapılabilir manası da değişkeni önce kullanıp sonradan tanımlamaktır.

faboHC.png


fabrRG.png


fab5oL.png


Kod:
//spread operatoru

const copiedArray = hobbies.slice();
//hobbies arrayini kopyaladık
console.log(copiedArray);

const copiedArray2 = [...hobbies];
//...
//sagdakini alir icindeki ogeleri
//elementleri alir ve ne ile sarmalıysa ona koyar
console.log(copiedArray);

rest operatöründen bahsedecek olursak örneğin

Kod:
//rest operatoru
const toArray = (arg1, arg2, arg3) => {
    return [arg1, arg2, arg3];
};

console.log(toArray(1,2,3));

şimdi bu çalışıyor çalıştırmayı deneyin terminale node first-app.js yazarak sonuçları görebiliyoruz zaten

fabtqM.png


ama bu kullanışsız burada rest operatörünü kullanırsanız

Kod:
//rest operatoru
const toArray = (...args) => {
    return args;
};

console.log(toArray(1,2,3,4,5));

bu şekilde kullanabiliyoruz bir öncekiyle karşılaştırırsanız farkını anlayabiliyoruz. mergelemek istiyorsak rest operatörü bir arrayi dışarı yaymak istiyoruz mesela o zaman spread bu diyebiliriz.

JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir? ✅
let & const ✅
arrow functions ✅
nesneler, fonksiyonlar ✅ bkz: js fonksiyonlar , js fonksiyonlar ders4
array kavramı, referans tipleri ✅
spread & rest operatörleri ✅
destructuring kavramı
async kod ve promise
template literals

let ve const u anlamak için biraz daha detaylı bir anlatım sunulmuş burada

ayrıca bkz: JavaScript Yazılım Kuralları

ayrıca bkz: JavaScript Ders #1

ayrıca bkz: JavaScript Ders #3

ayrıca bkz: JavaScript Ders #2

Destructuring kavramından devam edelim

Object destructuring bir nesnenin içindeki belirli alanları almak için bir yöntem. Nesnenin özelliklerini kullanarak onları değişkenlere atar.

Kod:
const person = {
    name: 'Alice',
    age: 25,
    city: 'New York'
};

const { name, age } = person;
console.log(name, age); // Alice 25
  • Destructuring sırasında değişken isimleri, nesnedeki alan adlarıyla birebir aynı olmalıdır.
  • Destructuring işlemi sırasında nesnedeki her alanı kullanmak zorunda değilsiniz, yalnızca ihtiyaç duyduklarınızı alabilirsiniz.
  • Destructuring işlemi sırasında, eğer değişken isimlerini farklı yapmak isterseniz, aliasing kullanabilirsiniz:

Kod:
const { name: personName, age: personAge } = person;
console.log(personName, personAge); // Alice 25

Kod:
const hobbies = ['sports', 'cooking'];
const [hobby1, hobby2] = hobbies;
console.log(hobby1, hobby2); // sports cooking

//yukarısı array desctructuring

Kod:
//async code & promises

/*
diyellim bir timer oluşturduk
*/

setTimeout(()=> {
    console.log('süre bitti!');
}, 2000);

//2 saniye hiçbir şey olmaz sonra süre bitti yazar
//bu async bir kod çünkü hemen bitmez 2 saniye sürüyor

console.log('slm');
console.log('tht');

//bu ikisi ise sync kod çünkü direkt birbirlerinin ardından çalıştırır
//donanım haricinde bir geciktirme olmaz (tabii çalışmaları süre alır teknik olarak tabi)

//nodejs ve js genel olarak kod yürütülmesini engellemez önce slm sonra tht yazar sonra süre bitti çıktısını alırız
//async kodu tanır sonra senkronize kodları çalıştırır

Kod:
const fetchData = callback =>{
    setTimeout(()=> {
        callback('bitti!');
    }, 1500);
};

setTimeout(()=> {
    console.log('süre bitti!');
    fetchData(text=>{
        console.log(text);
    });
}, 2000);

parametre olarak da fonksiyon alan bir fetchData var burada hep arrow func. kullandık böyle iç içe geçerek kullanımlar yapabiliyoruz karmaşık gözükebilir dikkatlice anlamaya çalışın inceleyin. Şimdi sizin tarafınızdan pek de yazılmayacak olan çünkü 3.taraf packagelar bu işlemi zaten muhtemelen işiniz düştüğünde halledecek ama mantığını anlamak açısından asnyc code ve promiseslardan bahsetmek için

Kod:
const fetchData = () =>{
    const promise = new Promise((resolve, reject) => {
        //birincisi cozer ikincisi hata mevzusu
        //bircok package bunlari yapiyor bizim icin fakat bilmek yine de onemli manuel olarak basitce
        setTimeout(()=> {
            resolve('Bitti!');
        }, 1500);
    });
    return promise;
    
};

setTimeout(()=> {
    console.log('süre bitti!');
    fetchData().then(text => {
        console.log(text);
        return fetchData();
    }).then(text2 => {
        console.log(text2);
    });
}, 2000);

Yani bunu yapmadan önce evet jsde asenkron kodları bekletmek ve yönetmenin her zaman başka bir yolunu bulursunuz ama buna sonra da değineceğim. Anlamadıysanız çok da takmayın zaten serinin devamında bir sürü asenkron kod olacağı için bir noktadan sonra siz istemeseniz de oturacaktır. senkron kod dediğimiz kod satırlarının sırasıyla çalıştığı beklemeden biri başlar diğeri başlar falan ama asenkron kodda belirli işlemler bitmeden kodun geri kalan kısmının çalışmasına izin verir yani siz bir dosya indirirken başka işlemler de yapabiliyorsunuz mesela. promise kavramına gelecek olursak promise jsde bir nesnedir gelecekte bir şeyin elde edilip edilmeyeceğini temsil eder resolved ve rejected kullanılır resolved demek işlem tamamlandı değer döner rejected ise reddedildi yani işlem başarısız oldu hata verir.

Kod:
süre bitti!
Bitti!
Bitti!

sorularımdan bir tanesi bu çıktın neden böyle çıktı adım adım aşamaları anlatın.

JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir? ✅
let & const ✅
arrow functions ✅
nesneler, fonksiyonlar ✅
array kavramı, referans tipleri ✅
spread & rest operatörleri ✅
destructuring kavramı ✅
async kod ve promise ✅
template literals

kalan kısma bakalım template literals stringleri yazmanın farklı yolları var

'bi String'

veya

"başka string"

bunu da kullanabiliriz (`)

`String yazmanın başka bir yolu`

yani şunu yapmak yerine:

Kod:
const name = "Ozgur";
const age = 100;
console.log("My name is " + name + " and I am " + age + " years old.");

böyle yapabiliyoruz:

Kod:
const name = "Ozgur";
const age = 100;
console.log(`My name is ${name} and I am ${age} years old.`);

Kod:
// Tek tırnak veya çift tırnak ile çok satırlı dize
const multiLineText = 'Bu bir çok satırlı\n\
dizedir.';

// Template literal ile çok satırlı dize
const multiLineTextTemplate = `Bu bir çok satırlı
dizedir.`;

sonuç olarak bu modül de sonlandırdığımız modüller:

modül 1 içerik: GİRİŞ
Node.js nedir? ✅
Node.js'i yüklemek ✅
v8 ve tarayıcıdan farkı ✅

modül 2 içerik: JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir? ✅
let & const ✅
arrow functions ✅
nesneler, fonksiyonlar ✅
array kavramı, referans tipleri ✅
spread & rest operatörleri ✅ bkz: spread syntax
destructuring kavramı ✅
async kod ve promise ✅
template literals ✅

ayrıca inceleyebileceğiniz güzel içerikler:

MODÜL SORULARI: konu içerisinde mor olarak renklendirdiğim soru haricinde modülü tamamlamak için cevaplayabileceğiniz sorular:

Kod:
MODÜL SORULARI:
1- spread ve rest operatörleri ne işe yarar?
2- arrow functions nasıl kullanılır?
3- let ve const arasındaki fark nedir?
4- senkron kod nedir asenkron kod nedir?
5- konudaki promise ile ilgili verilen örnekte mor ile renklendirilen soruyu cevaplayın.
6- nodejs nedir js nedir v8 ile bunların alakası nedir?
7- event loop nedir nasıl çalışır araştırınız

Serinin devamında görüşmek üzere.

<3 Gauloran
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.