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.
Algoritma Nedir ? Algoritmaya Giriş
Herkese selamlar Değerli TurkHackTeam üyeleri, bu konuda algoritmaya genel bir giriş yapacağız , algoritma nedir ? , akış diyagramı nedir ? bu kavramları öğreneceğiz ardından akış diyagramı ile bir algoritma yazacağız . Umarım sizler için faydalı bir konu olur :) Algoritma Nedir ...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
// Programlamanın Temel Kavramları //
Merhaba "TürkHackTeam" ailesi bugün'ki konumuz "Programlama temel kavramları" umarım okurken keyif alacağınız bir yazı olur. Programlamanın temel temel kavramları nelerdir? Öğrenmeyi seçtiğiniz programlama dili ne olursa olsun, programlamanın temel kavramları diller arasında benzerdir. Bu...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
Kod editörleri ve IDE'ler Nelerdir?Hangi amaçlarla kullanılırlar?
Merhaba Arkadaşlar, Bu konumda “Code(Text) Editör ve IDE nedir?” “Code Editörlerinin ve IDE’lerin ne gibi özellikleri var? gibi konuları ele alacağız ve bunlar hakkında bilgi vereceğim sizlere. “Günümüzdeki Code Editörlerinin ve IDE’lerin hangi amaçlarla kullanıldığı” gibi güncel konularla...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
JavaScript Nedir?
JavaScript, 20 yılı aşkın bir geçmişe sahip dünyanın en popular yazılım dillerinden birisidir. Ayrıca web geliştiriciler için temel 3 yazılım dilinden birisidir. HTML: Bir web sayfasına içerik ekleyebilmenizi sağlar. CSS: Tasarım, stil ve web sayfalarının düzenini belirler. JavaScript: Web...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
Node.js Nedir?
Node.js Nedir Node.js Ryan Dahl tarafından 2009 yılında Geliştirilmiştir. Node.js, açık kaynaklı, sunucu tarafında çalışan ve ağ bağlantılı uygulamalar için geliştirilmiş bir çalıştırma ortamıdır. Node.js uygulamaları genelde istemci tarafı betik dili olan JavaScript kullanılarak...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
Node.js indirmek için:
Node.js — Download Node.js®
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
![nodejs.org](https://nodejs.org/static/images/favicons/favicon.png)
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](https://resmim.net/cdn/2024/06/13/faY0uj.png)
Kurulumu yapamayanlar:
Select “Next”
![]()
![]()
![]()
![]()
![]()
Şimdi kurulum başarılı olmuş mu olmamış mı diye kontrol edin en üstte attığım şekilde "node -v" yazarak yapabilirsiniz.
![faY7Cb.png](https://resmim.net/cdn/2024/06/13/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?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
Node.js'i yüklemek
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
v8 ve tarayıcıdan farkı
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
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?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
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
VS Code Ninjası Olmak İçin Klavye Kısayolları
VS Code Ninjası Olmak İçin Klavye Kısayolları Eğer vs code kullanıyor ve kısayolları bilmiyorsanız çok zaman kaybediyorsunuz demektir. Hadi işinize yarayacak birkaç kısayola bakalım. Bölme Ve Odaklanma Küçük bir ekran kullanıyor olsanız bile, kesinlikle ekranı bölmeye ihtiyaç duyabilirsiniz...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
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](https://resmim.net/cdn/2024/06/13/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](https://resmim.net/cdn/2024/06/13/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](https://resmim.net/cdn/2024/06/13/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](https://resmim.net/cdn/2024/06/13/faboHC.png)
![fabrRG.png](https://resmim.net/cdn/2024/06/13/fabrRG.png)
![fab5oL.png](https://resmim.net/cdn/2024/06/13/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](https://resmim.net/cdn/2024/06/13/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?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
let & const
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
arrow functions
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
nesneler, fonksiyonlar
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
array kavramı, referans tipleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
spread & rest operatörleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
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?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
let & const
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
arrow functions
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
nesneler, fonksiyonlar
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
array kavramı, referans tipleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
spread & rest operatörleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
destructuring kavramı
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
async kod ve promise
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
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?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
Node.js'i yüklemek
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
v8 ve tarayıcıdan farkı
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
modül 2 içerik: JavaScript Hatırlatalım (Js bilenler bu modülü geçebilir)
Javascript Nedir?
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
let & const
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
arrow functions
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
nesneler, fonksiyonlar
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
array kavramı, referans tipleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
spread & rest operatörleri
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
destructuring kavramı
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
async kod ve promise
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
template literals
![✅ ✅](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/2705.png)
ayrıca inceleyebileceğiniz güzel içerikler:
Node.js Neden Kullanılmalı?
Node.js tanımı: Hızlı, ölçeklenebilir sunucular ve ağ uygulamaları oluşturmak için platformlar arası kullanılan çalışma ortamıdır. JavaScript’in tarayıcının dışında çalıştırılmasını sağlayan bir çalışma zamanı ortamıdır. JavaScript dilini bilenler bilir, önceden sadece istemci (client) tarafında...
![www.turkhackteam.org](https://www.turkhackteam.org/styles/v1/tht/favicon.png)
![www.slideshare.net](https://cdn.slidesharecdn.com/ss_thumbnails/adanzyejavascript1-200511125746-thumbnail.jpg?width=640&height=640&fit=bounds)
A'dan Z'ye Javascript 1 | TurkHackTeam
A'dan Z'ye Javascript 1 | TurkHackTeam - Download as a PDF or view online for free
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