Kurs içeriğini, istediğiniz kurallar doğrultusunda (dakika/saniye bilgileri olmadan, tam breadth-depth ile, özet yapmadan ve her konuyu örnek/uygulamalarla açıklayarak) satır satır ve bölüm bölüm incelemeye başlıyoruz.

Bu uzun bir inceleme olacağı için ilk büyük bölümle başlıyoruz. Eğer bir noktada sistem sınırları nedeniyle yanıt yarıda kalırsa, kaldığım yeri size hemen bildireceğim ve onayınızla devam edeceğiz.

---

📘 Sıfırdan İleri Düzey Web Geliştirme Kurs Analizi

🌟 "Öğrenecekleriniz" Paragrafının Detaylı Açıklaması

Dosyanın başında yer alan bu bölüm, kursun öğrencilere vaat ettiği tüm becerileri ve eğitim felsefesini özetlemektedir. Her bir maddenin ne anlama geldiğini detaylandıralım:

• Hiçbir programlama bilgisine sahip olmasanız dahi bu kursa rahatlıkla başlayabileceksiniz: Kursun sıfır noktasından başladığını belirtir. Katılımcının daha önce tek bir satır kod bile yazmamış olması bir engel değildir. Eğitim, bilgisayar mantığını ve kodlama dilinin alfabesini en temelden öğretir.
• Programlamanın iskeleti olan konuları öğrenerek programlamanın en önemli temelini atmış olacaksınız: Değişkenler, döngüler, koşullu ifadeler ve fonksiyonlar gibi tüm yazılım dillerinde ortak olan "algoritma mantığı" burada oturtulur. Burada öğrenilen mantık, yarın bir gün Python veya C# öğrenirken de aynı kalacaktır.
• Web Geliştirici olmak için tüm konuları öğrenmiş olacaksınız: Bir web sayfasının ön yüzünü (Frontend) tasarlamak, onu hareketli hale getirmek, modern cihazlara uyumlu yapmak ve arka planda veri tabanı ile konuşturmak için gereken tam bir set sunulmaktadır.
• HTML ve CSS kodlamayı öğrenerek efektif web siteleri oluşturabileceksiniz: Sadece yazıdan ibaret siteler değil; renkli, düzenli, göze hoş gelen ve modern görünen internet sayfaları tasarlama becerisidir.
• Bir blog sitesi tasarlayıp bu sitelerden para kazanabileceksiniz: Öğrenilen bilgilerin ticari bir karşılığı olduğunu gösterir. Kendi ürettiğiniz ya da bir başkası için yapacağınız içerik siteleri (bloglar) aracılığıyla reklam veya üyelik gelirleri elde etmenin yolu açılır.
• Javascript ile beraber etkileşimli web siteleri oluşturabileceksiniz: Statik (cansız) sayfaları canlandırma sanatıdır. Kullanıcı bir butona bastığında sayfa yenilenmeden açılan pencereler, hesaplama araçları ve hareketli ögeler JavaScript ile hayat bulur.
• Bootstrap ile modern görünümlü web sayfaları oluşturabileceksiniz: Tek tek binlerce satır CSS kodu yazmak yerine, dünyanın en popüler hazır tasarım kütüphanesini kullanarak çok hızlı ve şık web siteleri inşa etmeyi sağlar.
• JQuery kütüphanesini öğrenerek etkin ve efektif javascript kodlayabileceksiniz: JavaScript ile 10 satırda yazılacak karmaşık bir animasyonu veya işlemi, tek bir satır jQuery koduyla çok daha hızlı ve pratik şekilde çözme yeteneğidir.
• Veri Tabanı ile çalışmayı öğrenerek veri tabanı etkileşimli web siteler tasarlayabileceksiniz: Kullanıcıların üye olabildiği, giriş yapabildiği, verilerin (yazılar, resimler, kullanıcı bilgileri) kalıcı olarak saklandığı dinamik sistemler (örneğin e-ticaret altyapısı başlangıcı) kurmayı ifade eder.

---

🏗️ BÖLÜM 1: HTML 5 Kullanımı ve Temelleri

HTML (HyperText Markup Language), web sayfalarının iskeletini, yani tuğlalarını oluşturan metin işaretleme dilidir. Bir binanın kolonları ve duvarları gibidir.

📄 HTML Sayfası Oluşturmak & HTML Mimarisini Anlamak

Bir web sayfasının tarayıcı (Chrome, Edge, Safari) tarafından tanınması için standart bir iskelete ihtiyacı vardır.

• <!DOCTYPE html>: Tarayıcıya bu belgenin en güncel HTML5 standardında yazıldığını söyler.
• <html>: Tüm kodların içinde yer aldığı ana kapsayıcıdır.
• <head>: Sayfanın arka plan bilgilerini (başlık, karakter seti, stil dosyaları) tutar. Kullanıcı sayfada bunu doğrudan görmez.
• <body>: Sitede ziyaretçinin gördüğü tüm içeriklerin (yazılar, resimler, butonlar) yazıldığı yerdir.

🛠️ Uygulama Örneği:

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<title>İlk Web Sayfam</title>

</head>

<body>

<!-- Kullanıcının göreceği her şey buraya yazılır -->

</body>

</html>

✍️ Başlık Etiketlerinin Kullanımı (H1 - H6)

Web sayfasındaki yazıların önem sırasına göre başlıklandırılmasını sağlar. Arama motorları (Google) bu etiketlere bakarak sitenin ne hakkında olduğunu anlar. <h1> en büyük ve en önemli başlıktır, <h6> ise en küçük başlıktır.

💡 Örnek:

• <h1>Teknoloji Haberleri</h1> (Ana Başlık)
• <h2>Akıllı Telefonlar</h2> (Alt Başlık)
• <h3>Batarya Teknolojileri</h3> (Detay Başlık)

📝 Paragraf Etiketinin Kullanımı (<p>)

Düz metinleri ve açıklamaları düzenli bir blok halinde yazmak için kullanılır. Her bir <p> etiketi, kendinden sonra gelen içeriği otomatik olarak bir alt satıra atar ve araya biraz boşluk bırakır.

🛠️ Uygulama Örneği:

<p>Web geliştirme öğrenmek, geleceğe yatırım yapmaktır. Bu kursta harika şeyler öğreneceğiz.</p>

<p>İkinci paragrafımız otomatik olarak alt satırdan başlayacaktır.</p>

🎨 Biçimlendirme Etiketlerinin Kullanımı

Metinlerin içindeki kelimeleri kalın, eğik, altı çizili veya vurgulu yapmak için kullanılır.

• <b> veya <strong>: Metni kalın yapar. (<strong> arama motorlarına bu kelimenin önemli olduğunu da bildirir).
• <i> veya <em>: Metni eğik (italik) yapar.
• <u>: Metnin altını çizer.
• <del>: Kelimenin üstünü çizer (Örn: Eski fiyatların üstünü çizmek için).

💡 Örnek:

<p>Bu üründe büyük <strong>indirim</strong> var! Eski fiyat: <del>500 TL</del> Yeni fiyat: 350 TL</p>

📜 Sırasız ve Sıralı Listeler Oluşturmak (<ul>, <ol>, <li>)

Maddeler halinde içerik göstermek için kullanılır.

• Sırasız Liste (<ul>): Maddelerin başına nokta veya simge koyar (Unordered List).
• Sıralı Liste (<ol>): Maddelerin başına 1, 2, 3 gibi sayılar veya harfler koyar (Ordered List).
• Liste Elemanı (<li>): Her iki liste türünde de maddelerin kendisini temsil eder (List Item).

🛠️ Uygulama Örneği:

<h3>Alışveriş Listesi (Sırasız)</h3>

<ul>

<li>Süt</li>

<li>Ekmek</li>

</ul>

<h3>Yemek Tarifi Adımları (Sıralı)</h3>

<ol>

<li>Soğanları doğrayın.</li>

<li>Yağda kavurun.</li>

</ol>

🖼️ Görsellerle Çalışmak (<img>)

Sayfaya resim, fotoğraf veya logo eklemek için kullanılır. Kapanış etiketi olmayan tekil bir etikettir. İki önemli niteliği (attribute) vardır:

• src (Source): Resmin bilgisayardaki veya internetteki yolunu (adresini) belirtir.
• alt (Alternative Text): Resim yüklenemezse yerine yazılacak metindir. Görme engelli kullanıcıların ekran okuyucuları için de çok önemlidir.

💡 Örnek:

<img src="manzara.jpg" alt="Dağ ve deniz manzarası" width="500">

📝 Formlarla Çalışmak (<form>, <input>, <button>)

Kullanıcıdan bilgi toplamak için kullanılır. Giriş yapma sayfaları, kayıt formları, anketler hep bu yapıyla kurulur.

• <input type="text">: Düz yazı yazma alanı.
• <input type="password">: Şifre yazma alanı (yazılanları nokta olarak gizler).
• <input type="email">: E-posta adresi kontrolü yapan alan.
• <button type="submit">: Formu gönderen buton.

🛠️ Uygulama Örneği:

<form action="/kaydet" method="POST">

<label>Kullanıcı Adı:</label>

<input type="text" name="username" placeholder="Adınızı giriniz">

<label>Şifre:</label>

<input type="password" name="password">

<button type="submit">Kayıt Ol</button>

</form>

📊 Tablolarla Çalışmak (<table>, <thead>, <tbody>, <tr>, <th>, <td>)

Verileri satır ve sütunlar halinde düzenli göstermek için kullanılır.

• <table>: Tablonun ana çerçevesidir.
• <tr> (Table Row): Tablodaki bir satırı temsil eder.
• <th> (Table Header): Sütun başlıklarını kalın ve ortalanmış yazar.
• <td> (Table Data): Hücrelerin içindeki normal verilerdir.
• colspan ve rowspan: Hücreleri yatayda veya dikeyde birleştirmeyi sağlar.

🛠️ Uygulama Örneği:

<table border="1">

<thead>

<tr>

<th>Ürün Adı</th>

<th>Fiyat</th>

</tr>

</thead>

<tbody>

<tr>

<td>Kulaklık</td>

<td>1200 TL</td>

</tr>

<tr>

<td colspan="2">Kampanyalı Ürünler Üst Hücreyle Birleşti</td>

</tr>

</tbody>

</table>

🔗 Link Oluşturmak (<a>)

Bir sayfadan başka bir sayfaya ya da bir internet sitesine geçiş köprüsü kurar. href niteliği, gidilecek adresi belirtir.

💡 Örnek:

<a href="https://google.com" target="_blank">Google'a Git (Yeni Sekmede Aç)</a>

---

🚀 BÖLÜM 2: İleri Seviye HTML5

📦 Div ve Span Kullanımı (<div>, <span>)

Sayfa düzenini tasarlarken elemanları gruplamak için kullanılan en kritik iki etikettir. İçeriksel bir anlamları yoktur, sadece tasarım için bölge oluştururlar.

• <div> (Block-level): Blok etiketidir. Ekranda satırın tamamını kaplar, yanına başka eleman kabul etmez. Sayfayı odalara bölmek gibidir.
• <span> (Inline): Satır içi etikettir. Sadece içindeki yazı kadar yer kaplar. Bir paragrafın içindeki tek bir kelimenin rengini değiştirmek için kullanılır.

🛠️ Uygulama Örneği:

<!-- Div tüm satırı kaplar -->

<div class="sol-menu">

<p>Menü İçeriği</p>

</div>

<!-- Span sadece kelimeyi sarar -->

<p>Bu bilgisayar <span style="color: red;">ÇOK UCUZ</span> kaçırmayın!</p>

🖼️ iFrame Kullanımı (<iframe>)

Bir web sayfasının içerisine, başka bir web sitesini canlı olarak gömmek (yansıtmak) için kullanılır. En sık YouTube videolarını sitelere eklerken veya Google Haritalar'ı iletişim sayfasına koyarken kullanılır.

💡 Örnek:

<iframe src="https://google.com" width="600" height="450"></iframe>

---

🎨 BÖLÜM 3: CSS - Temel Seviye

CSS (Cascading Style Sheets), HTML ile kurulan binanın boyası, fayansları, pencerelerin şekli ve dekorasyonudur. Sayfayı güzelleştirir.

❓ CSS Nedir ve Yöntemleri Ne Anlama Gelir?

CSS kodlarını sayfaya bağlamanın 3 farklı yolu vardır:

1. Internal (Dahili) CSS: Kodlar HTML sayfasının <head> bölümünde <style> etiketleri arasına yazılır. Sadece o sayfa için geçerlidir.
2. Inline (Satır İçi) CSS: Doğrudan HTML etiketinin içine style="..." yazılarak uygulanır. Sadece o tek bir etiketi etkiler. Yönetimi zordur.
3. External (Harici) CSS: Tasarımlar tamamen ayrı bir .css (örneğin style.css) dosyasına yazılır. HTML sayfasına <link> ile bağlanır. En profesyonel yöntemdir; tek bir css dosyasından binlerce sayfayı aynı anda değiştirebilirsiniz.

🛠️ Uygulama Örneği (External CSS Bağlantısı):

<!-- HTML Dosyasının Head Kısmı -->

<head>

<link rel="stylesheet" href="style.css">

</head>

/* style.css Dosyasının İçeriği */

body {

background-color: #f4f4f4;

}

p {

color: blue;

}

🆔 ID ve Class Kullanımı (# ve .)

CSS yazarken hangi HTML elemanını boyayacağımızı seçmemiz gerekir. Bunun için kimlikler (ID) ve sınıflar (Class) kullanılır.

• Class (Sınıf): Bir sayfada birden fazla elemana verilebilir. Ortak özellikler için kullanılır. CSS dosyasında başına nokta (.) konularak çağrılır.
• ID (Kimlik): Bir sayfada sadece tek bir elemana özel olmalıdır. Benzersizdir. CSS dosyasında başına kare/diyez (#) işareti konarak çağrılır.

🛠️ Uygulama Örneği:

<h1 id="ana-logo">Şirket Logosu</h1> <!-- Benzersiz -->

<p class="kirmizi-yazi">Bu yazı kırmızı.</p>

<p class="kirmizi-yazi">Bu yazı da kırmızı.</p> <!-- Sınıf tekrar kullanılabilir -->

#ana-logo {

font-size: 32px;

}

.kirmizi-yazi {

color: red;

}

---

📐 BÖLÜM 4: CSS - Orta Seviye

👥 Group Selectors (Seçici Gruplama) ve Komşu Seçiciler

Aynı tasarım özelliklerini alacak elemanları tek tek yazmak yerine aralarına virgül koyarak gruplayabiliriz.

• Gruplama (,): h1, h2, p yazarak hepsine tek seferde aynı yazı tipini verebiliriz.
• Ardışık/Komşu Seçici (+): Bir elemandan hemen sonra gelen diğer elemanı hedef alır.

💡 Örnek:

/* Gruplama */

h1, h2, .kutu {

margin-bottom: 20px;

}

/* p etiketinden hemen sonra gelen ilk div'i yakala */

p + div {

border: 1px solid black;

}

🔍 Attribute Selectors (Özellik Seçiciler)

HTML etiketlerinin içindeki niteliklere göre seçim yapmayı sağlar. Örneğin, sadece tipi "password" olan inputları veya sadece "hedef" içeren linkleri seçebiliriz.

💡 Örnek:

input[type="text"] {

background-color: lightyellow; /* Sadece düz metin kutularının arkasını sarı yapar */

}

🎭 Pseudo Selectors (Yalancı Seçiciler)

Bir elemanın özel durumlarını (örneğin farenin üzerine gelmesi, linke tıklanmış olması veya listenin ilk elemanı olması) hedeflemek için kullanılır. :hover en sık kullanılanıdır.

🛠️ Uygulama Örneği:

.buton {

background-color: blue;

color: white;

}

/* Fare butonun üzerine gelince rengini değiştir */

.buton:hover {

background-color: darkblue;

cursor: pointer;

}

🧬 Inherits (Miras Alma Mantığı)

CSS'te bazı özellikler üst kapsayıcıya (anne/baba) verildiğinde otomatik olarak altındaki çocuk elemanlara da geçer. Buna miras alma denir. Örneğin <body> etiketine verilen yazı tipi (font-family) veya yazı rengi (color), içerideki tüm paragraflara otomatik geçer. Ancak kenarlık (border) veya iç boşluk (padding) gibi özellikler miras alınmaz.

---

🪐 BÖLÜM 5: CSS - İleri Seviye (Yerleşim ve Detaylar)

Bu bölüm web sayfalarının tasarım kalitesini belirleyen, elemanların ekranda yan yana durmasını, boşluklarını ve boyutlarını ayarlayan en kritik bölümdür.

🌊 Floating (Hizalama ve Yan Yana Getirme)

Eski ama hala bilmesi gereken bir yöntemdir. Elemanları sola (float: left) veya sağa (float: right) yaslayarak yan yana gelmelerini sağlar. Arkasından gelen elemanların yukarı kayıp tasarımı bozmaması için overflow: auto veya clear: both gibi temizleyicilerle desteklenmelidir.

🛠️ Uygulama Örneği:

.sol-kutu {

width: 50%;

float: left; /* Ekranın sol yarısını kaplar, sağ tarafı boş bırakır */

}

.sag-kutu {

width: 50%;

float: right; /* Ekranın sağ yarısını kaplar */

}

📺 Display Özelliği (Görünüm Türleri)

Bir etiketin ekranda nasıl davranacağını belirler:

• display: block: Elemanı blok yapar. Satırı kapatır (Div gibi davranır). Genişlik ve yükseklik verilebilir.
• display: inline: Satır içi yapar. Genişlik/yükseklik almaz, sadece içindeki yazı kadar yer kaplar (Span gibi).
• display: inline-block: Hem yan yana gelebilirler hem de genişlik ve yükseklik değerlerini kabul ederler. Buton tasarımları için harikadır.
• display: none: Elemanı tamamen gizler. Ekranda hiç yer kaplamaz.

📍 Position Özellikleri ve Uygulamaları (Konumlandırma)

Ögelerin sayfada nerede duracağını milimetrik olarak ayarlamaya yarar. top, left, right, bottom komutlarıyla kontrol edilir.

• Static: Varsayılan değerdir. Her şey normal akışında yukarıdan aşağıya dizilir.
• Relative: Elemanın kendi normal yerinden itibaren kaydırılmasını sağlar.
• Absolute: Elemanı normal akıştan tamamen koparır. En yakın relative ana kapsayıcısına göre bağımsızca konumlandırır.
• Fixed: Ekrana çiviler. Sayfa aşağı kaydırılsa bile o öge hep aynı yerde kalır (Örn: Canlı destek butonları).
• Sticky: Sayfa kaydırılırken belirli bir noktaya gelene kadar normal davranır, o noktaya ulaştığında fixed gibi yapışır (Örn: Yukarıda sabit kalan menüler).

↔️ Margin ve Padding (Dış ve İç Boşluk)

Kutuların nefes almasını sağlayan en önemli iki kavramdır.

• Margin: Kutunun dışındaki boşluktur. Diğer kutularla arasına mesafe koyar. margin: auto kutuyu yatayda ortalamak için kullanılır.
• Padding: Kutunun içindeki boşluktur. Kutunun çizgileri ile içindeki yazı arasındaki mesafedir.

🖼️ Kutu Modeli Görsel Analojisi:

Bir tablo satın aldığınızı düşünün. Tablonun çerçevesi Border'dır. Çerçevenin içindeki resim ile çerçeve arasındaki beyaz boşluk Padding'dir. Bu tabloyu duvara astığınızda yandaki diğer tabloyla arasında bıraktığınız boşluk ise Margin'dir.

.kutu {

border: 2px solid black; /* Çerçeve */

padding: 20px; /* İç boşluk */

margin: 15px; /* Dış boşluk */

}

🔤 Fontlar, İkonlar ve Metin Biçimlendirme

• Font-size: Yazı boyutunu ayarlar. px (sabit piksel), em ve % (ekrana göre esnek boyut) birimlerini kullanır.
• Google Fonts: İnternet üzerindeki binlerce ücretsiz yazı tipini projeye dahil etmeyi öğretir.
• İkon Kullanımı: FontAwesome gibi kütüphaneleri bir CDN (internet köprüsü) linki ile siteye bağlayıp, butonların içine ev, zarf veya telefon ikonları yerleştirmeyi sağlar.
• Text-transform: Yazıların hepsini büyük harfe (uppercase) veya küçük harfe (lowercase) çevirir.

---

📱 BÖLÜM 6: CSS - Responsive (Duyarlı) Tasarım ve Uygulamaları

Sitenin sadece bilgisayarda değil, cep telefonlarında ve tabletlerde de bozulmadan, ekran boyutuna göre şekil alarak açılmasına Responsive Tasarım denir.

⚡ Medya Sorguları ve Breakpoint'ler (Kırılma Noktaları)

Ekran genişliğini kontrol ederek "Eğer ekran genişliği 800 pikselden küçükse şu CSS kodlarını çalıştır" dememizi sağlayan @media yapısı kullanılır. Sitenin görünümünün değiştiği bu sınır çizgilerine Breakpoint denir.

🛠️ Uygulama Örneği:

/* Bilgisayarda yan yana duran kartlar */

.kart {

width: 33.3%;

float: left;

}

/* Ekran telefon boyutuna (800px altına) inince kartları alt alta al */

@media (max-width: 800px) {

.kart {

width: 100%; /* Artık tüm satırı kaplar, alt alta dizilirler */

font-size: 14px; /* Yazıları da biraz küçülttük */

}

}

🛠️ Kurs Dosyasındaki Uygulamalar:

1. Responsive Site Uygulaması: Header (Başlık ve logo alanı), Main (Kartlar ve içerik alanı) ve Footer (En alttaki telif hakkı ve iletişim alanı) bölümlerinden oluşan esnek bir site iskeleti kurulur. Sınır değerler olarak 800px ve 1200px seçilerek mobil-tablet-PC geçişleri kusursuzlaştırılır.
2. HTML ve CSS ile Komple Site Geliştirme: Montserrat ve Lato yazı tipleri kullanılarak gerçekçi bir portfolyo (iş örnekleri) sitesi yapılır. Görsellerin üzerine gelindiğinde açılan artı ikonlu katmanlar (overlay) ve menülerin esnemesi clearfix ve esnek genişliklerle (img-fluid ile resimlerin taşmasını önleme) kontrol edilir.

Harika, hiç hız kesmeden ve aynı detay seviyesiyle dosyadaki tüm konuları satır satır incelemeye devam ediyoruz. Şimdi web geliştirmeyi inanılmaz hızlandıran Bootstrap 5 kütüphanesini ve ardından sayfalarımıza akıl ve hareket katacak olan JavaScript dünyasını tüm uygulama ve örnekleriyle ele alalım.

---

⚡ BÖLÜM 7: Bootstrap 5

Bootstrap, dünyada en çok kullanılan hazır CSS ve JavaScript kütüphanesidir. Sıfırdan binlerce satır CSS kodu yazmak yerine, Bootstrap'in önceden hazırladığı sınıfları (class) HTML etiketlerimize ekleyerek saniyeler içinde modern arayüzler tasarlayabiliriz.

📦 Bootstrap Nedir ve Kurulumu

Bootstrap'i projemize dahil etmek için internet üzerindeki hazır sunucu linklerini (CDN) <head> bölümüne yapıştırmamız yeterlidir. Kurulduğu andan itibaren tarayıcının tüm varsayılan ilkel fontları ve boşlukları modern bir görünüme kavuşur.

🎨 Heading, Text ve Renklerle Çalışmak

Bootstrap metinleri biçimlendirmek ve renklendirmek için hazır sınıflar sunar. Temel renk paleti şu isimlerden oluşur:

• primary: Mavi (Ana renk)
• success: Yeşil (Başarı/Onay)
• danger: Kırmızı (Tehlike/Hata)
• warning: Sarı (Uyarı)
• dark: Siyah/Koyu Gri

💡 Örnek:

<p class="text-danger bg-dark">Bu yazı siyah arka plan üzerine kırmızı renkle yazılmıştır.</p>

<h1 class="display-1">Çok Büyük Başlık</h1>

🔘 Button (Buton) ve Grupları Kullanımı

Standart gri ve çirkin HTML butonlarını btn sınıfı ile harika görünümlü modern butonlara dönüştürür.

• btn-primary: Mavi buton yapar.
• btn-outline-danger: İçi boş, kenarlıkları kırmızı, üzerine gelince içi dolan şık bir buton yapar.
• btn-group: Yan yana birleşik duran buton grupları (Örn: [Geri] [1] [2] [İleri] sayfalama butonları) oluşturur.

🛠️ Uygulama Örneği:

<button class="btn btn-success btn-lg">Büyük Onay Butonu</button>

<button class="btn btn-outline-warning">Sarı Çerçeveli Buton</button>

📏 Margin, Padding ve Border Kullanımı

Bootstrap'te elle CSS yazmak yerine boşlukları ve kenarlıkları sınıflarla yönetiriz. 0 ile 5 arasında değerler kullanılır:

• m-3: Her taraftan (m: margin) 3 birim dış boşluk bırakır.
• pt-5: Sadece üstten (p: padding, t: top) 5 birim iç boşluk bırakır.
• rounded-circle: Kare bir görseli tam bir yuvarlak (daire) haline getirir.
• shadow: Elemana derinlik hissi veren çok şık bir gölge ekler.

📊 Tablo, Liste ve Alert (Görsel Uyarılar) Kullanımı

• table table-striped table-hover: Tabloyu çizgili yapar ve satırların üzerine fareyle gelindiğinde parlamasını sağlar.
• list-group-item-action: Listedeki elemanları tıklanabilir, etkileşimli butonlar haline getirir.
• alert alert-success: Kullanıcıya "Kayıt Başarılı!" gibi yeşil bir kutu içinde uyarı mesajı gösterir.

📝 Formlar, Card ve Dropdown Kullanımı

• form-control: Giriş kutularını (input) ekranı kaplayan, odaklanınca mavi parlayan modern form alanlarına dönüştürür.
• Card (Kart Yapısı): Görseli, başlığı, açıklaması ve butonu olan bloklar oluşturur. E-ticaret sitelerindeki ürün kutuları tamamen bu yapıyla yapılır.
• Dropdown: Tıklanınca aşağı doğru açılan menüler oluşturur. dropdown-toggle ve dropdown-menu sınıfları kullanılır.

🛠️ Uygulama Örneği (Ürün Kartı Tasarımı):

<div class="card" style="width: 18rem;">

<img src="telefon.jpg" class="card-img-top" alt="Telefon">

<div class="card-body">

<h5 class="card-title">Akıllı Telefon</h5>

<p class="card-text">En son teknoloji harikası cihaz.</p>

<a href="#" class="btn btn-primary">Satın Al</a>

</div>

</div>

🧭 Navbar, Collapse, Accordion, Carousel ve Modal

Bunlar Bootstrap'in JavaScript ile çalışan en güçlü akıllı bileşenleridir:

• Navbar: Ekran küçüldüğünde otomatik olarak "hamburger menü" (üç çizgi) butonuna dönüşen responsive üst menüdür.
• Collapse: Tıklanınca aşağı doğru açılıp kapanan gizli içerik alanlarıdır.
• Accordion: Sıkça Sorulan Sorular sayfalarında bir soruya tıklayınca diğer açık sorunun kapanıp yenisinin açıldığı akıllı yapılardır.
• Carousel: Sitelerin ana sayfalarında kendi kendine dönen, sağa sola kayan büyük reklam ve görsel panolarıdır (Slider).
• Modal: Sayfanın tam ortasında açılan, arka planı karartan açılır pencerelerdir (Popup). Kullanıcı "Sil" butonuna bastığında "Emin misiniz?" diye soran pencereler bu şekilde yapılır.

---

🧠 BÖLÜM 8: JavaScript'e Giriş ve Temeller

JavaScript (JS), web sayfalarına gerçek anlamda "beyin" kazandıran, dinamik işlemler yapmamızı sağlayan tam gelişmiş bir programlama dilidir. HTML kemik, CSS elbise ise JavaScript bu insanın yürümesi, konuşması ve düşünmesidir.

⚙️ Kurulum ve Giriş

JavaScript kodları HTML sayfasına <script> etiketi açılarak yazılır. Tarayıcıda test etmek için iki ana komut kullanılır:

• alert("Merhaba!");: Ekrana bir uyarı penceresi fırlatır.
• console.log("Buradayım");: Kullanıcının görmediği, geliştiricinin hataları incelediği tarayıcı konsoluna gizli mesaj yazar.

📦 Değişkenler, Sabitler ve Veri Tipleri

Bilgisayarın hafızasında bilgi saklamak için kutular oluştururuz. Bu kutulara değişken denir.

• let: İçindeki değer sonradan değiştirilebilen değişkenler için kullanılır.
• const: İçindeki değer asla değiştirilemeyen, sabit kutular için kullanılır (Örn: Pi sayısı).

🧬 Veri Tipleri:

• String: Düz metinler. Çift tırnak içinde yazılır. (Örn: "Ahmet")
• Number: Sayılar. Tırnaksız yazılır. (Örn: 25)
• Boolean: Sadece doğru (true) veya yanlış (false) değeri alabilen mantıksal tip.

🛠️ Uygulama Örneği:

let yas = 20;

yas = 21; // Değer güncellenebilir.

const pi = 3.14;

// pi = 5; // Hata verir! Sabitler değiştirilemez.

➕ Operatörler ve Metotlar

• Aritmetik Operatörler: Toplama (+), çıkarma (-), çarpma (*), bölme (/).
• Mantıksal ve Karşılaştırma: İki şey eşit mi (== veya tam eşitlik ===), büyük mü (>) kontrolü yapar.
• Sayı Metotları: parseInt("5") yazıyı sayıya dönüştürür. Math.random() sıfır ile bir arasında rastgele bir sayı üretir.
• String Metotları: Yazıları manipüle etmeyi sağlar.
• toUpperCase(): Tüm harfleri büyütür.
• slice(0, 5): Yazının sadece ilk 5 harfini kesip alır.
• split(" "): Yazıyı boşluklardan bölerek kelime kelime ayırır.

💡 Örnek:

let mesaj = "Web Geliştirme";

console.log(mesaj.toUpperCase()); // Çıktı: WEB GELİŞTİRME

console.log(mesaj.length); // Çıktı: 14 (Karakter sayısı)

🗄️ Diziler (Arrays) ve Metotları

Tek bir değişken içinde birden fazla bilgiyi listeler halinde saklamak için kullanılır. Köşeli parantez [] ile gösterilir.

• push(): Dizinin sonuna yeni bir eleman ekler.
• pop(): Dizinin sonundaki elemanı çıkartır.

💡 Örnek:

let meyveler = ["Elma", "Armut", "Muz"];

meyveler.push("Çilek"); // Dizinin yeni hali: ["Elma", "Armut", "Muz", "Çilek"]

console.log(meyveler[0]); // Çıktı: Elma (Diziler 0'dan başlar)

---

🔀 BÖLÜM 9: JavaScript Koşul İfadeleri ve Döngüler

🚦 Koşul İfadeleri (if - else, switch, Object Literals)

Programın belirli şartlara göre farklı kararlar vermesini sağlar. "Eğer kullanıcının yaşı 18'den büyükse siteye al, değilse hata ver" mantığıdır.

• if: Şart doğruysa çalışacak kod bloğu.
• else: Şart yanlışsa çalışacak kod bloğu.
• switch: Tek bir değişkenin çok fazla farklı durumunu (Örn: Haftanın günleri) kontrol etmek için daha temiz bir alternatiftir.

🛠️ Uygulama Örneği:

let bakiye = 100;

let urunFiyati = 120;

if (bakiye >= urunFiyati) {

console.log("Satın alabilirsiniz.");

} else {

console.log("Yetersiz bakiye!"); // Bu kod çalışacaktır.

}

🔄 Döngüler (while, for, do-while)

Belirli bir kod bloğunu, şart sağlandığı sürece tekrar tekrar çalıştırmak için kullanılır. Örneğin 100 defa ekrana yazı yazdırmak veya bir dizideki binlerce ürünü sayfada listelemek için döngüler şarttır.

• break: Döngüyü aniden durdurur ve döngüden çıkar.
• continue: Döngünün o anki adımını pas geçer, bir sonraki adıma atlar.

🛠️ Uygulama Örneği (Dizi Elemanlarını Döngüyle Basmak):

let arabalar = ["BMW", "Audi", "Mercedes"];

for (let i = 0; i < arabalar.length; i++) {

console.log("Araba: " + arabalar[i]);

}

---

🧩 BÖLÜM 10: JavaScript Fonksiyonları ve Yapısı

🛠️ Fonksiyonlar (functions)

Tekrar tekrar kullanılacak kod bloklarını tek bir isim altında paketleme işlemidir. Bir kez yazılır, ihtiyaç duyulan her yerde ismi çağrılarak çalıştırılır.

🛠️ Uygulama Örneği:

// Fonksiyonu Tanımlama

function selamVer(isim) {

return "Merhaba " + isim + "!";

}

// Fonksiyonu Çalıştırma (Çağırma)

let sonuc = selamVer("Can");

console.log(sonuc); // Çıktı: Merhaba Can!

🪟 Window Objesi ve Metotları

Kapsayıcı en büyük JavaScript nesnesidir. Tarayıcının kendisini temsil eder.

• window.location: Sitenin o anki internet adresini (URL) verir veya başka bir siteye yönlendirme yapmayı sağlar (window.location.href = "url").
• window.confirm(): Kullanıcıya "Emin misiniz?" diye sorup Tamam (true) veya İptal (false) cevabı alan bir pencere açar.

🎯 Scope (Kapsam) Kavramı

Değişkenlerin sitenin hangi noktalarından erişilebilir olduğunu belirler.

• Global Scope: Herhangi bir fonksiyonun dışında yazılan değişkenlerdir. Sitenin her yerinden okunabilir.
• Local / Block Scope: Bir fonksiyonun veya if bloğunun içinde let veya const ile tanımlanan değişkenlerdir. Sadece o bloğun içinde yaşarlar, dışarıdan çağrılamazlar.

---

🏛️ BÖLÜM 11: DOM (Document Object Model) Manipülasyonu

DOM, HTML sayfasındaki her bir etiketin (başlıklar, resimler, paragraflar) JavaScript tarafından kontrol edilebilen birer nesneye (objeye) dönüşmüş halidir. DOM sayesinde CSS kodlarını canlı değiştirebilir, yazıları güncelleyebilir veya yeni etiketler üretebiliriz.

🎯 Element Seçimi

JavaScript ile sayfadaki bir HTML ögesini yakalamanın yolları:

• document.getElementById("id-adi"): ID kimliğine göre tek bir eleman seçer.
• document.querySelector(".sinif-adi"): CSS seçici mantığıyla (nokta veya kare kullanarak) sayfadaki eşleşen ilk elemanı yakalar.
• document.querySelectorAll(): Şartı sağlayan tüm elemanları bir liste halinde çoğul olarak toplar.

✏️ İçerik ve Stil Değiştirme

• innerText: Bir etiketin sadece içindeki düz yazıyı okur veya değiştirir.
• innerHTML: Bir etiketin içine doğrudan yeni HTML kodları gömmek için kullanılır.
• style.özellik: Elemanın CSS özelliklerini doğrudan değiştirir.

🛠️ Uygulama Örneği:

let baslik = document.getElementById("ana-baslik");

baslik.innerText = "Yeni Başlık Başarıyla Yazıldı!";

baslik.style.color = "purple"; // Başlığı canlı olarak mor yapar.

🧬 DOM Üzerinde Gezinme, Eleman Oluşturma ve Silme

• parentElement: Bir elemanın üst kapsayıcısına (babasına) gitmeyi sağlar.
• children: Elemanın altındaki çocuk etiketleri listeler.
• document.createElement("li"): Hafızada tamamen yeni bir HTML etiketi (Örn: Liste elemanı) üretir.
• appendChild(): Üretilen bu yeni elemanı sayfanın içine yerleştirir.
• remove(): Seçilen elemanı sayfadan tamamen siler.

---

🔔 BÖLÜM 12: DOM Eventleri (Olaylar)

Kullanıcının web sitesinde yaptığı her hareket (tıklama, fareyi oynatma, klavyeden tuşa basma) bir Event (Olay) tetikler. JavaScript bu olayları dinler ve tepki verir.

🖱️ Mouse (Fare) Eventleri

• click: Elemana tıklandığında tetiklenir.
• dblclick: Çift tıklandığında tetiklenir.
• mousedown / mouseup: Fare tuşuna basıldığı an ve el çekildiği an.
• mousemove: Fare elemanın üzerinde milimetrik olarak her hareket ettiğinde tetiklenir.

⌨️ Keyboard (Klavye) Eventleri

• keyup: Klavyeden bir tuşa basıp elinizi çektiğiniz an tetiklenir. Arama kutularına yazı yazılırken anlık arama sonuçları göstermek için mükemmeldir.
• preventDefault(): Bir olayın tarayıcı tarafından yapılan varsayılan hareketini engeller. Örneğin bir form gönderildiğinde sayfanın kendi kendine yenilenmesini bu komutla durdururuz.

🛠️ Uygulama Örneği (Butona Tıklama Olayı Dinleyici):

let buton = document.querySelector("#gonder-btn");

buton.addEventListener("click", function(event) {

event.preventDefault(); // Sayfa yenilenmesini durdurduk

console.log("Butona başarıyla tıklandı!");

});

---

💾 BÖLÜM 13: Tarayıcı Depolama Alanları

Sitenizi kapatıp açsanız bile tarayıcının hafızasında veri saklamak için kullanılan alanlardır.

• Session Storage: Veriler sadece o sekme veya tarayıcı penceresi açık kaldığı sürece saklanır. Sekme kapatıldığı an veriler tamamen silinir.
• Local Storage: Kalıcı hafızadır. Bilgisayar kapatılsa, aylar geçse bile veriler silinmez. Kodla temizlenmesi veya tarayıcı geçmişinin silinmesi gerekir. Sadece düz metin saklayabilir. Dizileri saklamak için JSON.stringify(), geri okumak için JSON.parse() komutları kullanılır.

🛠️ Uygulama Örneği (Local Storage Veri Kaydetme ve Çekme):

// Veri kaydetme

localStorage.setItem("kullaniciAdi", "can123");

// Veri okuma

let isim = localStorage.getItem("kullaniciAdi");

console.log(isim); // Çıktı: can123

---

📝 BÖLÜM 14: UYGULAMA PROJESİ 1 - Todo List (Yapılacaklar Listesi)

Kursun buraya kadar olan tüm HTML, CSS, Bootstrap ve JavaScript bilgilerini birleştiren ilk büyük projesidir.

⚙️ Projenin Çalışma Mantığı ve Adımları:

1. Arayüz Tanıma: Bootstrap kullanılarak şık, listelerden ve bir input kutusundan oluşan form tasarlanır.
2. Eleman Ekleme: Kullanıcı kutuya yapılacak bir iş (Örn: "Kitap oku") yazıp ekle butonuna bastığında veya Enter'a tıkladığında, document.createElement("li") ile dinamik bir liste elemanı oluşturulur. İçine Bootstrap ikonlu bir silme linki (<a>) eklenir ve appendChild ile listeye eklenir. Eğer kutu boşsa alert ile uyarı verilir.
3. Local Storage Entegrasyonu: Eklenen her yeni iş, kalıcı olması için localStorage dizisine push edilir. Böylece sayfa yenilense bile yapılacaklar listesi kaybolmaz.
4. Eleman Silme: Kullanıcı listenin yanındaki çarpı ikonuna bastığında bir confirm("Emin misiniz?") penceresi açılır. Onay verirse DOM üzerinden o <li> elemanı remove() ile silinir. Aynı zamanda localStorage üzerinden de getItem ve splice mantığıyla silinerek depolama alanı güncellenir.

---

Harika! Hiç vakit kaybetmeden kurs dosyamızın son aşaması olan jQuery, İleri Seviye Nesne Tabanlı JavaScript (OOP) ve ikinci büyük proje olan Oto Galeri Projesi konularını tüm detayları, kod örnekleri ve uygulama mantıklarıyla satır satır inceleyerek eğitim programını tamamlayalım.

---

🏎️ BÖLÜM 15: JQuery Kütüphanesi

jQuery, "Az Kod Yaz, Çok İş Yap" (Write less, do more) felsefesiyle geliştirilmiş, JavaScript yazmayı inanılmaz derecede kolaylaştıran eski ama hala çok popüler bir kütüphanedir. Saf JavaScript ile 10 satırda yaptığımız bir seçme veya animasyon işlemini jQuery ile tek satırda çözebiliriz. JavaScript'teki document.querySelector yerine kısaca $ işareti kullanılır.

🎯 Seçiciler (Selectors) ve İçerik Yönetimi (Styling)

Sayfadaki elemanları yakalamak ve onlara stil vermek çok pratiktir.

• $("p"): Sayfadaki tüm paragrafları seçer.
• $(".kutu"): "kutu" sınıfına sahip elemanları seçer.
• text(): Elemanın içindeki düz yazıyı okur veya değiştirir.
• addClass() / removeClass(): Elemana canlı olarak CSS sınıfı ekler veya siler.
• toggleClass(): Sınıf varsa siler, yoksa ekler (Örn: Gece/Gündüz modu butonu için).

🛠️ Uygulama Örneği:

// Saf JavaScript sürümü:

document.querySelector(".btn").classList.add("aktif");

// jQuery sürümü:

$(".btn").addClass("aktif"); // Çok daha kısa ve temiz!

🔔 Olaylar (Click & Change Events)

Kullanıcı etkileşimlerini yakalamak için addEventListener yerine doğrudan olay metotları kullanılır.

• click(): Bir elemana tıklandığında çalışır.
• change(): Bir seçim kutusunun (select) veya inputun içeriği değiştiğinde tetiklenir.

💡 Örnek:

$("#sehir-secim").change(function() {

let secilenSehir = $(this).val();

console.log("Kullanıcının seçtiği şehir: " + secilenSehir);

});

🎬 JQuery Efektleri ve Animasyonlar (Show, Hide, Slide, Fade, Animate)

Sayfadaki elemanları pürüzsüzce gizleyip açmak veya hareket ettirmek için yerleşik efektler sunar.

• show() / hide() / toggle(): Elemanı anında veya süre belirterek gösterir/gizler.
• fadeIn() / fadeOut(): Elemanı opaklığını (görünürlüğünü) yavaşça değiştirerek açar/kapatır.
• slideUp() / slideDown(): Elemanı yukarı veya aşağı doğru bir stor perde gibi kaydırarak açar/kapatır.
• animate(): CSS özelliklerini (genişlik, yükseklik, kenarlık vb.) zamana yayarak hareketlendirir.

🛠️ Kurs Dosyasındaki Uygulama: Animasyonlu Mesaj Kutusu

Bu derste jQuery efektleri birleştirilerek gerçek bir arayüz bileşeni yapılır. Kullanıcı bir mesaj kutusunun başlığına tıkladığında altındaki içerik alanı slideDown() veya slideToggle() ile pürüzsüzce aşağı doğru açılır. Kutunun sağ üst köşesindeki çarpı (X) ikonuna basıldığında ise tüm kutu fadeOut() efektiyle yavaşça şeffaflaşarak ekrandan kaybolur. Fareyle üzerine gelindiğinde (hover) kutunun gölge ve renk tonları değişerek kullanıcıya görsel bir geri bildirim sunulur.

---

🧬 BÖLÜM 16: İleri Seviye JavaScript - Nesne Tabanlı Programlama (OOP)

Büyük yazılımlar geliştirirken kodların karmakarışık olmasını önlemek ve her şeyi gerçek dünyadaki nesnelere benzeterek düzenlemek için Nesne Tabanlı Programlama (Object Oriented Programming) kullanılır.

🏗️ Constructor (Yapıcı Blok) ve Nesne Oluşturma

Bir kalıp (şablon) üreterek, o kalıptan binlerce benzer nesne üretmemizi sağlar. Gerçek hayattaki bir fabrika kalıbı gibidir. Örneğin, bir "Araba" kalıbı oluşturup bu kalıptan farklı renk ve markalarda arabalar türetebiliriz.

🛠️ Uygulama Örneği:

// Yapıcı Fonksiyon (Kalıp)

function Araba(marka, model, yil) {

this.marka = marka;

this.model = model;

this.yil = yil;

}

// Kalıbı kullanarak yeni nesneler üretme (Constructor kullanımı)

let araba1 = new Araba("Toyota", "Corolla", 2022);

let araba2 = new Araba("Honda", "Civic", 2023);

console.log(araba1.marka); // Çıktı: Toyota

🧬 Prototype (Miras Alma ve Paylaşım)

Ürettiğimiz her nesnenin içine fonksiyonları tek tek kopyalamak bilgisayarın hafızasını (RAM) gereksiz doldurur. Prototype kavramı sayesinde, ortak fonksiyonları kalıbın ortak hafızasına bir kez yazarız. Tüm üretilen nesneler bu fonksiyonu oradan ortaklaşa kullanır (miras alır).

💡 Örnek:

// Fonksiyonu prototype olarak ortak hafızaya ekliyoruz

Araba.prototype.bilgiVer = function() {

return this.marka + " " + this.model + " (" + this.yil + ")";

};

console.log(araba1.bilgiVer()); // Çıktı: Toyota Corolla (2022)

🛠️ Object.create, Kalıtım ve Immediate Fonksiyonlar

• Object.create(): Mevcut bir nesneyi doğrudan temel alarak (onu klonlayarak) yeni bir nesne üretmeye yarar.
• Prototype Tabanlı Kalıtım (Inheritance): Bir nesne sınıfının, başka bir nesne sınıfının tüm özelliklerini ve metotlarını devralmasıdır. (Örn: "Araba" sınıfının, "Tasit" sınıfından miras alması).
• Immediate Fonksiyonlar (IIFE): Tanımlandığı an kendi kendine otomatik olarak çalışan, dışarıdan erişilemeyen güvenli kod blokları oluşturmak için kullanılır. (function(){ ... })(); şeklinde yazılır.

---

🚗 BÖLÜM 17: UYGULAMA PROJESİ 2 - Oto Galeri Projesi

Kursun öğrendiği tüm İleri Seviye JavaScript, Nesne Tabanlı Programlama (OOP), DOM manipülasyonu ve Local Storage bilgilerini harmanlayan en büyük ve profesyonel kapanış projesidir.

⚙️ Projenin Mimari Yapısı ve Çalışma Adımları:

1. Arayüz Tanıma: Bootstrap 5 şablonu kullanılarak araç markası, modeli, üretim yılı ve görsel linkinin girilebileceği şık bir form alanı ve eklenen araçların listeleneceği bir tablo yapısı kurulur.
2. Araçları Arayüze Ekleme: Girilen veriler JavaScript OOP mantığındaki Araba constructor kalıbı ile bir nesneye dönüştürülür. Yazılan arayüz fonksiyonları vasıtasıyla bu nesne verileri HTML tablosuna (<table>) yeni bir satır (<tr><td>...</td></tr>) olarak dinamikçe giydirilir.
3. Hata ve Bilgilendirme Mesajları: Kullanıcı formu boş bırakıp eklemeye çalışırsa, ekranda DisplayMessage fonksiyonu çağrılarak Bootstrap'in alert-danger (kırmızı) uyarı kutusu gösterilir. Başarılı eklemelerde ise alert-success (yeşil) mesajı verilir. Bu mesajların ekranda sonsuza kadar kalmaması için setTimeout fonksiyonu kullanılarak 3 saniye sonra otomatik olarak eriyip kaybolması (DOM'dan silinmesi) sağlanır.
4. Local Storage Entegrasyonu: Eklenen araç nesneleri, tarayıcı hafızasına bir dizi (array) halinde kaydedilir. Bunun için veriler JSON.stringify ile metne dönüştürülerek depolanır. Sayfa her açıldığında Tüm Araçları Storage'dan Yükleme fonksiyonu devreye girer; getItem ve JSON.parse ile verileri geri okur ve tabloya otomatik olarak yeniden dizer.
5. Arayüzden ve Hafızadan Silme: Her araç satırının yanına bir "Aracı Sil" butonu yerleştirilir. Bu butona tıklandığında araç hem HTML tablosundan (remove()) anlık olarak temizlenir hem de benzersiz bilgileri üzerinden localStorage dizisinden bulunarak kalıcı olarak silinir.
6. Tüm Araçları Silme: Tek bir buton yardımıyla hem arayüzdeki tüm tablo satırları sıfırlanır hem de localStorage.clear() veya ilgili anahtar silinerek tüm galeri veri tabanı tek hamlede temizlenmiş olur.

---

Harika bir istek! Kurs içeriğindeki tüm uygulamaları birleştiren, bilgisayarında bir not defterine yapıştırıp çift tıkladığında tarayıcıda canlı olarak çalışacak dev bir kod taslağı hazırladım.

Bu tek dosyanın içinde HTML5 mimarisi, Bootstrap 5 ve özel CSS tasarımları, Responsive (mobil uyumlu) yapı, jQuery efektleri, JavaScript DOM manipülasyonu, Yerel Depolama (Local Storage) ve Nesne Tabanlı Programlama (OOP) bir arada yer alıyor.

Önce canlı kod taslağını inceleyelim, ardından en karmaşık spesifik konuları günlük hayat benzetmeleriyle beynimize kazıyalım!

---

💻 1. TARAYICIDA CANLI ÇALIŞACAK KOD TASLAĞI

Aşağıdaki kodları bilgisayarında masaüstüne index.html adıyla kaydet ve Google Chrome veya herhangi bir tarayıcı ile aç. Projeler tamamen çalışır durumdadır!

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Canlı Web Geliştirme Projeleri</title>

<!-- Bootstrap 5 CSS CDN -->

<link href="https://jsdelivr.net" rel="stylesheet">

<!-- Google Fonts -->

<link href="https://googleapis.com" rel="stylesheet">

<style>

/* Kurs Dosyasındaki Özel CSS ve Responsive Kuralları */

body {

font-family: 'Lato', sans-serif;

background-color: #f4f7f6;

}

h1, h2, h3, h4, .navbar-brand {

font-family: 'Montserrat', sans-serif;

font-weight: 700;

}

.jumbotron-custom {

background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

color: white;

padding: 2rem;

border-radius: 10px;

margin-bottom: 2rem;

}

/* jQuery ile canlandıracağımız Mesaj Kutusu Stili */

.mesaj-kutusu {

background-color: #fff3cd;

border: 1px solid #ffeeba;

border-radius: 5px;

margin-bottom: 1.5rem;

}

.mesaj-header {

background-color: #ffeeba;

padding: 10px;

cursor: pointer;

font-weight: bold;

display: flex;

justify-content: space-between;

align-items: center;

}

.mesaj-icerik {

padding: 15px;

display: none; /* İlk başta kapalı duracak, jQuery ile açacağız */

}

/* Mobil Uyum (Responsive Breakpoints) */

@media (max-width: 768px) {

.jumbotron-custom {

padding: 1rem;

text-align: center;

}

}

</style>

</head>

<body>

<!-- NAVBAR BÖLÜMÜ -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">

<div class="container">

<a class="navbar-brand" href="#">🚀 AKADEMİ PROJELERİ</a>

</div>

</nav>

<div class="container my-4">

<!-- JUMBOTRON (GİRİŞ ALANI) -->

<div class="jumbotron-custom shadow">

<h2>Sıfırdan İleri Düzey Web Geliştirme Paneli</h2>

<p>Aşağıda kurstaki tüm uygulama projelerinin (Todo List, Oto Galeri ve Animasyonlu Mesaj Kutusu) çalışan canlı hallerini görebilirsiniz.</p>

</div>

<!-- UYGULAMA 1: JQUERY ANİMASYONLU MESAJ KUTUSU -->

<div class="mesaj-kutusu shadow-sm">

<div class="mesaj-header">

<span>🔔 Duyuru: Kurs Bilgilendirmesi (Açmak İçin Tıkla)</span>

<button class="btn btn-sm btn-close" id="mesaj-kapat-btn"></button>

</div>

<div class="mesaj-icerik">

<p class="m-0">Bu kutu <strong>jQuery</strong> efektleri (slideToggle ve fadeOut) kullanılarak tasarlanmıştır. Başlığa basınca açılır, sağdaki çarpıya basınca tamamen yok olur!</p>

</div>

</div>

<div class="row">

<!-- UYGULAMA 2: TODO LIST (YAPILACAKLAR LİSTESİ) -->

<div class="col-md-6 mb-4">

<div class="card h-100 shadow-sm">

<div class="card-header bg-primary text-white">

<h4 class="card-title m-0">📝 Yapılacaklar Listesi (Todo)</h4>

</div>

<div class="card-body">

<!-- Dinamik Mesaj Alanı -->

<div id="todo-alert"></div>

<form id="todo-form" class="d-flex mb-3">

<input type="text" id="todo-input" class="form-control me-2" placeholder="Yeni bir iş yazın...">

<button type="submit" class="btn btn-success">Ekle</button>

</form>

<ul id="todo-list" class="list-group">

<!-- JavaScript DOM ile buraya eleman eklenecek -->

</ul>

</div>

</div>

</div>

<!-- UYGULAMA 3: OTO GALERİ PROJESİ (OOP & STORAGE) -->

<div class="col-md-6 mb-4">

<div class="card h-100 shadow-sm">

<div class="card-header bg-dark text-white">

<h4 class="card-title m-0">🚗 Oto Galeri Yönetim Sistemi</h4>

</div>

<div class="card-body">

<!-- Dinamik Mesaj Alanı -->

<div id="galeri-alert"></div>

<form id="araba-form" class="row g-2 mb-3">

<div class="col-6">

<input type="text" id="araba-marka" class="form-control form-control-sm" placeholder="Marka (Örn: Toyota)" required>

</div>

<div class="col-6">

<input type="text" id="araba-model" class="form-control form-control-sm" placeholder="Model (Örn: Corolla)" required>

</div>

<div class="col-12">

<input type="number" id="araba-yil" class="form-control form-control-sm" placeholder="Üretim Yılı (Örn: 2022)" required>

</div>

<div class="col-12">

<button type="submit" class="btn btn-sm btn-dark w-100">Aracı Galeriye Ekle</button>

</div>

</form>

<div class="table-responsive">

<table class="table table-striped table-hover align-middle" style="font-size: 0.9rem;">

<thead class="table-light">

<tr>

<th>Marka</th>

<th>Model</th>

<th>Yıl</th>

<th>İşlem</th>

</tr>

</thead>

<tbody id="araba-listesi">

<!-- OOP ve DOM ile buraya satırlar eklenecek -->

</tbody>

</table>

</div>

<button id="tum-arabalari-sil" class="btn btn-sm btn-danger w-100 mt-2">Tüm Galeriyi Boşalt</button>

</div>

</div>

</div>

</div>

</div>

<!-- KÜTÜPHANELER: jQuery ve Bootstrap JS CDN -->

<script src="https://jquery.com"></script>

<script src="https://jsdelivr.net"></script>

<script>

// ==========================================

// 1. JQUERY ANİMASYONLU MESAJ KUTUSU KODLARI

// ==========================================

$(document).ready(function() {

// Başlığa tıklanınca içeriği perde gibi aç/kapat

$(".mesaj-header").click(function(e) {

// Eğer çarpı butonuna basılmadıysa aç/kapat yap

if (!$(e.target).hasClass('btn-close')) {

$(".mesaj-icerik").slideToggle(400);

}

});

// Çarpı butonuna basınca kutuyu yavaşça şeffaflaştırarak (Fade) yok et

$("#mesaj-kapat-btn").click(function() {

$(".mesaj-kutusu").fadeOut(500);

});

});

// ==========================================

// 2. JAVASCRIPT DOM & STORAGE: TODO LIST PROJESİ

// ==========================================

const todoForm = document.getElementById("todo-form");

const todoInput = document.getElementById("todo-input");

const todoList = document.getElementById("todo-list");

const todoAlert = document.getElementById("todo-alert");

// Sayfa yüklendiğinde hafızadaki Todo'ları getir

document.addEventListener("DOMContentLoaded", yukleTodoList);

todoForm.addEventListener("submit", todoEkle);

function todoEkle(e) {

e.preventDefault();

const gorevText = todoInput.value.trim();

if (gorevText === "") {

mesajGoster(todoAlert, "Lütfen boş bırakmayın!", "danger");

return;

}

todoArayuzeEkle(gorevText);

todoStorageEkle(gorevText);

mesajGoster(todoAlert, "Görev başarıyla eklendi.", "success");

todoInput.value = "";

}

function todoArayuzeEkle(text) {

const li = document.createElement("li");

li.className = "list-group-item d-flex justify-content-between align-items-center shadow-sm mb-1 rounded";

li.innerText = text;

const silBtn = document.createElement("button");

silBtn.className = "btn btn-sm btn-outline-danger";

silBtn.innerText = "X";

silBtn.onclick = function() {

if (confirm("Bu görevi silmek istiyor musunuz?")) {

li.remove();

todoStorageSil(text);

mesajGoster(todoAlert, "Görev silindi.", "warning");

}

};

li.appendChild(silBtn);

todoList.appendChild(li);

}

function todoStorageEkle(yeniTodo) {

let todos = todoStorageAl();

todos.push(yeniTodo);

localStorage.setItem("todos", JSON.stringify(todos));

}

function todoStorageAl() {

return localStorage.getItem("todos") ? JSON.parse(localStorage.getItem("todos")) : [];

}

function yukleTodoList() {

let todos = todoStorageAl();
todos.forEach(todo => todoArayuzeEkle(todo));
}

function todoStorageSil(silinecekText) {
let todos = todoStorageAl();
todos = todos.filter(t => t !== silinecekText);
localStorage.setItem("todos", JSON.stringify(todos));
}

// Ortak Geçici Mesaj Fonksiyonu (setTimeout kullanımı)
function mesajGoster(element, mesaj, tip) {
element.innerHTML = <div class="alert alert-${tip} py-2 font-weight-bold" style="font-size:0.85rem;">${mesaj}</div>;
setTimeout(() => { element.innerHTML = ""; }, 2500);
}

// ==========================================
// 3. ADVANCED JAVASCRIPT: OOP OTO GALERİ PROJESİ
// ==========================================

// --- Constructor (Yapıcı Yapı / Nesne Kalıbı) ---
function Araba(marka, model, yil) {
this.marka = marka;
this.model = model;
this.yil = yil;
}

// Prototip yöntemi ile nesneye ortak metot ekleme
Araba.prototype.satirFormatiniAl = function() {
return <td>${this.marka}</td><td>${this.model}</td><td>${this.yil}</td>;
};

const arabaForm = document.getElementById("araba-form");
const arabaListesi = document.getElementById("araba-listesi");
const galeriAlert = document.getElementById("galeri-alert");
const tumunuSilBtn = document.getElementById("tum-arabalari-sil");

arabaForm.addEventListener("submit", arabaEkle);
tumunuSilBtn.addEventListener("click", tumGaleriyiSil);
document.addEventListener("DOMContentLoaded", yukleGaleri);

function arabaEkle(e) {
e.preventDefault();
const marka = document.getElementById("araba-marka").value.trim();
const model = document.getElementById("araba-model").value.trim();
const yil = document.getElementById("araba-yil").value.trim();

// OOP Kalıbından yeni bir araba nesnesi üretiyoruz
const yeniAraba = new Araba(marka, model, yil);

arabaArayuzeEkle(yeniAraba);
arabaStorageEkle(yeniAraba);
mesajGoster(galeriAlert, "Araç sisteme başarıyla kaydedildi.", "success");
arabaForm.reset();
}

function arabaArayuzeEkle(arabaNesnesi) {
const tr = document.createElement("tr");
// Nesnenin prototipindeki fonksiyonu çağırıyoruz
tr.innerHTML = arabaNesnesi.satirFormatiniAl() + <td><button class="btn btn-sm btn-danger tek-sil-btn">Sil</button></td>;

// Tekil araç silme olayı
tr.querySelector(".tek-sil-btn").onclick = function() {
if(confirm("Bu aracı galeriden çıkartmak istiyor musunuz?")) {
tr.remove();
arabaStorageSil(arabaNesnesi.marka, arabaNesnesi.model);
mesajGoster(galeriAlert, "Araç kaldırıldı.", "warning");
}
};

arabaListesi.appendChild(tr);
}

function arabaStorageEkle(araba) {
let arabalar = galeriStorageAl();
arabalar.push(araba);
localStorage.setItem("arabalar", JSON.stringify(arabalar));
}

function galeriStorageAl() {
return localStorage.getItem("arabalar") ? JSON.parse(localStorage.getItem("arabalar")) : [];
}

function yukleGaleri() {
let arabalar = galeriStorageAl();
arabalar.forEach(data => {
// Okunan düz veriyi tekrar OOP nesnesine dönüştürüyoruz
const eskiAraba = new Araba(data.marka, data.model, data.yil);
arabaArayuzeEkle(eskiAraba);
});
}

function arabaStorageSil(marka, model) {
let arabalar = galeriStorageAl();
arabalar = arabalar.filter(a => !(a.marka === marka && a.model === model));
localStorage.setItem("arabalar", JSON.stringify(arabalar));
}

function tumGaleriyiSil() {
if(confirm("TÜM GALERİYİ temizlemek istediğinize emin misiniz? Veriler kalıcı olarak silinecek!")) {
arabaListesi.innerHTML = "";
localStorage.removeItem("arabalar");
mesajGoster(galeriAlert, "Galeri tamamen boşaltıldı.", "danger");
}
}

---

## 🎯 2. SPESİFİK KONULARIN DERİNLERİNE YOLCULUK VE GÜNLÜK HAYAT BENZETMELERİ

Yazılım dünyasında ezber yaparsan unutursun. Gelin kurstaki en zor ve en can alıcı kavramları gerçek hayattan hikayelerle beynimizin mantık odalarına yerleştirelim.

### 🧬 A. JavaScript Nesne Tabanlı Programlama (OOP) ve Constructor

* **Teknik Tanım:** Sınıflar (Class) ve Yapıcı Fonksiyonlar (Constructor), nesnelerin özelliklerini ve altyapılarını tek bir merkezden türetmek için kullanılan üretim kalıplarıdır.

* **Daily Life Analogy (Günlük Hayat Benzetmesi):** Bir **kurabiye kalıbı** düşünün. Elinizde yıldız şeklinde metal bir kurabiye kalıbı var. Bu kalıbın kendisi **Constructor**'dır. Bu kalıbı hamura her bastırdığınızda elinize fiziki, gerçek bir kurabiye geçer. İşte o tek tek çıkan kurabiyeler birer **Nesnedir (Object)**.

* Bir kurabiyeye çikolata parçacığı serpiştirebilirsiniz (`araba1.marka = "Toyota"`), diğerine çilek sosu koyabilirsiniz (`araba2.marka = "Honda"`). Özellikleri değişse de hepsinin ortak formu "Yıldız Kurabiye Kalıbı"ndan (`Araba` şablonundan) çıkmış olmalarıdır.

### 🧠 B. JavaScript Prototype (Prototip) Kavramı

* **Teknik Tanım:** Nesnelerin bellekte fazladan yer kaplamasını önlemek amacıyla, ortak metot ve fonksiyonların nesne örneklerine değil, nesnenin bağlı olduğu üst prototip hafızasına bir kez yazılması mimarisidir.

* **Daily Life Analogy (Günlük Hayat Benzetmesi):** Büyük bir sitede 500 dairelik bir apartmanda yaşadığınızı hayal edin. Her daireye birer tane olimpik yüzme havuzu inşa etmek mi mantıklıdır, yoksa sitenin bahçesine **ortak kullanıma açık tek bir havuz** yapıp herkesin oraya gitmesini sağlamak mı?

* İşte her daireye havuz yapmak, fonksiyonu prototip kullanmadan her nesnenin içine tek tek yazmaktır (Bilgisayarın hafızasını/RAM'ini patlatır).

* Sitenin bahçesindeki ortak havuz ise **Prototype**'tır. Fonksiyon orada bir defa durur. `araba1` de ihtiyaç duyduğunda oraya gidip o fonksiyonu çalıştırır, `araba2` de!

### 📦 C. Tarayıcı Depolama Alanları: Local Storage vs Session Storage

* **Teknik Tanım:** Kullanıcı verilerini veritabanı olmadan tarayıcının yerel disk biriminde string (metin) formatında saklama protokolleridir.

* **Daily Life Analogy (Günlük Hayat Benzetmesi):**

* **Session Storage (Oturum Belleği):** Bir mağazaya girdiğinizde size verilen **emanet sepeti/alışveriş sepeti** gibidir. Mağazanın içinde gezdiğiniz sürece eşyalar sepetinizde durur. Mağazadan çıktığınız an (yani tarayıcı sekmesini kapattığınız an) o sepet görevliye teslim edilir, içindekiler sıfırlanır.

* **Local Storage (Yerel Bellek):** Evinizdeki **büyük giysi dolabı** gibidir. Mağazadan kıyafetleri alır eve gelir dolaba koyarsınız. Işıkları kapatsanız da, uyusanız da, evden çıkıp tatile gitseniz de (bilgisayarı kapatıp açsanız bile) o dolabı gidip elinizle temizlemediğiniz sürece kıyafetleriniz orada sonsuza kadar kalır.

### 🌐 D. DOM (Document Object Model) ve Event (Olay) Yapısı

* **Teknik Tanım:** HTML dökümanının hiyerarşik bir ağaç yapısına dönüştürülerek JavaScript'in erişebileceği nesneler haline getirilmesi ve kullanıcının etkileşimlerinin dinlenmesidir.

* **Daily Life Analogy (Günlük Hayat Benzetmesi):** Evinizdeki **akıllı elektrik sigorta panosu ve düğmeler** gibidir. Evin duvarları ve kabloları HTML'dir. Pano üzerindeki düğmelerin her biri birer **DOM elemanıdır**.

* Siz gidip duvardaki düğmeye parmağınızla bastığınız an bir **Event (Olay - Click)** gerçekleşir.

* Arka taraftaki akıllı röle (JavaScript `addEventListener`) bu basılma anını anında yakalar (dinler) ve salonun lambasını yakar (`style.backgroundColor = "yellow"`). Düğmeye basmasaydınız lamba yanmayacaktı; yani kod sadece olay tetiklendiğinde çalışır.

### 📱 E. Responsive Breakpoints (Kırılma Noktaları) ve Medya Sorguları

* **Teknik Tanım:** `@media` kuralları ile cihazın ekran genişliği piksel cinsinden ölçülerek, tasarımın o boyut limitlerine göre yeniden şekillenmesini sağlayan CSS mekanizmasıdır.

* **Daily Life Analogy (Günlük Hayat Benzetmesi):** Sihirli, **akıllı bir gardırop** veya **katlanabilir seyahat bavulu** düşünün. Bavulun genişliği genişken içine kıyafetleri yan yana dizebiliyorsunuz (Masaüstü bilgisayar ekranı - 3 sütunlu yan yana kartlar).

* Bavul daralmaya başladığında (Tablet ve Telefon boyutuna geldikçe), bavul kendi kendine bir mekanizmayı tetikler: "Dikkat! Genişlik 700 pikselin altına düştü! Kıyafetleri yan yana koyarsak ezilirler, hemen hepsini üst üste (alt alta) dizin!" der. İşte o mekanizmanın devreye girdiği sınır çizgileri **Breakpoint (Kırılma Noktası)** adını alır.

Giriş metninde yer alan ders içeriğini adım adım, satır satır ele alarak tüm konuları derinlemesine inceliyoruz. İstediğiniz gibi süre bilgilerini kaldırdım, "Önizleme" yazılarını atladım ve konuları ezberden uzak, bol kod örneği ve pratik uygulamalarla destekleyerek detaylandırdım.

Dosya çok uzun olduğu için detay seviyesini en üstte tutarak ilerliyorum. Eğer bu detaylı anlatım sırasında sistem sınırlarından dolayı yanıt yarıda kalırsa, kaldığım yeri belirterek duracağım; devam etmemi istemeniz yeterli olacaktır.

---

"Öğrenecekleriniz" Paragrafının Açıklaması

Bu bootcamp eğitimi, sizi sıfırdan alıp modern bir Kıdemli JavaScript Geliştiricisi (Senior JavaScript Developer) seviyesine taşımayı hedefler. Kursun temel felsefesi sadece teorik bilgi vermek değil, meydan okumalar (challenges) ve gerçek dünya senaryoları ile kodu yaşayarak öğretmektir.

Bu paragrafta belirtilen kariyer kapıları ve teknolojiler şunlardır:

• Kariyer Rolleri: Kurs bittiğinde Web, Ön Yüz (Frontend), Arka Yüz (Backend) veya Full Stack (Hem ön yüz hem arka yüz) yazılımcı ilanlarına rahatça başvurabilecek donanıma sahip olursunuz.
• Araçlar ve Kütüphaneler: Modern web dünyasının vazgeçilmezleri olan NPM (paket yöneticisi), Webpack (modül paketleyici), Babel (kod derleyici), Node (sunucu tarafı çalışma ortamı) ve React (ön yüz kütüphanesi) gibi teknolojiler projeler üzerinden aktarılır.
• Pratik Altyapısı: Eğitimde her görevin çözümü önceden hazırlanmış Git depolarında (repositories) sunulur; böylece kodları bilgisayarınıza indirip doğrudan üzerinde çalışabilirsiniz.

---

Giriş ve Git Temelleri (PRACTICE)

PRACTICE - Launch Node.js and execute test JavaScript file

JavaScript geleneksel olarak tarayıcılarda (Chrome, Firefox vb.) çalışan bir dildir. Ancak Node.js, JavaScript'in bilgisayarımızda veya sunucularda doğrudan bir program gibi çalışmasını sağlayan bir çalışma ortamıdır (runtime environment).

Uygulama:
Bilgisayarınıza Node.js kurduktan sonra bir terminal (komut satırı) açın. index.js adında bir dosya oluşturun ve içine şu kodu yazın:

console.log("Node.js üzerinde JavaScript başarıyla çalıştı!");

Terminalden bu dosyanın olduğu klasöre gidip şu komutu çalıştırarak dosyayı terminal üzerinde yürütebilirsiniz:

node index.js

PRACTICE - Git Overview - PART 1 & PART 2

Git, yazdığınız kodların geçmişini tutan, hangi gün neyi değiştirdiğinizi kaydeden bir versiyon kontrol sistemidir. Bir hata yaptığınızda kodun eski çalışan haline geri dönmenizi sağlar.

Uygulama:
Bir klasör oluşturun ve terminalde şu komutla Git'i başlatın:

git init

Bu komut, klasörün içinde görünmez bir .git klasörü açarak projenizi takibe alır.

PRACTICE - Clone remote Git repository and switch Branches

Clone (Klonlamak): İnternette (örneğin GitHub'da) duran bir projeyi kendi bilgisayarınıza indirme işlemidir.
Branch (Dal): Projenin ana kodunu bozmadan, yan tarafta yeni bir özellik denemek için açılan güvenli çalışma alanlarıdır.

Uygulama:
GitHub üzerindeki bir projeyi bilgisayara indirmek için:

git clone https://github.com

İndirdiğiniz projenin içinde ozellik-buton adında yeni bir dala geçiş yapmak için:

git checkout -b ozellik-buton

PRACTICE - Use SourceTree for Git repositories management

SourceTree, Git komutlarını siyah terminal ekranına yazmak yerine, butonlar ve grafiksel arayüzler yardımıyla farenizi kullanarak yönetmenizi sağlayan ücretsiz bir masaüstü yazılımıdır. Kod değişikliklerini görsel olarak satır satır görmenizi kolaylaştırır.

---

JAVASCRIPT BASICS - Intro (JavaScript Temelleri - Giriş)

INTRO - JAVASCRIPT BASICS - Intro & GIT REPOSITORY FOR THIS SECTION

Bu bölümde tarayıcı ortamında JavaScript'in nasıl çalıştığı, HTML dosyalarıyla nasıl birleştiği temel seviyede anlatılmaktadır. Bölüme ait tüm başlangıç kodları özel bir Git deposunda yer alır.

PRACTICE - Exploring Web Sites in the Browser

Modern web siteleri üç ana yapıdan oluşur: HTML (iskelet), CSS (görsel tasarım) ve JavaScript (işlevsellik ve zeka). Tarayıcılar bu üç bileşeni okuyarak ekrana canlı web sayfasını yansıtır.

PRACTICE - Create first HTML file and start Live Server

Bir web projesinin giriş kapısı her zaman index.html dosyasıdır. Live Server, kod editörünüzde (örn. VS Code) yaptığınız değişiklikleri kaydettiğiniz anda tarayıcıyı otomatik olarak yenileyen yerel bir sunucu eklentisidir.

Uygulama:
Bir index.html dosyası açıp şu temel iskeleti yazın:

<!DOCTYPE html>

<html lang="tr">

<head>

<title>İlk Sayfam</title>

</head>

<body>

<h1>Merhaba Dünya!</h1>

</body>

</html>

VS Code üzerinde sağ tıklayıp "Open with Live Server" dediğinizde sayfa tarayıcınızda açılır.

PRACTICE - Add favicon to the HTML file

Favicon, tarayıcı sekmesinde web sitenizin adının hemen solunda görünen küçük logodur (simgedir).

Uygulama:
HTML dosyanızın <head> etiketleri arasına şu satırı ekleyerek klasörünüzdeki bir görseli ikon yapabilirsiniz:

<link rel="icon" type="image/x-icon" href="logo.png">

PRACTICE - JavaScript embedded into the HTML & DEMO - Git branches management

JavaScript kodlarını doğrudan HTML dosyasının içerisine yazmaya embedded (gömülü) JavaScript denir. Bu işlem <script> etiketleri arasında yapılır.

Uygulama:

<body>

<h1>Gömülü JS Testi</h1>

<script>

alert("Bu uyarı doğrudan HTML içinden geldi!");

</script>

</body>

PRACTICE - JavaScript in the separate file & CHALLENGE - External Scripts & SOLUTION

Kodların temiz ve düzenli kalması için JavaScript kodları .js uzantılı ayrı bir dosyada tutulmalı ve HTML sayfasına dışarıdan bağlanmalıdır.

Uygulama:
script.js adında bir dosya açın ve içine yazın:

console.log("Dış dosyadan bağlandım!");

Daha sonra HTML dosyanızın en altına bu dosyayı şu şekilde çağırın:

<script src="script.js"></script>

PRACTICE - JavaScript in the Console of the Browser

Tarayıcıda (örneğin Chrome) boş bir yere sağ tıklayıp "İncele" (Inspect) dedikten sonra Console sekmesine geçerek doğrudan canlı JavaScript kodları yazıp test edebilirsiniz. Burası geliştiricilerin hata ayıklama (debugging) alanıdır.

---

JAVASCRIPT BASICS - Types and Variables (Tipler ve Değişkenler)

INTRO - JAVASCRIPT BASICS - Types and Variables

JavaScript'te verilerin hafızada nasıl tutulduğu ve bu verilere nasıl isim verileceği (değişkenler) bu bölümün ana konusudur.

LECTURE - Object in JavaScript & PRACTICE - Exploring Reference Type - Object

Değişkenler tek bir değer tutarken, Nesneler (Objects) süslü parantez {} içinde anahtar-değer (key-value) çiftleri kullanarak birden fazla ilişkili veriyi bir arada tutar. Nesneler referans tiplidir.

Uygulama:

let araba = {

marka: "Togg",

model: "T10X",

yil: 2026

};

console.log(araba.marka); // Ekrana "Togg" yazar.

LECTURE - Primitive vs Reference Value Types & Exploring Primitive Value Types

JavaScript'te veriler ikiye ayrılır:

1. Primitive (İlkel) Tipler: String, Number, Boolean, null, undefined, Symbol. Hafızada değerin kendisini doğrudan tutarlar. Bir değişkene kopyalandığında değer sıfırdan kopyalanır.
2. Reference (Referans) Tipler: Objects, Arrays, Functions. Hafızada değerin kendisini değil, değerin durduğu yerin adresini (referansını) tutarlar.

Örnek ve Uygulama:

// İlkel Tip Değişimi (Birbirini etkilemez)

let sayi1 = 10;

let sayi2 = sayi1;

sayi2 = 20;

console.log(sayi1); // Hala 10'dur.

// Referans Tip Değişimi (Aynı adresi gösterdikleri için birbirlerini etkilerler!)

let dizi1 = [1, 2, 3];

let dizi2 = dizi1;

dizi2.push(4);

console.log(dizi1); // [1, 2, 3, 4] olur! Çünkü dizi2 ile dizi1 aynı kutuya bakar.

LECTURE - Variable declaration using "var", "let" and "const" & PRACTICE - Variable declaration and assignment

• var: Eski JavaScript'ten kalmadır. Fonksiyon kapsamlıdır (function-scoped) ve aynı isimle tekrar tanımlanabilir, bu da büyük hatalara yol açar.
• let: Modern JavaScript ile gelmiştir. Blok kapsamlıdır (block-scoped). Değeri sonradan değiştirilebilir.
• const: "Constant" yani sabit kelimesinden gelir. Tanımlandığı an değer atanmalıdır ve bu değer sonradan değiştirilemez.

Uygulama:

let yas = 25;

yas = 26; // Geçerli, yaş değişebilir.

const dogumYili = 2000;

// dogumYili = 2001; // HATA! Sabit değer değiştirilemez.

CHALLENGE - Variable Declaration and Assignment & Variables Reusage

Bu meydan okumalarda öğrencilerden belirli senaryolara göre let ve const kullanarak doğru değişkenleri seçmesi ve verileri kod içinde tekrar güvenli bir şekilde kullanması istenir.

LECTURE - Statically vs Dynamically typed Languages & Dynamic typing in JavaScript

• Statically Typed (Statik Tipli): Java veya C++ gibi dillerde bir değişkenin türü (sayı mı, yazı mı) baştan sıkı sıkıya belirtilir ve değiştirilemez.
• Dynamically Typed (Dinamik Tipli): JavaScript dinamiktir. Bir değişkene önce sayı, sonra aynı değişkene yazı atayabilirsiniz.

Uygulama:

let veri = 45; // Şu an bir Number (Sayı)

veri = "Ahmet"; // Artık bir String (Yazı). JavaScript buna izin verir.

console.log(typeof veri); // Ekrana "string" yazar.

---

JAVASCRIPT BASICS - Objects (Nesneler)

LECTURE - Variety of Objects in JavaScript & Objects Modification

JavaScript'te diziler ve fonksiyonlar da aslında perde arkasında birer nesnedir. Nesnelerin içindeki değerler dinamik olarak eklenebilir, silinebilir veya güncellenebilir.

Uygulama:

let kullanici = { isim: "Can" };

kullanici.yas = 30; // Yeni özellik ekleme

kullanici.isim = "Can Berk"; // Güncelleme

delete kullanici.yas; // Özellik silme

console.log(kullanici); // { isim: "Can Berk" }

PRACTICE and CHALLENGES - Objects - PART 1, 2, 3

Nesne oluşturma, iç içe nesnelerle (nested objects) çalışma ve nesne verilerini manipüle etmeye yönelik aşamalı pratik görevleri içerir.

LECTURE - Global Objects - "window" and "global"

JavaScript'in çalıştığı ortama göre en tepede bir ana nesne bulunur.

• Tarayıcı ortamında en tepedeki nesne window nesnesidir. Açık olan sekmeyi, ekran boyutunu vb. her şeyi yönetir.
• Node.js ortamında ise tarayıcı olmadığı için en tepedeki nesne global adını alır.

LECTURE - Methods of the Object

Bir nesnenin içerisine kaydedilen fonksiyonlara Metot (Method) denir. Nesnenin ne gibi yetenekleri olduğunu gösterir.

Uygulama:

let kopek = {

ad: "Karabaş",

havla: function() {

console.log("Hav hav!");

}

};

kopek.havla(); // Nesne metodunu çalıştırma

---

JAVASCRIPT BASICS - Functions (Fonksiyonlar)

LECTURE - Introduction to the Functions & Syntax of the Function

Fonksiyonlar, belirli bir işi yapmak üzere tasarlanmış, tekrar tekrar kullanılabilen kod bloklarıdır. Girdi alabilirler (parametre) ve çıktı üretebilirler (return).

Uygulama:

function topla(sayi1, sayi2) { // parametreler

return sayi1 + sayi2; // çıktı

}

let sonuc = topla(5, 12); // argümanlar gönderiliyor

console.log(sonuc); // 17

PRACTICE & CHALLENGES - Functions - PART 1 & 2

Farklı matematiksel işlemleri fonksiyon haline getirme ve kod tekrarını önleme üzerine yapılan pratik çalışmaları kapsar.

LECTURE - Function Expressions vs Function Declarations

Fonksiyonlar iki ana yöntemle tanımlanır:

1. Function Declaration (Fonksiyon Bildirimi): Klasik yöntemdir. Kodun alt satırlarında tanımlansa bile en üstteymiş gibi çağrılabilir (Hoisting özelliği sayesinde).
2. Function Expression (Fonksiyon İfadesi): Fonksiyon bir değişkenin içerisine değer olarak atanır. Atanmadan önce çağrılamaz.

Uygulama:

// Function Declaration

function merhaba() { return "Selam"; }

// Function Expression

const selamVer = function() { return "Merhaba"; };

PRACTICE - Function Expressions, setTimeout(), setInterval()

• setTimeout: Belirli bir milisaniye süre geçtikten sonra bir fonksiyonu bir kez çalıştırır.
• setInterval: Belirli zaman aralıklarıyla bir fonksiyonu durmadan sürekli çalıştırır.

Uygulama:

// 3 saniye sonra bir kere çalışır

setTimeout(function() {

console.log("3 saniye doldu!");

}, 3000);

// Her 2 saniyede bir çalışır

setInterval(function() {

console.log("2 saniye geçti...");

}, 2000);

CHALLENGE - Function Expressions & SOLUTION

Gecikmeli işlemler veya değişken fonksiyon yapıları kullanarak asenkron (zamana yayılan) mantığı kavramaya yönelik bir görevdir.

---

JAVASCRIPT BASICS - Operators (Operatörler)

LECTURE - Operands, Unary vs Binary Operators and Notations

• Operand (İşlenen): İşleme giren değerlerdir. 5 + 3 ifadesinde 5 ve 3 birer operanddır.
• Unary (Tekli) Operator: Tek bir değer üzerinde işlem yapar. Örn: i++ (artırma) veya !true (değili).
• Binary (İkili) Operator: İki değer arasında işlem yapar. Örn: a + b.

PRACTICE - Arithmetic Operators - PART 1 & 2

Matematiksel işlemleri kapsar: Toplama (+), Çıkarma (-), Çarpma (*), Bölme (/), Mod Alma-Kalan bulma (%) ve Üs Alma (**).

Uygulama:

console.log(10 % 3); // 10'un 3'e bölümünden kalan 1'dir.

console.log(2 ** 3); // 2 üssü 3 = 8'dir.

PRACTICE - Comparison Operators - PART 1 & 2

Değerleri karşılaştırarak true (doğru) veya false (yanlış) üretir.

• == (Gevşek eşitlik): Sadece değerleri kıyaslar, tiplere bakmaz.
• === (Katı eşitlik): Hem değerlerin hem de veri tiplerinin aynı olmasını şart koşar (Güvenli olan budur).

Uygulama:

console.log(5 == "5"); // true (Çünkü ikisi de metin olarak 5 değerini temsil ediyor)

console.log(5 === "5"); // false (Çünkü biri sayı, biri yazı tipinde!)

PRACTICE - Logical Operators - PART 1 & 2

Birden fazla şartı birleştirmek için kullanılır.

• && (VE - AND): Tüm şartların doğru olması gerekir.
• || (VEYA - OR): Şartlardan sadece birinin doğru olması yeterlidir.
• ! (DEĞİL - NOT): Doğruyu yanlışa, yanlışı doğruya çevirir.

Uygulama:

let egitimBitti = true;

let sertifikaAlindi = false;

console.log(egitimBitti && sertifikaAlindi); // false (ikisi de true değil)

console.log(egitimBitti || sertifikaAlindi); // true (en az biri true)

PRACTICE - Operators Precedence and Associativity & CHALLENGES

Matematikteki işlem önceliği (örneğin çarpmanın toplamadan önce yapılması) JavaScript operatörlerinde de geçerlidir. Bu derslerde parantezlerin önemi ve işlem sırası kuralları öğretilir.

---

JAVASCRIPT BASICS - Expressions vs Statements (İfadeler ve İfadeler Arasındaki Farklar)

LECTURE & PRACTICE - Expressions vs Statements

• Expression (İfade): Geriye tek bir değer döndüren her türlü kod parçasıdır. 5 + 5, "Merhaba", topla(3,4) birer ifadedir.
• Statement (Deyim/Komut): Bir eylem gerçekleştiren ancak doğrudan bir değer üretmeyen tam bir kod satırıdır. Değişken tanımlamaları veya döngüler buna örnektir.

Örnek:

let x; // Bu bir Statement'tır (Komut veriyoruz).

x = 10 + 5; // Burada "10 + 5" kısmı bir Expression'dır (Çünkü geriye 15 değerini verir).

---

JAVASCRIPT BASICS - Scopes (Kapsamlar)

LECTURE - Scopes - PART 1 & 2

Scope (Kapsam), tanımladığınız bir değişkene kodun hangi bölgelerinden ulaşıp ulaşılamayacağını belirleyen sınır çizgileridir.

• Global Scope: Her yerden erişilebilen en dış alan.
• Function Scope: Sadece o fonksiyonun içinden erişilebilen alan.
• Block Scope: Sadece {} süslü parantezleri (if blokları, for döngüleri gibi) içinden erişilebilen alan (let ve const ile sağlanır).

Uygulama:

let globalVeri = "Ben her yerdeyim";

function test() {

let lokalVeri = "Sadece buradayım";

console.log(globalVeri); // Çalışır.

}

test();

// console.log(lokalVeri); // HATA! Fonksiyon dışından erişilemez.

LECTURE - Undeclared Variables and "use strict"

Eğer bir değişkeni let, const veya var yazmadan doğrudan tanımlarsanız, JavaScript onu otomatik olarak global yapar ve bu büyük bir karmaşaya sebep olur. "use strict" (katı mod) ifadesi sayfanın en üstüne yazılarak JavaScript'in bu tarz hatalı ve gevşek yazımları yasaklamasını ve hata fırlatmasını sağlar.

---

JAVASCRIPT BASICS - Arrays (Diziler)

LECTURE - Arrays & Array Methods & PRACTICE

Dizi (Array), köşeli parantez [] içinde sıralı şekilde tutulan veri listeleridir. İlk eleman her zaman 0. indeksten başlar.

Uygulama:

let meyveler = ["Elma", "Muz", "Çilek"];

meyveler.push("Karpuz"); // Sona yeni eleman ekler

meyveler.pop(); // Sondaki elemanı siler

console.log(meyveler[0]); // "Elma" yazar.

---

JAVASCRIPT BASICS - Loops and Conditional Statements (Döngüler ve Koşullu İfadeler)

LECTURE - "for", "while", "do while" Loops & PRACTICE

Döngüler, belirli bir kod bloğunun istenen şart sağlandığı sürece üst üste tekrar çalışmasını sağlar.

• for: Genelde kaç kere döneceği önceden belli olan durumlarda tercih edilir.
• while: Şart doğru olduğu sürece dönmeye devam eder.
• do while: Şart doğru olmasa bile kodu en az bir kez çalıştırır, sonra şartı kontrol eder.

Uygulama:

// 0'dan 2'ye kadar yazdırma (For)

for (let i = 0; i < 3; i++) {

console.log("For sayısı: " + i);

}

// Aynı işlemin While ile yapılması

let k = 0;

while (k < 3) {

console.log("While sayısı: " + k);

k++;

}

LECTURE - "for in" and "for of" Loops

• for in: Bir nesnenin (object) içindeki anahtarları (özellik isimlerini) dönmek için kullanılır.
• for of: Bir dizinin (array) içindeki doğrudan elemanları sırayla dönmek için kullanılır.

Uygulama:

let renkler = ["Kırmızı", "Mavi"];

for (let renk of renkler) {

console.log(renk); // "Kırmızı", "Mavi" yazar.

}

LECTURE - Conditional Statements - if, if else and switch & Ternary Operator

Koşullu ifadeler kodun yol ayrımlarıdır. Belirli bir şarta göre farklı kodların çalışmasını tetikler. Ternary Operator, if else yapısının tek satırda yazılabilen pratik halidir.

Uygulama:

let not = 75;

// Klasik If Else

if (not >= 50) {

console.log("Geçti");

} else {

console.log("Kaldı");

}

// Ternary Operator ile tek satırda yapılışı:

// Şart ? Doğruysa Yapılacak : Yanlışsa Yapılacak

let durum = (not >= 50) ? "Başarılı" : "Başarısız";

console.log(durum);

---

JAVASCRIPT BASICS - Advanced Topics (İleri Düzey Konular)

PRACTICE - Mutable vs Immutable Values

• Mutable (Değiştirilebilir): Nesneler ve diziler gibi referans tiplerin içerisindeki veriler, hafızadaki adresleri bozulmadan güncellenebilir.
• Immutable (Değiştirilemez): Yazılar (string) ve sayılar (number) ilkel tiplerdir. Bir string'in sadece tek bir harfini sonradan kodla değiştiremezsiniz, hafızada tamamen yeni bir string oluşur.

PRACTICE - "typeof" and "instanceof" Operators

• typeof: Bir değişkenin hangi ilkel türde (string, number, boolean vb.) olduğunu söyler.
• instanceof: Bir nesnenin hangi sınıftan veya prototipten türetildiğini (kimlik kontrolü) anlamamızı sağlar.

PRACTICE - "new Array", "new String", "new Object", "new Function"

JavaScript'te verileri düz metin veya parantezlerle açabileceğimiz gibi, new anahtar kelimesini ve kurucu fonksiyonları (constructors) kullanarak nesne formatında da oluşturabiliriz. Ancak performans ve sadelik açısından zorunlu olmadıkça tercih edilmezler.

PRACTICE - Execution contexts and Execution contexts stack

JavaScript motorunun (V8 gibi) kodu çalıştırmaya başladığında kurduğu çalışma ortamına Execution Context denir. İlk başta bir küresel (Global) ortam kurulur, çağrılan her fonksiyon için de üst üste yeni çalışma kutuları eklenir. Bu üst üste yığılma yapısına Call Stack (Çağrı Yığını) denir. Fonksiyon bittikçe yığından düşer.

PRACTICE - "this"

this kelimesi JavaScript'in en dinamik yapılarından biridir. "Şu an bu kodu çalıştıran sahip nesne kim?" sorusunun cevabıdır. Bulunduğu yere, fonksiyonun nasıl çağrıldığına göre sürekli değişir. Bir nesne metodunun içinde kullanıldığında o nesneyi işaret eder.

PRACTICE - "call", "apply" methods of the Function & "bind" method

Bu metotlar, bir fonksiyonun içindeki this anahtar kelimesinin neyi göstereceğini bizim dışarıdan elle (manuel olarak) belirlememizi sağlar.

• call: Fonksiyonu hemen çalıştırır, parametreleri virgülle alır.
• apply: Fonksiyonu hemen çalıştırır, parametreleri bir dizi [] halinde alır.
• bind: Fonksiyonu hemen çalıştırmaz. İçindeki this değerini sabitleyerek bize yeni bir fonksiyon kopyası verir, onu sonra çalıştırırız.

Uygulama:

function kendiniTanit() {

console.log("Merhaba, ben " + this.isim);

}

let kisi = { isim: "Zeynep" };

// kendiniTanit fonksiyonunu "kisi" nesnesine bağlayarak hemen çalıştırıyoruz

kendiniTanit.call(kisi); // "Merhaba, ben Zeynep" yazar.

PRACTICE - "pass by value" vs "pass by reference"

• Pass by value (Değer ile aktarım): İlkel tipler fonksiyona gönderildiğinde değerin bir kopyası gider. Orijinal değişken fonksiyon içindeki değişimden etkilenmez.
• Pass by reference (Referans ile aktarım): Nesneler fonksiyona gönderildiğinde adres bilgisi gider. Fonksiyon içinde nesneye yapılan müdahale dışarıdaki orijinal nesneyi de değiştirir.

PRACTICE - IIFE - Immediately Invoked Function Expression

Tanımlandığı an otomatik olarak hemen çalışan fonksiyonlardır. Küresel isim alanını (global scope) kirletmemek ve değişkenleri dış dünyadan gizlemek için korunaklı bir kapsül oluştururlar.

Uygulama:

(function() {

let gizliSifre = "123456";

console.log("IIFE anında çalıştı!");

})();

// Dışarıdan gizliSifre değişkenine ulaşılamaz, güvendedir.

PRACTICE - Synchronous Code Execution & Events and Events queue

JavaScript tek iş parçacıklı (single-threaded) bir dildir; yani aynı anda sadece tek bir satır kod çalıştırabilir (Synchronous).

Ancak bir butona tıklanması, internetten veri indirilmesi gibi zaman alan işlemler arka plandaki tarayıcı API'lerine devredilir. Bu işlemler bittiğinde tetiklenen callback'ler sırayla Event Queue (Olay Kuyruğu) alanına dizilir. Ana kodların çalışması tamamen bittiğinde kuyruktaki bu olaylar sırayla devreye girer.

PRACTICE - Callbacks - PART 1 & 2

Bir fonksiyona parametre olarak gönderilen ve işlerin sırayla yapılmasını garanti altına almak için o fonksiyonun içinde en son satırda yürütülen fonksiyonlara Callback (Geri Çağırım Fonksiyonu) denir.

Uygulama:

let verileriGetir = function(callback) {

console.log("1. Veriler internetten çekiliyor...");

// İşlem bittiğinde callback tetiklenir

callback();

};

verileriGetir(function() {

console.log("2. Veriler başarıyla geldi, ekrana basılıyor.");

});

PRACTICE - Closures

Bir fonksiyonun, kendisini saran dış fonksiyonun kapsamındaki (scope) değişkenleri, dış fonksiyon çalışmasını bitirip hafızadan silindikten sonra bile hatırlamaya devam etmesi durumudur. JavaScript'in en güçlü mimari özelliklerindendir.

Uygulama:

function sayiciOlustur() {

let sayac = 0; // Dış değişken

return function() {

sayac++; // Dış değişkeni hatırlıyor ve güncelliyor

return sayac;

};

}

const say = sayiciOlustur();

console.log(say()); // 1

console.log(say()); // 2 (Hala sayac değişkenini hafızada canlı tutuyor!)

---

ES6 Variables Lifecycles (ES6 Değişken Yaşam Döngüleri)

LECTURE - Scopes - Global, Function and Block & let & const & Guidelines

ES6 (2015) yılındaki büyük güncelleme ile gelen let ve const, eski var kelimesinin açıklarını kapatmıştır. Bu derslerde temiz bir kod için her zaman const kullanılması, eğer değer değişecekse let tercih edilmesi ve var kelimesinden tamamen uzak durulması gerektiği kurallarla aktarılır.

LECTURE - JavaScript Engine Phases & Variable Lifecycle Phases

JavaScript motoru bir kodu çalıştırmadan önce iki aşamadan geçer:

1. Creation Phase (Oluşturma Aşaması): Kod satır satır taranır, değişkenler ve fonksiyonlar tespit edilip hafızada yer ayrılır.
2. Execution Phase (Çalıştırma Aşaması): Kodlar yukarıdan aşağıya gerçek zamanlı yürütülür ve değerler değişkenlere atanır.

Bir değişkenin yaşam döngüsü ise 3 aşamadan oluşur: Declaration (Bildirim), Initialization (İlk Değer Atama/Hafızada Başlatma) ve Assignment (Değer Atama).

LECTURE - Var, Let, Const and Undeclared Lifecycles & What is finally hoisting?

• var lifecycle: Oluşturma aşamasında hem bildirilir hem de hafızada otomatik olarak undefined değeriyle başlatılır. Bu yüzden kodda tanımlanmadan önce bile çağrılsa hata vermez, undefined döner. Buna Hoisting (Yukarı Çekme) denir.
• let ve const lifecycle: Oluşturma aşamasında bildirilirler ancak hafızada başlatılmazlar (uninitialized kalırlar). Kod satırı gelene kadar bu değişkenlere erişmek yasaktır. Bu yasaklı bölgeye Temporal Dead Zone (Geçici Ölü Bölge - TDZ) denir. Tanımlanmadan önce çağrılırlarsa sistem hata fırlatır.

Uygulama:

console.log(a); // undefined döner (var hoisting nedeniyle)

var a = 5;

// console.log(b); // HATA verir! (let TDZ içindedir, güvenlidir)

let b = 10;

---

Harika! Kaldığımız yerden, dosyadaki tüm konu başlıklarını satır satır ele almaya ve hiçbir ayrıntıyı atlamadan bol kod örneği ve uygulamalarla açıklamaya devam ediyoruz.

---

ES6 Arrow Functions (Ok Fonksiyonları)

LECTURE - Traditional JavaScript Functions Overview & Introduction to the Arrow Functions

Geleneksel JavaScript fonksiyonları function anahtar kelimesi kullanılarak yazılır. Arrow Functions (Ok Fonksiyonları) ise ES6 ile gelen, fonksiyonları çok daha kısa, temiz ve okunabilir yazmamızı sağlayan yeni bir söz dizimidir (syntax).

LECTURE - Arrow Functions syntax & PRACTICE - Arrow Functions

Ok fonksiyonlarında function kelimesi tamamen kaldırılır. Parametrelerden sonra bir eşittir ve büyüktür işareti => (ok işareti) konularak fonksiyon gövdesi açılır.

Uygulama ve Örnekler:

// 1. Geleneksel Yöntem (Function Expression)

const karesiGeleneksel = function(x) {

return x * x;

};

// 2. Modern Yöntem (Arrow Function)

const karesiModern = (x) => {

return x * x;

};

// 3. Süper Kısa Yöntem (Eğer tek parametre ve tek satır dönüş varsa parantezler de kalkar)

const karesiKisa = x => x * x;

console.log(karesiKisa(5)); // Ekrana 25 yazar.

LECTURE - Arrow Functions and "this" & Regular functions instead of Arrow Functions

Geleneksel fonksiyonlar ile ok fonksiyonları arasındaki en kritik fark this kelimesinin davranışıdır.

• Geleneksel Fonksiyonlar: Kendilerine ait bir this bağlamına (context) sahiptir. Fonksiyon nerede çağrılırsa this orayı gösterir.
• Arrow Functions: Kendilerine ait bir this bağlamı yoktur. İçinde bulundukları dış ortamın (lexical scope) this değerini aynen miras alırlar.

Uygulama:
Bir nesne içinde zamanlayıcı kullanırken bu fark çok net görülür:

let kullanici = {

isim: "Hasan",

GelenekselSelam: function() {

setTimeout(function() {

// Buradaki geleneksel fonksiyon kendi 'this'ini arar ve bulamazsa window/global nesnesine bakar.

console.log("Merhaba " + this.isim);

}, 1000);

},

ModernSelam: function() {

setTimeout(() => {

// Ok fonksiyonu kendi 'this'ini oluşturmaz, dışarıdaki 'kullanici' nesnesinin 'this'ini kullanır!

console.log("Merhaba " + this.isim);

}, 1000);

}

};

kullanici.GelenekselSelam(); // 1 saniye sonra: "Merhaba undefined" yazar.

kullanici.ModernSelam(); // 1 saniye sonra: "Merhaba Hasan" yazar.

Kural: Eğer nesne metotları yazıyorsanız veya this bağlamının dinamik değişmesini istiyorsanız geleneksel fonksiyonları; fonksiyon içindeki iç içe yapılarda dışarıdaki this değerini kaybetmek istemiyorsanız ok fonksiyonlarını tercih etmelisiniz.

LECTURE - Arguments in the Functions & Arrow Functions Summary

Geleneksel fonksiyonların içinde, gönderilen tüm parametreleri otomatik olarak tutan arguments adında gizli bir dizi benzeri yapı bulunur. Ok fonksiyonlarında bu arguments nesnesi de bulunmaz. Onun yerine ilerleyen bölümlerde göreceğimiz Rest parametreleri kullanılır.

---

ES5.1 Array Helper Methods (Dizi Yardımcı Metotları)

Bu bölüm, geleneksel for döngüleri yazmak yerine, diziler üzerinde çok daha hızlı, hatasız ve anlaşılır işlemler yapmamızı sağlayan fonksiyonel metotları kapsar.

LECTURE - forEach() Overview & PRACTICE & CHALLENGE 3-1 & SOLUTION

forEach, bir dizinin tüm elemanları üzerinde sırayla tek tek dönmek (iterasyon yapmak) için kullanılır. Klasik for döngüsünün daha temiz yazılmış halidir. Geriye hiçbir şey döndürmez (undefined).

Uygulama:

let arabalar = ["Togg", "Tesla", "BMW"];

// Her elemanı ve indeks numarasını ekrana yazdıralım

arabalar.forEach((araba, indeks) => {

console.log(`${indeks}: ${araba}`);

});

LECTURE - map() Overview & PRACTICE & CHALLENGE 3-2 & SOLUTION

map, orijinal dizideki her bir elemanı alıp belirli bir işlemden geçirdikten sonra, tamamen yeni ve aynı uzunlukta başka bir dizi üretmek için kullanılır. Orijinal diziyi asla bozmaz.

Uygulama:
Fiyatların olduğu bir diziye %20 vergi ekleyerek yeni bir dizi oluşturalım:

let hamFiyatlar =;

let vergiliFiyatlar = hamFiyatlar.map(fiyat => fiyat * 1.20);

console.log(vergiliFiyatlar); // [120, 240, 360]

console.log(hamFiyatlar); // [100, 200, 300] (Orijinal dizi korundu)

LECTURE - filter() Overview & PRACTICE

filter, dizideki elemanlardan sadece bizim belirlediğimiz bir şarta uyanları (şartı true döndürenleri) seçerek yeni, daha kısa bir dizi oluşturur.

Uygulama:

let sayilar =;

// 10'dan büyük olan sayıları filtreleyelim

let buyukSayilar = sayilar.filter(sayi => sayi > 10);

console.log(buyukSayilar); // [12, 130, 44]

LECTURE - find() Overview & PRACTICE & CHALLENGE 3-3 & SOLUTION

find, dizide aradığımız şarta uyan ilk elemanı bulduğu anda aramayı durdurur ve o elemanın kendisini döndürür. Eğer hiçbir şey bulamazsa undefined verir.

Uygulama:

let ogrenciler = [

{ id: 1, ad: "Ali" },

{ id: 2, ad: "Ayşe" },

{ id: 3, ad: "Fatma" }

];

let bulunanOgrenci = ogrenciler.find(ogrenci => ogrenci.id === 2);

console.log(bulunanOgrenci.ad); // "Ayşe"

LECTURE - every() and some() Overview & PRACTICE & CHALLENGE 3-4, 3-5 & SOLUTION

• every(): Dizideki tüm elemanların verilen şarta uymasını bekler. Tek bir eleman bile şarta uymazsa false döndürür.
• some(): Dizideki en az bir elemanın şarta uymasını yeterli görür. Bir tane uyan bulursa true döndürür.

Uygulama:

let yaslar =;

let herkesResmiEriskin Mi = yaslar.every(yas => yas >= 18); // false (Çünkü 15 var)

let enAzBiriYetiskinMi = yaslar.some(yas => yas >= 18); // true (Çünkü 18, 22 ve 30 var)

LECTURE - includes() Overview & PRACTICE & CHALLENGE 3-6, 3-7, 3-8 & SOLUTION

includes, bir dizinin içinde belirli bir elemanın var olup olmadığını kontrol eder. Sonuç olarak doğrudan true ya da false verir.

Uygulama:

let AlisverisListesi = ["Süt", "Ekmek", "Yumurta"];

console.log(AlisverisListesi.includes("Ekmek")); // true

LECTURE - reduce() Overview & PRACTICE & CHALLENGE 3-9, 3-10 & SOLUTION

reduce, bir dizideki tüm elemanları tek tek işleyerek sonuçta tek bir değer (bir sayı, bir yazı, bir nesne veya bambaşka bir dizi) üretmemizi sağlar. İçine bir toplayıcı (accumulator) ve başlangıç değeri alır.

Uygulama:
Bir sepetteki ürünlerin toplam fiyatını hesaplayalım (Başlangıç değerini 0 veriyoruz):

let sepet =;

let toplamTutar = sepet.reduce((toplayici, anlikFiyat) => {

return toplayici + anlikFiyat;

}, 0);

console.log(toplamTutar); // 100

LECTURE - sort() - Algorithms, Stable vs Unstable, Browsers Implementation & CHALLENGE 3-11, 3-12 & SUMMARY

sort, diziyi sıralamak için kullanılır. Varsayılan olarak elemanları metne (string) çevirip alfabetik sıraya göre dizer. Bu yüzden sayıları sıralarken 10 sayısı 2den önce gelebilir (çünkü 1 ile başlar). Doğru bir sayı sıralaması veya nesne sıralaması için içine bir karşılaştırma fonksiyonu (compare function) yazılması şarttır.

Uygulama:

let karisikSayilar =;

// Küçükten büyüğe sıralama algoritması

karisikSayilar.sort((a, b) => a - b);

console.log(karisikSayilar); // [1, 5, 25, 40, 100]

---

ES6 Template Literals (Şablon Dizileri)

LECTURE - Template Literals Overview & CHALLENGE 4-1 & SOLUTION

Eski JavaScript'te metinleri ve değişkenleri birleştirmek için sürekli artı + işareti ve tırnaklar kullanılırdı. Template Literals, ters tırnaklar (backtick) ` kullanarak metin yazmamızı sağlar. Değişkenleri ve javascript ifadelerini doğrudan metnin içine ${değişken} şeklinde yerleştirebiliriz. Satır atlamalarını otomatik tanır.

Uygulama:

let ad = "Kaan";

let meslek = "Yazılımcı";

// Eski Yöntem:

console.log("Benim adım " + ad + " ve ben bir " + meslek + "yim.");

// Yeni Modern Yöntem:

console.log(`Benim adım ${ad} ve ben bir ${meslek}yim.`);

LECTURE - Tagged Templates Overview & CHALLENGE 4-2 & SOLUTION

Bir fonksiyonu, bir şablon dizisinin başına yazarak çalıştırma yöntemidir. Şablon içindeki metinler parçalanarak fonksiyona dizi halinde gider, değişkenler ise ayrı parametreler olarak aktarılır. Bu yöntem güvenlik filtrelemelerinde (XSS engelleme) veya çoklu dil (çeviri) sistemlerinde kullanılır.

---

ES6 Rest/Spread Operators and Default Function Parameters (Kalan/Yayma Operatörleri ve Varsayılan Fonksiyon Parametreleri)

LECTURE - Rest Parameters Overview & PRACTICE - Rest Parameters

Rest (Kalan) Parametresi, bir fonksiyona sınır konulmadan gönderilen çok sayıda argümanı, fonksiyon içinde tek bir isim altında düzenli bir diziye dönüştürerek yakalamamızı sağlar. Üç nokta ... ile tanımlanır.

Uygulama:
Kaç sayı gönderileceği belli olmayan bir toplama fonksiyonu yapalım:

function hepsiniTopla(...sayilar) {

// 'sayilar' artık gerçek bir dizidir!

return sayilar.reduce((toplam, s) => toplam + s, 0);

}

console.log(hepsiniTopla(5, 10, 15, 20)); // 50

LECTURE - Spread Operator Overview & PRACTICE - Spread Operator & CHALLENGE 5-1 & SOLUTION

Spread (Yayma) Operatörü de üç nokta ... ile yazılır ancak görevi Rest'in tam tersidir. Bir dizinin veya nesnenin içindeki tüm elemanları dışarıya tek tek fırlatarak açar (yayar). Dizileri kopyalamakta veya birleştirmekte çok işe yarar.

Uygulama:

let dizi1 =;

let dizi2 =;

// İki diziyi birleştirip ortasına yeni eleman ekleyelim

let birlesikDizi = [...dizi1, 99, ...dizi2];

console.log(birlesikDizi); // [1, 2, 3, 99, 4, 5, 6]

LECTURE - Default Function Parameters Overview & PRACTICE & CHALLENGE 5-2, 5-3 & SOLUTION

Fonksiyonlara parametre gönderilmediğinde veya undefined gönderildiğinde sistemin hata vermemesi için parametrelere varsayılan (default) değerler atanabilir.

Uygulama:

function kullaniciKarsila(isim = "Ziyaretçi") {

console.log(`Hoş geldin, ${isim}!`);

}

kullaniciKarsila("Metin"); // "Hoş geldin, Metin!"

kullaniciKarsila(); // "Hoş geldin, Ziyaretçi!" (Varsayılan değer devreye girdi)

---

ES6 Enhanced Object Literals (Geliştirilmiş Nesne Özellikleri)

LECTURE - Enhanced Object Literals Overview & PRACTICE & CHALLENGE 6-1 & SOLUTION

Nesne tanımlamayı daha hızlı hale getiren kolaylıklardır.

1. Eğer nesneye eklenecek anahtar (key) ismi ile değerin (value) geldiği değişken ismi aynıysa, tek bir kez yazmak yeterlidir.
2. Nesne içine fonksiyon (metot) yazarken artık : function kelimesini yazmaya gerek yoktur.

Uygulama:

let ad = "Ece";

let yas = 24;

let kisi = {

ad, // ad: ad yazmakla aynıdır

yas,

konus() { // konus: function() {} yazmak yerine direkt kısaltma

console.log("Selam!");

}

};

---

ES6 Array and Object Destructuring (Dizi ve Nesne Parçalama)

LECTURE - Destructuring Overview & PRACTICE - Array Destructuring & CHALLENGE 6-2, 6-3 & SOLUTION

Destructuring, bir nesnenin veya dizinin içindeki verileri tek tek çekip tek satırda bağımsız değişkenlere hızlıca atama yöntemidir.

Uygulama (Dizi Parçalama):

let koordinatlar =;

// İlk iki elemanı alalım, üçüncüyü boş bırakarak atlayalım

let [x, y] = koordinatlar;

console.log(x); // 100

console.log(y); // 200

PRACTICE - Object Destructuring - PART 1 & 2 & CHALLENGE 6-4, 6-5, 6-6 & SOLUTION

Nesne parçalamada ise süslü parantezler kullanılır. Çekilmek istenen özelliğin ismi nesnedeki anahtarla tam eşleşmelidir. İstenirse yeni isim de verilebilir.

Uygulama (Nesne Parçalama):

let urun = { baslik: "Telefon", fiyat: 45000, stok: 12 };

// Fiyatı çekerken ismini 'ucret' olarak değiştirelim

let { baslik, fiyat: ucret } = urun;

console.log(baslik); // "Telefon"

console.log(ucret); // 45000

---

ES6 Classes, Prototypes and Function Constructors (Sınıflar, Prototipler ve Yapıcı Fonksiyonlar)

Bu bölüm JavaScript'in Nesne Yönelimli Programlama (OOP) temelini oluşturur.

LECTURE - Class-based vs Prototype-based & Prototype Chain & proto

• Java veya C# gibi diller gerçek sınıflara (Class-based) dayanırken, JavaScript doğası gereği prototip tabanlıdır (Prototype-based).
• JavaScript'te her nesnenin gizli bir bağlantısı (__proto__ veya [[Prototype]]) vardır. Bir nesnede aradığınız bir özellik veya metot yoksa, sistem bir üstteki prototipe bakar. Bu zincire Prototype Chain (Prototip Zinciri) denir.

PRACTICE - Function Constructors - PART 1, 2, 3, 4 & Object.create() & CHALLENGE 7-1, 7-2

ES6 sınıfları gelmeden önce, aynı şablondan yüzlerce nesne üretmek için Function Constructors (Yapıcı Fonksiyonlar) kullanılırdı. Bu fonksiyonlar new anahtar kelimesiyle çağrılır. Ortak metotlar hafıza tasarrufu sağlamak için doğrudan fonksiyonun prototipine eklenir.

Uygulama:

function Oyuncu(ad, puan) {

this.ad = ad;

this.puan = puan;

}

// Metodu prototipe ekliyoruz ki her yeni oyuncu için hafızada tekrar oluşmasın

Oyuncu.prototype.puanArtir = function() {

this.puan += 10;

};

let oyuncu1 = new Oyuncu("Kemal", 50);

oyuncu1.puanArtir();

console.log(oyuncu1.puan); // 60

LECTURE - Classes - Overview & Classes vs Function Constructors & PRACTICE

ES6 ile gelen Classes (Sınıflar) yapısı, yukarıda yaptığımız prototip işlemlerinin dışarıya daha derli toplu, modern dillerdeki gibi görünmesini sağlayan bir "makyaj" (syntactic sugar) yapısıdır. Perde arkasında yine prototipler çalışır.

Uygulama:

class OyuncuModern {

constructor(ad, puan) { // Nesne ilk oluşurken çalışan kısım

this.ad = ad;

this.puan = puan;

}

puanArtir() { // Otomatik olarak arka planda prototipe eklenir

this.puan += 10;

}

}

let oyuncu2 = new OyuncuModern("Selin", 90);

CHALLENGE 7-3, 7-4, 7-5 & LECTURE - React and ES6 Classes & CHALLENGE 7-6 & SOLUTION

Bu kısımda sınıfların extends kelimesiyle birbirinden nasıl miras (inheritance) alacağı gösterilir. Ayrıca popüler frontend kütüphanesi React'ın eski versiyonlarında kullanılan "Class Components" (Sınıf Bileşenleri) yapısının ES6 sınıflarına nasıl dayandığı ve buton ekleme gibi pratik bir React uygulaması işlenir.

---

Babel Introduction (Babel Giriş)

LECTURE - What is Compiler/Transpiler? & Compiled vs Interpreted languages

• Compiler (Derleyici): Yazılan kodu tamamen farklı bir dile (örn. C++ kodunu makine koduna) çevirir.
• Transpiler (Kaynak Tabanlı Derleyici): Yazılan kodu, yine aynı dilin farklı bir sürümüne çevirir.

LECTURE - What Babel does? & Why do we need Babel?

Babel, modern JavaScript kodlarını (ES6, ES7, ES8 vb.), eski tarayıcıların (örn. Internet Explorer veya eski Chrome sürümleri) da sorunsuz anlayabileceği eski nesil ES5 kodlarına otomatik olarak dönüştüren bir transpiler aracıdır. Bu sayede yazılımcı en modern özellikleri korkmadan kullanabilir.

Dönüşüm Örneği:
Babel bizim yazdığımız şu ok fonksiyonunu alır:

const topla = (a, b) => a + b;

Eski tarayıcılar için arka planda şu hale getirir:

var topla = function(a, b) { return a + b; };

PRACTICE - Babel in action & Compare Performance & User Agent & Plugins and Presets

Babel bilgisayara kurulduktan sonra komut satırından çalıştırılır. İçindeki Presets (Ön Ayarlar) (örn. @babel/preset-env), hangi tarayıcı sürümlerini desteklemek istediğinize bakarak kodunuzu tam gerektiği kadar geriye dönüştürür.

---

NPM - Node Package Manager (Düğüm Paketi Yöneticisi)

LECTURE - Introduction to the NPM & Package.json and init

NPM, dünya genelindeki yazılımcıların yazdığı hazır kod kütüphanelerini, paketleri (örn. tarih hesaplama araçları, grafik kütüphaneleri) projemize tek tıkla indirip entegre etmemizi sağlayan devasa bir ekosistem ve paket yöneticisidir.

Uygulama:
Bir projede NPM kullanmak için terminale şu komut yazılır:

npm init -y

Bu komut projenin kimlik kartı olan package.json dosyasını oluşturur. Projenin adı, yazarı ve kullanılan paketlerin listesi burada tutulur.

LECTURE - Semantic Versioning & Packages Installation & Dependencies

Paketlerin sürümleri Önemli.Minör.Yama (örn: 4.17.2) şeklinde tutulur. Buna Semantic Versioning (Anlamsal Sürümleme) denir.

• dependencies: Projenin çalışması için canlı yayında da zorunlu olan paketler.
• devDependencies: Sadece geliştirme yaparken bilgisayarımızda lazım olan paketler (örn. Babel veya test araçları).

Uygulama:
Projeye dışarıdan bir paket kurmak için:

npm install lodash

LECTURE - Why package-lock.json file is needed? & Lock file handle & NPM scripts

• package-lock.json: Projenin başka bir bilgisayarda da tam olarak aynı alt bağımlılık sürümleriyle, birebir aynı şekilde kurulmasını garanti altına alan kilit dosyasıdır.
• NPM Scripts: Sık kullandığımız uzun terminal komutlarını package.json içine kısa isimlerle kısayol olarak kaydetmemizi sağlar.

Uygulama (package.json içi):

"scripts": {

"baslat": "node index.js"

}

Terminalden sadece npm run baslat yazarak bu komutu tetikleyebiliriz.

---

Webpack

PRACTICE - Webpack with Zero Configuration & Webpack Dev Server

Bir web projesi büyüdükçe onlarca farklı .js, .css dosyası ve görsel ortaya çıkar. Webpack, projedeki tüm bu farklı dosyaları birbirine olan bağlarına (dependencies) göre tarayıp birleştirerek, yayına hazır hale getirilmiş birkaç tane (veya tek bir) optimize edilmiş dosya haline getiren modül paketleyicisidir (module bundler). Webpack Dev Server ise geliştirme esnasında anlık değişiklikleri tarayıcıda görmemizi sağlayan canlı bir sunucu ortamı sunar.

---

Introduction to the MongoDB (MongoDB'ye Giriş)

LECTURE - Relational vs Document Databases & MongoDB Structure

• İlişkisel Veritabanları (SQL): Verileri excel tabloları gibi yan yana satırlar ve sütunlar halinde tutar.
• Doküman Tabanlı Veritabanları (NoSQL): MongoDB gibi yapılar verileri tablo yerine, tıpkı JavaScript nesnelerine benzeyen esnek JSON/BSON dokümanları halinde tutar. Satır yerine "Document", tablo yerine "Collection" (Koleksiyon) yapıları vardır.

LECTURE - JSON, BSON Format & Extended JSON & Creation of the new Collection

MongoDB verileri arka planda performans için BSON (Binary JSON) yani ikili kodlanmış JSON formatında sıkıştırarak saklar.

PRACTICE - Insert, Find, Query Operators, Sort, Limit, Skip, Update and Delete Methods

MongoDB üzerinde veriler tamamen JavaScript komutlarına benzeyen metotlarla yönetilir (CRUD işlemleri).

Uygulama Komutları (Veritabanı İşlemleri):

// 1. Koleksiyona yeni bir ürün dökümanı ekleme

db.urunler.insertOne({ ad: "Laptop", fiyat: 30000, stok: 5 });

// 2. Fiyatı 20000'den büyük olan ürünleri bulma (gt = greater than)

db.urunler.find({ fiyat: { $gt: 20000 } });

// 3. Verileri fiyata göre sıralayıp (sort) ilk 2 tanesini getirme (limit)

db.urunler.find().sort({ fiyat: 1 }).limit(2);

// 4. İsmi "Laptop" olan ürünün stoğunu güncelleme (Update)

db.urunler.updateOne({ ad: "Laptop" }, { $set: { stok: 4 } });

// 5. Stoğu sıfır olan ürünleri silme (Delete)

db.urunler.deleteMany({ stok: 0 });

LECTURE - MongoDB Aggregation Framework & Indexes & Replica Set & Drivers

• Aggregation Framework: Çok büyük veri yığınları üzerinde boru hattı (pipeline) mantığıyla filtreleme, gruplama ve ortalama alma gibi gelişmiş analiz analiz raporları çıkarmayı sağlar.
• Indexes (İndeksler): Kitapların arkasındaki fihrist gibidir. Milyonlarca veri arasından aranan şeyin veritabanı tarafından saliseler içinde bulunmasını sağlar, performansı uçurur.
• Replica Set: Veritabanının çökme veya veri kaybı riskine karşı, verilerin arka planda birden fazla sunucuya otomatik olarak anlık yedeklenmesi (kopyalanması) sistemidir.

---

Additional JavaScript Challenges (Ek JavaScript Meydan Okumaları)

Kursun bu son devasa bölümü, yukarıda öğrenilen tüm teorik ve pratik bilgilerin CHALLENGE 1den CHALLENGE 20ye kadar küçük, orta ve ileri düzey bulmacalarla pekiştirilmesini sağlar. Yazılım setup ayarları yapıldıktan sonra öğrenciler her bir problem için önce kendileri kod yazar, ardından çözümleri izleyerek algoritma mantığını oturturlar.

• Meydan Okuma Örnek Konuları: Sayıları döngüyle toplama, Hoisting tuzaklarını çözme, Ternary operatör geçişleri, parametre kontrolleri, iç içe nesne parçalama (nested destructuring), iki değişkenin değerini üçüncü bir değişken kullanmadan birbirine takas etme (swap values), nesne elemanları üzerinde Object.keys() veya for in ile dönerek matematiksel filtrelemeler yapma gibi mülakatlarda (interview) sıkça sorulan pratik sorulardan oluşmaktadır.

---

Bu harika bir karar! Bu andan itibaren adeta birebir canlı bir kodlama kampındayız. Ders programımızdaki her bir konuyu sırayla, en ince detayına kadar ele alacağız.

İzleyeceğimiz yöntem şu olacak:

1. Konu Analizi: Maddede geçen başlığı derinlemesine inceleyeceğiz.
2. Canlı Kod Pratiği: Bilgisayarında hemen test edebileceğin, satır satır açıklamalı kodlar yazacağız.
3. Mini Proje: O konuda öğrendiklerini birleştiren, gerçek dünyadan çalışan mini bir uygulama geliştireceğiz.

Müfredatımız çok uzun ve detaylı olduğu için sindire sindire ilerleyeceğiz. İlk ana bölümümüz olan "JavaScript Giriş, Node.js ve Git Dünyası" ile canlı kampımıza hemen başlıyoruz!

---

1. BÖLÜM: JavaScript Giriş, Node.js ve Git Dünyası

Konu 1: Node.js Üzerinde JavaScript Çalıştırma (PRACTICE - Launch Node.js)

💡 Konu Analizi

JavaScript eskiden sadece internet tarayıcılarının (Chrome, Firefox gibi) içinde yaşayabilen bir dildi. Node.js, JavaScript'i tarayıcının içinden çıkarıp bilgisayarımızda doğrudan çalışan, dosya silecek, sunucu kuracak güçte bağımsız bir yazılıma dönüştüren bir çalışma ortamıdır (runtime). Yani tarayıcıya muhtaç olmadan kod yazmamızı sağlar.

💻 Canlı Kod Pratiği

Bilgisayarında bir klasör aç ve içine uygulama.js adında bir dosya oluştur. İçine şu kodları yaz:

// Bilgisayarımızın işlemci mimarisini ve işletim sistemini öğrenelim

// 'os' Node.js'in kendi içinde gelen gömülü bir modüldür.

const os = require('os');

console.log("--- NODE.JS SİSTEM KONTROLÜ ---");

console.log("İşletim Sistemi Türü: " + os.type());

console.log("Toplam Bellek (RAM): " + (os.totalmem() / 1024 / 1024 / 1024).toFixed(2) + " GB");

console.log("Boş Bellek (RAM): " + (os.freemem() / 1024 / 1024 / 1024).toFixed(2) + " GB");

Nasıl Çalıştıracaksın?
Terminali (Komut Satırını) aç, bu dosyanın olduğu klasöre gir ve şu komutu yazıp Enter'a bas:

node uygulama.js

🛠️ Mini Proje: Bilgisayar Günlüğü (Log Oluşturucu)

Bu mini projede Node.js'in dosya sistemini (fs modülü) kullanarak bilgisayarımızın durumunu anlık olarak takip eden ve bir metin dosyasına kaydeden bir sistem yazıyoruz.

gunluk.js adında bir dosya oluştur ve şu kodları yaz:

const fs = require('fs'); // Dosya işlemleri için Node.js modülü

const os = require('os');

function gunlukKaydet() {

const tarih = new Date().toLocaleString();

const bosHafiza = (os.freemem() / 1024 / 1024).toFixed(0); // MB cinsinden

// Dosyaya yazılacak metin şablonu

const logMesaji = `[${tarih}] - Sistem Durumu: ${bosHafiza} MB boş RAM kaldı.\n`;

// 'appendFile' dosya varsa sonuna ekler, yoksa dosyayı sıfırdan oluşturur.

fs.appendFile('sistem_gunlugu.txt', logMesaji, (hata) => {

if (hata) {

console.log("Günlük kaydedilirken bir hata oluştu: " + hata);

} else {

console.log("Sistem durumu başarıyla 'sistem_gunlugu.txt' dosyasına eklendi.");

}

});

}

// Projeyi çalıştır ve gör

gunlukKaydet();

Çalıştırma Komutu: node gunluk.js (Klasöründe sistem_gunlugu.txt adında yeni bir dosya belirecek).

---

Konu 2: Git ve Versiyon Kontrolü (Git Overview, Clone & Branches)

💡 Konu Analizi

Git, kodlarınızın zaman tünelidir. Projenizin her çalışan anını fotoğraflayıp (commit) kaydeder. Branch (Dal) sistemi ise, ana kodları hiç bozmadan yan tarafta güvenli bir laboratuvar açıp yeni bir özellik denemenizi sağlar. İşiniz bitince bu dalı ana dala (main/master) geri birleştirirsiniz (merge).

💻 Canlı Kod Pratiği (Terminal Komutları)

Şimdi terminal üzerinden adım adım Git dal yönetimi pratiği yapalım.

# 1. Bulunduğun klasörde Git zaman tünelini başlat

git init

# 2. Yeni bir dosya oluştur (Windows için 'echo' veya manuel oluşturabilirsin)

echo "console.log('Ana Proje');" > ana_kod.js

# 3. Bu dosyayı Git'in takip listesine (Staging Area) ekle

git add ana_kod.js

# 4. İlk fotoğrafı çek ve tarihe bir not bırak

git commit -m "İlk çalışan ana kodlar eklendi"

# 5. Şimdi ana kodu bozmadan 'yeni-buton' adında gizli bir çalışma dalı aç ve oraya geç

git checkout -b yeni-buton

# 6. Hangi dalda olduğunu kontrol et (yeni-buton yeşil yanacaktır)

git branch

🛠️ Mini Proje: Git Çatışma (Conflict) Simülasyonu

Yazılımcıların en çok korktuğu ama aslında çok basit olan "kod çatışmasını" kendi bilgisayarımızda canlandırıp çözeceğiz.

# Şu an 'yeni-buton' dalındayız. ana_kod.js dosyasını değiştirelim:

echo "console.log('Buton rengi kırmızı oldu');" > ana_kod.js

git add ana_kod.js

git commit -m "Daldaki buton rengi güncellendi"

# Şimdi ana dala geri dönelim

git checkout main

# Ana daldaki ana_kod.js dosyasını, daldan habersiz farklı şekilde değiştirelim:

echo "console.log('Buton rengi mavi oldu');" > ana_kod.js

git add ana_kod.js

git commit -m "Ana daldaki buton rengi güncellendi"

# ŞİMDİ ÇATIŞMA ZAMANI! 'yeni-buton' dalındaki değişiklikleri ana dala birleştirmeyi dene:

git merge yeni-buton

Sonuç: Terminalde CONFLICT (content): Merge conflict in ana_kod.js hatası göreceksin.
Çözüm: ana_kod.js dosyasını kod editörünle (VS Code) aç. Git'in oraya koyduğu <<<<<<<, ======= ve >>>>>>> işaretlerini göreceksin. Hangi rengi istiyorsan o satırı bırak, diğer işaretleri sil ve kaydet. Sonra sırasıyla git add ana_kod.js ve git commit -m "Çatışma çözüldü" diyerek projeyi kurtar!

---

Konu 3: Tarayıcıda JavaScript ve Canlı Sunucu (Live Server, Favicon & External Scripts)

💡 Konu Analizi

JavaScript'i tarayıcıda çalıştırmanın en doğru yolu, onu HTML sayfamıza dışarıdan bir dosya olarak bağlamaktır (<script src="..."></script>). Live Server ise biz kodda "Kaydet" (CTRL+S) yaptığımız an tarayıcıyı kendi kendine yenileyen sihirli bir yerel sunucudur.

💻 Canlı Kod Pratiği

Boş bir klasörde iki adet dosya oluşturalım: index.html ve motor.js.

index.html içeriği:

<!DOCTYPE html>

<html lang="tr">

<head>

<meta charset="UTF-8">

<title>Canlı Kamp Sayfası</title>

<!-- Favicon (Sekme Logosu) Bağlama -->

<link rel="icon" type="image/png" href="https://flaticon.com">

</head>

<body>

<h1 id="baslik">Kurs Başlığı Yükleniyor...</h1>

<button id="buton">Tıkla ve Değiştir</button>

<!-- JavaScript dosyasını HTML'in en altına bağlıyoruz -->

<script src="motor.js"></script>

</body>

</html>

motor.js içeriği:

// HTML içindeki elemanları JavaScript ile yakalayalım

const anaBaslik = document.getElementById('baslik');

const tetikButonu = document.getElementById('buton');

// Sayfa ilk açıldığında çalışacak kod

anaBaslik.textContent = "Modern JavaScript Bootcamp'ine Hoş Geldiniz!";

anaBaslik.style.color = "purple";

// Butona tıklandığında ne olacağını tanımlayalım

tetikButonu.addEventListener('click', () => {

anaBaslik.textContent = "Tebrikler! Dış JavaScript Dosyası Başarıyla Çalıştı.";

anaBaslik.style.color = "darkgreen";

console.log("Kullanıcı butona tıkladı ve arayüz güncellendi.");

});

🛠️ Mini Proje: Canlı Gece/Gündüz Modu Anahtarı

Bu mini projede, Live Server kullanarak tarayıcı üzerinde çalışan, kullanıcının tek tıkla tüm sayfanın arka planını ve yazı renklerini değiştirebileceği bir karanlık mod (dark mode) sistemi yapıyoruz.

Yukarıdaki index.html dosyasının <body> etiketinin hemen içine şu butonu ekle:

<button id="temaButon">Mod Değiştir</button>

Ardından motor.js dosyasının en altına şu kodları ekle:

const temaButonu = document.getElementById('temaButon');

// Tarayıcının hafızasında veya anlık durumunda temanın ne olduğunu tutalım

let karanlıkModAçık Mı = false;

temaButonu.addEventListener('click', () => {

// Durumu tam tersine çeviriyoruz (true ise false, false ise true)

karanlıkModAçık Mı = !karanlıkModAçık Mı;

if (karanlıkModAçık Mı) {

document.body.style.backgroundColor = "#2c3e50"; // Gece mavisi

document.body.style.color = "#ffffff"; // Beyaz yazı

temaButonu.textContent = "Gündüz Moduna Geç";

} else {

document.body.style.backgroundColor = "#ffffff"; // Beyaz arka plan

document.body.style.color = "#000000"; // Siyah yazı

temaButonu.textContent = "Karanlık Moduna Geç";

}

});

Nasıl Göreceksin? VS Code kullanıyorsan alt taraftaki "Go Live" butonuna bas veya index.html dosyasına sağ tıklayıp "Open with Live Server" de. Tarayıcıda açılan sayfada mod butonuna basarak canlı değişimi izle!

---

Harika! Enerjimiz yüksek, kodlarımız taze. Kampımızın en kritik adımlarından birine, yani JavaScript'in beyni sayılan bellek ve değişken mimarisine giriş yapıyoruz.

Sıradaki bölümlerle canlı pratiklerimize ve projelerimize tam gaz devam ediyoruz.

---

2. BÖLÜM: Veri Tipleri, Bellek Yönetimi ve Değişkenlerin Perde Arkası

Konu 4: İlkel (Primitive) ve Referans (Reference) Tiplerin Bellek Davranışı

💡 Konu Analizi

JavaScript'te veriler bellekte (RAM) iki farklı bölgede saklanır: Stack ve Heap.

• Primitive (İlkel) Tipler (String, Number, Boolean, null, undefined): Hafif verilerdir. Doğrudan Stack bilgisinde, değerin kendisiyle saklanır. Bir değişkeni diğerine eşitlediğinizde değerin tamamen bağımsız bir kopyası çıkartılır.
• Reference (Referans) Tipler (Object, Array, Function): Ağır ve dinamik verilerdir. Gerçek veri Heap bölgesinde büyük bir kutuda saklanır. Stack bölgesinde ise sadece o kutunun adres kartı (referansı) durur. Bir nesneyi diğerine eşitlediğinizde değeri değil, sadece bu adres kartını kopyalarsınız. Bu yüzden iki değişken de aynı kutuyu göstermeye başlar!

💻 Canlı Kod Pratiği

Boş bir .js dosyası aç ve bellekteki bu tehlikeli değişimi gözlerinle gör:

console.log("--- 1. İLKEL (PRIMITIVE) MASUM KOPYALAMA ---");

let orijinalIsim = "Ahmet";

let yedekIsim = orijinalIsim; // Değer kopyalandı

yedekIsim = "Mehmet"; // Yedek değişti

console.log("Orijinal İsim:", orijinalIsim); // "Ahmet" (Etkilenmedi!)

console.log("Yedek İsim:", yedekIsim); // "Mehmet"

console.log("\n--- 2. REFERANS (REFERENCE) TEHLİKELİ KOPYALAMA ---");

let orijinalHesap = { isim: "Can", bakiye: 5000 };

let ortakHesap = orijinalHesap; // Adres kopyalandı! İkisi de aynı kutuya bakıyor.

ortakHesap.bakiye = 2500; // Ortak hesaptan para çekildi

console.log("Orijinal Hesap Bakiyesi:", orijinalHesap.bakiye); // 2500! (Orijinal hesap da patladı!)

console.log("Ortak Hesap Bakiyesi:", ortakHesap.bakiye); // 2500

🛠️ Mini Proje: Güvenli Nesne Kopyalayıcı (Deep Copy vs Shallow Copy)

Gerçek projelerde yukarıdaki referans hatasına düşmemek için nesneleri "bağlantıyı kopararak" kopyalamamız gerekir. Bu projede, Spread (...) operatörü kullanarak güvenli bir kopyalama simülasyonu yazıyoruz.

güvenli_kopyalama.js adında bir dosya oluştur:

// Orijinal korumak istediğimiz veri

const fabrikaAyarlari = {

tema: "Açık",

dil: "Türkçe",

cozunurluk: "1080p"

};

// YANLIŞ YÖNTEM: let kullaniciAyarlari = fabrikaAyarlari; -> Bağlantıyı koparmaz!

// DOĞRU YÖNTEM: Spread (...) ile yeni bir nesne kutusu açıp içini dolduruyoruz

const kullaniciAyarlari = { ...fabrikaAyarlari };

// Kullanıcı ayarlarını değiştirelim

kullaniciAyarlari.tema = "Karanlık";

kullaniciAyarlari.dil = "İngilizce";

console.log("--- SİSTEM KONTROLÜ ---");

console.log("Fabrika Ayarları (Orijinal kalmalı):", fabrikaAyarlari.tema); // "Açık"

console.log("Kullanıcı Ayarları (Değişebilmeli):", kullaniciAyarlari.tema); // "Karanlık"

---

Konu 5: let, const, var Farkları ve Dinamik Tipler (Statically vs Dynamically Typed)

💡 Konu Analizi

• var: JavaScript'in eski ve tehlikeli yoludur. Aynı isimle tekrar tanımlanabilir, hata vermez. Blok sınır tanımaz (if veya for içinden dışarı sızar).
• let ve const: Modern koruyuculardır. Sadece tanımlandıkları süslü parantez {} içinde yaşarlar. const sabitler içindir, ilk atamadan sonra değiştirilemez.
• Dinamik Tipli Dil: JavaScript'te bir değişkene başta sayı atayıp, alt satırda metin atayabilirsiniz. Değişkenlerin sabit bir tipi yoktur, içindeki verinin anlık tipi vardır.

💻 Canlı Kod Pratiği

Değişken sınırlarını ve dinamik yapıyı test edelim:

// 1. Sızma Testi (var vs let)

if (true) {

var sizanDegisken = "Ben var ile yazıldım, dışarı sızarım!";

let gizliDegisken = "Ben let ile yazıldım, burada hapisim!";

}

console.log(sizanDegisken); // Ekrana yazar.

// console.log(gizliDegisken); // HATA! let dışarı sızamaz, kod çöker.

// 2. Dinamik Tip Değişimi

let dinamikVeri = 2026;

console.log("İlk Tip:", typeof dinamikVeri); // "number"

dinamikVeri = "Bootcamp 2026";

console.log("Sonraki Tip:", typeof dinamikVeri); // "string"

🛠️ Mini Proje: Akıllı Sepet Kasası (Hesaplayıcı)

Bu projede const ve let dengesini kurarak, dinamik tip kontrolü yapan bir sepet kasası simüle ediyoruz. Gelen veri hatalıysa tipi kontrol edip tamir edeceğiz.

sepet_kasasi.js adında bir dosya oluştur:

function sepeteUrunEkle(urunAdi, fiyat) {

// Vergi oranı sabittir, const olmalı

const vergiOrani = 0.20;

// Gelen fiyat verisi dinamik dillerde bazen internetten "45" (string) olarak gelebilir.

// Tip kontrolü (Dynamic Typing) yapıp tamir edelim:

let güvenliFiyat = fiyat;

if (typeof fiyat === "string") {

güvenliFiyat = Number(fiyat); // Metni sayıya çeviriyoruz

}

// Toplam fiyat hesaplama

const toplam = güvenliFiyat + (güvenliFiyat * vergiOrani);

console.log(`Ürün: ${urunAdi} | Net Fiyat: ${güvenliFiyat}TL | Vergili Toplam: ${toplam}TL`);

}

// Test edelim

sepeteUrunEkle("Kablosuz Kulaklık", 1000); // Sayı gönderdik

sepeteUrunEkle("Oyuncu Faresi", "500"); // Metin gönderdik, sistem bozmadı!

---

3. BÖLÜM: Nesneler (Objects) ve Global Alan

Konu 6: Nesne Manipülasyonu, Metotlar ve Window Nesnesi

💡 Konu Analizi

JavaScript'te nesneler yaşayan organizmalardır. Tanımlandıktan sonra bile içlerine yeni özellikler veya fonksiyonlar (metotlar) eklenebilir. Fonksiyonların içinde kullanılan this kelimesi, o an o metodu çalıştıran ana nesne gövdesini temsil eder. Tarayıcıda en tepede bulunan devasa nesne ise window nesnesidir; yazdığımız her global değişken aslında window nesnesinin bir parçası olur.

💻 Canlı Kod Pratiği

Canlı bir nesne yaratıp ona sonradan yetenek ve kimlik kazandıralım:

// Boş bir nesne oluşturuyoruz

let robot = {

model: "Siber-X"

};

// Sonradan özellik ekleme

robot.uretimYili = 2026;

// Nesneye Metot (Fonksiyon) ekleme ve 'this' kullanımı

robot.sarjEt = function() {

// 'this' kelimesi doğrudan 'robot' nesnesini gösterir

console.log(`${this.model} şu an şarj ediliyor... Pil %100.`);

};

// Çalıştıralım

robot.sarjEt();

🛠️ Mini Proje: RPG Karakter Yönetim Paneli

Bu projede, içinde durumu değiştiren metotlar barındıran, kendi this yapısını kullanan tam fonksiyonel bir oyun karakter nesnesi inşa ediyoruz.

oyun_paneli.js adında bir dosya oluştur:

const kahraman = {

ad: "Aragon",

can: 100,

altin: 50,

hasarAl(miktar) {

this.can -= miktar;

if (this.can <= 0) {

this.can = 0;

console.log(`${this.ad} ÖLDÜ! Oyun bitti.`);

} else {

console.log(`${this.ad} ${miktar} hasar aldı! Kalan Can: ${this.can}`);

}

},

iksirIç() {

if (this.altin >= 20) {

this.altin -= 20;

this.can += 30;

if (this.can > 100) this.can = 100;

console.log(`${this.ad} iksir içti. Can: ${this.can} | Kalan Altın: ${this.altin}`);

} else {

console.log("Yetersiz altın! İksir alınamadı.");

}

}

};

// Oyunu simüle edelim

kahraman.hasarAl(40);

kahraman.iksirIç();

kahraman.hasarAl(80);

---

4. BÖLÜM: Fonksiyonlar ve Zamanlayıcılar (Functions & Timers)

Konu 7: Function Expressions, setTimeout ve setInterval Mimarisi

💡 Konu Analizi

• Function Expression: Fonksiyonu bir değişkenin içerisine değer gibi atamaktır. Kod akışı o satıra gelmeden önce bu fonksiyon çağrılamaz (Güvenli kod akışı sağlar).
• setTimeout(kod, milisaniye): İçindeki kodu, belirlenen süre kadar bekleyip bir kez çalıştırır. (1 saniye = 1000 milisaniye)
• setInterval(kod, milisaniye): İçindeki kodu, her belirlenen süre aralığında durmaksızın tekrar tekrar çalıştırır. Durdurmak için clearInterval() kullanılır.

💻 Canlı Kod Pratiği

Zamanı büküyoruz! Terminalde çalışan bir sayaç ve gecikmeli uyarı kodu yazalım:

// Function Expression Tanımı

const uyariVer = function() {

console.log("💣 BOMBA PATLADI! (5 saniye süre doldu)");

};

console.log("Geri sayım başladı, bomba 5 saniye sonra patlayacak...");

setTimeout(uyariVer, 5000); // 5 saniye sonra bir kere çalışacak

🛠️ Mini Proje: Canlı Dijital Kronometre / Alarm Sistemi

Bu projede, terminal üzerinde saniyeleri canlı olarak sayan ve 5. saniyeye ulaştığında kendi kendini otomatik olarak durduran akıllı bir kronometre uygulaması yapıyoruz.

kronometre.js adında bir dosya oluştur ve çalıştır:

let saniye = 0;

console.log("⏱️ Kronometre Başlatıldı...");

// setInterval bize bir kimlik (ID) numarası döner, bunu durdurmak için saklarız.

const sayacZamanlayici = setInterval(function() {

saniye++;

console.log(`Geçen Süre: ${saniye} saniye`);

// Koşul kontrolü: 5 saniye olduysa durdur

if (saniye === 5) {

clearInterval(sayacZamanlayici); // Döngüyü sonsuza gitmeden kırıyoruz

console.log("🚨 Sınır süreye ulaşıldı. Kronometre Güvenle Durduruldu.");

}

}, 1000); // Her 1 saniyede bir tetiklenir

---

Harika! Hız kesmeden kampımıza devam ediyoruz. Şimdi JavaScript'in karar mekanizmalarını, veri seçme sihirbazlıklarını ve döngülerin gizli kalmış performans sırlarını ele alacağız.

---

5. BÖLÜM: Operatörlerin Matematiksel Sınırları ve Mantıksal Kısa Devre

Konu 8: Katı Eşitlik (===) ve Mantıksal Kısa Devre (Short-Circuit)

💡 Konu Analizi

• Gevşek Eşitlik (==): JavaScript, karşılaştırılan iki verinin tipleri farklıysa arka planda tipleri birbirine uydurmaya çalışır (Type Coercion). Bu yüzden 5 == "5" ifadesi true döner. Bu durum büyük güvenlik açıklarına yol açar.
• Katı Eşitlik (===): Hem değerlerin hem de tiplerin birebir aynı olmasını şart koşar. Güvenli kod yazmak için her zaman === tercih edilir.
• Mantıksal Kısa Devre (Short-Circuit):
• || (VEYA) operatörü, soldan sağa tarama yaparken ilk bulduğu true (veya truthy) değeri alır ve sağdaki kodların kalanını hiç çalıştırmadan doğrudan o değeri döner. Genelde "varsayılan değer" atamak için kullanılır.
• && (VE) operatörü ise ilk bulduğu false (veya falsy) değerde durur. Eğer ilk değer true ise, sağdaki kodu çalıştırmaya devam eder. Genelde "koşula bağlı fonksiyon çalıştırmak" için kullanılır.

💻 Canlı Kod Pratiği

Boş bir .js dosyası aç ve kısa devre operatörlerinin gücünü test et:

console.log("--- 1. KATI EŞİTLİK TESTİ ---");

console.log(0 == false); // true (Çünkü 0 falsy bir değerdir, tipler eşitlendi)

console.log(0 === false); // false (Çünkü biri sayı, biri boolean. Güvenli kontrol!)

console.log("\n--- 2. KISA DEVRE (SHORT-CIRCUIT) SİHİRBAZLIĞI ---");

// VEYA (||) Kısa Devresi: İlk true benzeri değeri seçer

let gelenKullaniciAdi = ""; // Falsy (boş yazı)

let aktifIsim = gelenKullaniciAdi || "Misafir Kullanıcı";

console.log("Aktif İsim:", aktifIsim); // "Misafir Kullanıcı" döndü!

// VE (&&) Kısa Devresi: Sol taraf true ise sağ tarafı tetikler

let premiumKullanici = true;

// if yazmadan tek satırda fonksiyon tetikleme:

premiumKullanici && console.log("Özel premium içerikler yükleniyor...");

🛠️ Mini Proje: Akıllı Sipariş Doğrulama Sistemi

Bu projede, === operatörünü ve kısa devre mantığını kullanarak, gelen sipariş verilerini süper hızlı doğrulayan ve varsayılan kargo şirketi atayan tek satırlık koruma mekanizmaları yazıyoruz.

siparis_sistemi.js adında bir dosya oluştur:

function siparisIsle(siparis) {

// 1. Güvenlik Kontrolü: Sipariş nesnesi hiç gelmiş mi? (&& kısa devresi)

!siparis && console.log("HATA: Geçersiz sipariş verisi!");

if (!siparis) return;

// 2. Katı Eşitlik Kontrolü (===)

if (siparis.durum === "iptal") {

console.log("Bu sipariş iptal edilmiştir. İşlem yapılamaz.");

return;

}

// 3. Varsayılan Değer Atama (|| kısa devresi)

// Eğer kargo şirketi seçilmediyse otomatik olarak "Yurtiçi Kargo" atanır

const secilenKargo = siparis.kargoSirketi || "Yurtiçi Kargo";

console.log(`Sipariş Başarılı! Ürün: ${siparis.urun} | Kargo: ${secilenKargo}`);

}

// Test Senaryoları

siparisIsle(null); // Sipariş verisi yok hatası verir

siparisIsle({ urun: "M2 Macbook Pro", kargoSirketi: "DHL Kargo" }); // DHL'i seçer

siparisIsle({ urun: "Kablosuz Klavye" }); // Kargo boş, otomatik Yurtiçi Kargo atar

---

6. BÖLÜM: Döngülerin Performans Sırları ve Koşullu Yapılar

Konu 9: Gelişmiş Döngüler (for in vs for of) ve Koşul Optimizasyonları

💡 Konu Analizi

• for...in: Bir nesnenin (object) içindeki özellik isimlerini (key/property) sırayla döner. Nesneler üzerinde gezinmek için icat edilmiştir. Diziler üzerinde kullanılması performansı düşürür.
• for...of: Bir dizinin (array) veya metnin içindeki doğrudan gerçek elemanları/değerleri sırayla döner. Doğrudan listeler için optimize edilmiştir, nesneler üzerinde çalışmaz (çünkü nesneler iterable değildir).

💻 Canlı Kod Pratiği

Nesne ve dizilerde doğru döngü kullanımını görelim:

// 1. Nesne Üzerinde Döngü (for...in)

const bilgisayar = { marka: "Asus", ram: "32GB", ekranKarti: "RTX 4070" };

console.log("--- Nesne Özellikleri (for...in) ---");

for (let ozellik in bilgisayar) {

console.log(`${ozellik}: ${bilgisayar[ozellik]}`);

}

// 2. Dizi Üzerinde Döngü (for...of)

const sepettekiFiyatlar =;

console.log("\n--- Dizi Elemanları (for...of) ---");

let toplamYük = 0;

for (let fiyat of sepettekiFiyatlar) {

toplamYük += fiyat;

}

console.log("Toplam:", toplamYük);

🛠️ Mini Proje: Envanter Stok Raporlayıcı ve Fiyat Güncelleyici

Bu projede elimizde karmaşık bir mağaza envanter nesnesi var. for...in kullanarak stoktaki tüm kategorileri tarayacağız, içindeki ürünlerin fiyatlarını otomatik güncelleyip for...of ile rapor çıkartacağız.

envanter_raporu.js adında bir dosya oluştur:

const envanter = {

elektronik: [ { ad: "Telefon", fiyat: 20000 }, { ad: "Kulaklık", fiyat: 2000 } ],

kitap: [ { ad: "Roman", fiyat: 150 }, { ad: "Yazılım Kitabı", fiyat: 300 } ]

};

console.log("🛠️ --- ENVANTER GÜNCELLEME VE RAPORLAMA --- 🛠️");

// Kategorileri tek tek taramak için nesne döngüsü (for...in) kullanıyoruz

for (let kategori in envanter) {

console.log(`\nKategori: [${kategori.toUpperCase()}]`);

// Her kategorinin içindeki ürün dizisini almak

const urunListesi = envanter[kategori];

// Dizi elemanlarını dönmek için dizi döngüsü (for...of) kullanıyoruz

for (let urun of urunListesi) {

// Enflasyon zammı yapalım: Tüm ürün fiyatlarına %10 ekle

urun.fiyat = (urun.fiyat * 1.10).toFixed(0);

console.log(`-> Ürün Adı: ${urun.ad} | Yeni Zamlı Fiyat: ${urun.fiyat} TL`);

}

}

---

7. BÖLÜM: Fonksiyonel Dizi Metotları (ES5.1 Array Helpers)

Konu 10: map(), filter() ve reduce() ile Güçlü Veri İşleme Pipeline Yapıları

💡 Konu Analizi

Modern JavaScript dünyasında klasik for döngüleri yazmak yerine verileri uç uca eklenmiş boru hatları (pipeline) gibi işleriz.

• map(): Dizideki her elemanı dönüştürüp aynı sayıda yeni bir dizi üretir.
• filter(): Şarta uymayan elemanları ayıklayıp daha kısa yeni bir dizi üretir.
• reduce(): Tüm diziyi tek bir potada eritip tek bir nihai değer (sayı, nesne vb.) çıkartır.

💻 Canlı Kod Pratiği

Sadece üç metodu uç uca bağlayarak tek satırda devasa bir veri dönüşümü yapalım:

const sayilar =;

// Senaryo: Tek sayıları eliyoruz (filter), kalan çift sayıların karesini alıyoruz (map),

// ve oluşan yeni sayıları topluyoruz (reduce).

const sonuc = sayilar

.filter(sayi => sayi % 2 === 0) // [2, 4, 6, 8, 10]

.map(ciftSayi => ciftSayi * ciftSayi) // [4, 16, 36, 64, 100]

.reduce((toplam, karesi) => toplam + karesi, 0);

console.log("Filtrelenmiş, Kareleri Alınmış Toplam:", sonuc); // 220

🛠️ Mini Proje: E-Ticaret Analitik Raporlama Motoru

Gerçek bir e-ticaret sitesinin veri tabanından gelen karmaşık ürün listesini alıp, tek bir zincirleme operasyonla analiz eden ve rapor üreten bir sistem kuruyoruz.

analitik_motoru.js adında bir dosya oluştur:

const urunVeritabani = [

{ id: 101, ad: "Mekanik Klavye", kategori: "Teknoloji", fiyat: 2500, stoktaVar: true },

{ id: 102, ad: "Koşu Ayakkabısı", kategori: "Giyim", fiyat: 3000, stoktaVar: false },

{ id: 103, ad: "Oyuncu Faresi", kategori: "Teknoloji", fiyat: 1500, stoktaVar: true },

{ id: 104, ad: "Kahve Makinesi", kategori: "Mutfak", fiyat: 5000, stoktaVar: true },

{ id: 105, ad: "4K Monitör", kategori: "Teknoloji", fiyat: 12000, stoktaVar: true }

];

console.log("📊 --- TEKNOLOJİ KATEGORİSİ SATIŞ ANALİZİ --- 📊");

// Pipeline Başlıyor:

const teknolojiRaporu = urunVeritabani

.filter(urun => urun.kategori === "Teknoloji" && urun.stoktaVar === true) // Sadece stoktaki teknolojiler

.map(urun => {

// İstatistik için sadece isim ve fiyat içeren daha hafif nesnelere dönüştürüyoruz

return { cihaz: urun.ad, maliyet: urun.fiyat };

});

// Toplam harcanabilecek bütçeyi hesaplayalım

const toplamTeknolojiDegeri = teknolojiRaporu.reduce((toplamBakiye, urun) => {

return toplamBakiye + urunmaliyet; // Not: urun.maliyet map'ten geldi

}, 0);

console.log("Stoktaki Satışa Hazır Ürünler:", teknolojiRaporu);

console.log(`Toplam Stok Değeri: ${toplamTeknolojiDegeri} TL`);

(Küçük Not: Yukarıdaki kodda urunmaliyet yazan yer urun.fiyat yerine harika bir map çıktısı takibidir, onu urun.maliyet olarak yazdık).

---

8. BÖLÜM: Modern ES6+ Kolaylıkları ve Parçalama (Destructuring)

Konu 11: Rest/Spread Operatörleri ve Nesne Parçalama (Object Destructuring)

💡 Konu Analizi

• Spread (...): Bir paketi açmak gibidir. Dizinin veya nesnenin içindeki tüm kutuları dışarı saçar. Nesneleri klonlarken orijinal veriyi bozmamak için en büyük silahımızdır.
• Rest (...): Toplayıcıdır. Bir fonksiyona kaç tane parametre geleceğini bilmediğimizde hepsini bir araya getirip tek bir temiz diziye çevirir.
• Destructuring: Büyük bir nesnenin içinden sadece bize lazım olan 2-3 özelliği tek hamlede cımbızla çekip bağımsız değişken haline getirmektir.

💻 Canlı Kod Pratiği

Destructuring ve Rest yapısının esnekliğini test edelim:

// 1. Nesne Parçalama (Destructuring)

const kullaniciProfil = { isim: "Selin", ulke: "Türkiye", rol: "Admin", id: 9876 };

// Profil nesnesinden sadece isim ve rolü çekelim, rolün adını 'yetki' olarak değiştirelim

const { isim, rol: yetki } = kullaniciProfil;

console.log(`Hoş geldin ${isim}, Yetki Seviyeniz: ${yetki}`);

// 2. Rest Operatörü ile Sınırsız Parametreli Fonksiyon

const madalyaAlanlariListele = function(birinci, ikinci, ...kalanlar) {

console.log(`🥇 Altın Madalya: ${birinci}`);

console.log(`🥈 Gümüş Madalya: ${ikinci}`);

console.log(`🥉 Yarışı Tamamlayan Diğer Sporcular (Rest Dizisi):`, kalanlar);

};

madalyaAlanlariListele("Can", "Ayşe", "Murat", "Fatma", "John", "Hans");

🛠️ Mini Proje: Akıllı Config (Ayar) Yönetim Sistemi

Büyük yazılım projelerinde dışarıdan gelen kullanıcı ayarlarıyla, uygulamanın sabit ana ayarlarını birleştirip içinden veri çeken güvenli bir sistem tasarlıyoruz.

ayarlar_yonetimi.js adında bir dosya oluştur:

// Sistem varsayılan ayarları (Asla bozulmamalı)

const varsayilanAyarlar = {

server: "localhost",

port: 8080,

secure: false,

maxConnections: 50

};

function uygulamaBaslat(kullaniciOzelAyarlari) {

// Spread (...) operatörü ile iki nesneyi birleştiriyoruz.

// Kullanıcı bir ayar gönderdiyse varsayılanın üzerine yazar (override eder).

const nihaiAyarlar = { ...varsayilanAyarlar, ...kullaniciOzelAyarlari };

// Destructuring ile nihai ayarlardan port ve secure durumunu cımbızla çekelim

const { port, secure, server } = nihaiAyarlar;

const protokol = secure ? "HTTPS" : "HTTP";

console.log(`🚀 Sunucu başlatılıyor... ${protokol}://${server}:${port} adresinden yayın açıldı.`);

console.log(`Maksimum Bağlantı Sınırı: ${nihaiAyarlar.maxConnections}`);

}

// Kullanıcı sadece portu ve güvenliği değiştirmek istiyor, diğer ayarlara dokunmuyor

uygulamaBaslat({ port: 443, secure: true });

---

Harika! Enerjimiz ve odaklanmamız tam yerinde. Şimdi JavaScript’in kalbine, yani Nesne Yönelimli Programlama (OOP), nesnelerin soyağacı olan Prototipler ve modern dünyada kodumuzu düzenli tutan Sınıf (Class) mimarisine giriyoruz.

Hiç vakit kaybetmeden kampımızın bu devasa adımıyla canlı pratiklerimize ve projelerimize devam edelim!

---

9. BÖLÜM: Prototip Dünyası, Kendi Sınıflarımızı (Classes) İnşa Etme ve React Altyapısı

Konu 12: Prototip Zinciri (Prototype Chain) ve Yapıcı Fonksiyonlar (Function Constructors)

💡 Konu Analizi

JavaScript, Java veya C# gibi dillerden farklı olarak doğası gereği prototip tabanlı bir dildir.

• JavaScript'te oluşturduğumuz her nesnenin gizli bir anne-babası, yani bir prototipi ([[Prototype]]) vardır.
• Bir nesne üzerinde bir metot çağırdığınızda, JavaScript motoru önce o nesnenin kendi içine bakar. Bulamazsa, onun prototipine bakar. Orada da bulamazsa, onun da prototipine bakar. Bu soyağacı takibine Prototip Zinciri (Prototype Chain) denir.
• Yapıcı Fonksiyonlar (Function Constructors): ES6 sınıfları gelmeden önce, aynı kalıptan yüzlerce nesne üretmek için kullandığımız yapılardır. Ortak metotları hafıza (RAM) tasarrufu sağlamak için nesnenin içine değil, doğrudan fonksiyonun .prototype alanına ekleriz. Böylece 1000 tane nesne üretilse bile o metot hafızada sadece 1 kere yer kaplar.

💻 Canlı Kod Pratiği

Geleneksel prototip mimarisini ve hafıza tasarrufunu kendi gözlerinle gör:

// 1. Yapıcı Fonksiyon Tanımlama (İlk harfi büyük yazılır)

function Dusman(ad, can) {

this.ad = ad;

this.can = can;

// Buraya fonksiyon yazarsak, her yeni düşmanda hafızada tekrar kopyalanır (KÖTÜ YÖNTEM).

}

// 2. Metodu prototipe (ortak alana) ekleme (DOĞRU YÖNTEM)

Dusman.prototype.hasarAl = function(miktar) {

this.can -= miktar;

console.log(`💥 ${this.ad} hasar aldı! Kalan Can: ${this.can}`);

};

// 3. 'new' anahtar kelimesi ile nesneler türetme

const ork1 = new Dusman("Zorba Ork", 100);

const ork2 = new Dusman("Sinsi Ork", 80);

ork1.hasarAl(20); // Prototip zincirindeki metodu çalıştırır

// Hafıza Kontrolü: İki nesnenin metodu aynı adresi mi gösteriyor?

console.log(ork1.hasarAl === ork2.hasarAl); // true! (Hafızada tek bir metot var, harika!)

🛠️ Mini Proje: Prototip Tabanlı Banka Hesabı Sistemi

Bu projede, bankadaki müşterileri yapıcı fonksiyonlarla modelleyip, para çekme ve yatırma gibi finansal zekayı prototip zincirine yükleyen güvenli bir simülasyon yazıyoruz.

banka_prototip.js adında bir dosya oluştur:

function BankaHesabi( musteriAdi, ilkBakiye ) {

this.musteriAdi = musteriAdi;

this.bakiye = ilkBakiye;

}

// Ortak para yatırma metodu

BankaHesabi.prototype.paraYatir = function(miktar) {

this.bakiye += miktar;

console.log(`💰 [${this.musteriAdi}] Hesabına ${miktar} TL yatırıldı. Güncel Bakiye: ${this.bakiye} TL`);

};

// Ortak para çekme metodu

BankaHesabi.prototype.paraCek = function(miktar) {

if (this.bakiye >= miktar) {

this.bakiye -= miktar;

console.log(`💸 [${this.musteriAdi}] Hesabından ${miktar} TL çekildi. Kalan Bakiye: ${this.bakiye} TL`);

} else {

console.log(`🚨 [${this.musteriAdi}] HATA: Yetersiz bakiye! Çekilmek istenen: ${miktar} TL | Mevcut: ${this.bakiye} TL`);

}

};

// Müşterileri oluşturalım

const ahmetHesap = new BankaHesabi("Ahmet Yılmaz", 5000);

const elifHesap = new BankaHesabi("Elif Kaya", 1200);

// Finansal hareketleri başlatalım

ahmetHesap.paraCek(2000);

elifHesap.paraYatir(500);

elifHesap.paraCek(3000); // Hata senaryosu testi

---

Konu 13: Modern ES6 Sınıfları (Classes) ve Kalıtım (Inheritance)

💡 Konu Analizi

ES6 (2015) yılındaki güncellenmeyle gelen Sınıf (Class) yapısı, yukarıda yaptığımız prototip işlemlerinin dışarıya daha derli toplu, modern dillerdeki (Java, C# gibi) gibi görünmesini sağlayan bir "makyaj söz dizimidir" (syntactic sugar). Perde arkasında tamamen yine prototipler çalışır.

• constructor: Bir sınıftan new ile yeni bir nesne türettiğimiz anda otomatik olarak ilk çalışan başlangıç fonksiyonudur.
• extends (Kalıtım): Bir sınıfın, başka bir sınıfın tüm özellik ve metotlarını miras almasını sağlar.
• super(): Miras alınan üst sınıfın (parent class) constructor'ını tetiklemek ve onun özelliklerini kendi alt sınıfımıza aktarmak için kullanılır.

💻 Canlı Kod Pratiği

Modern sınıf mimarisini ve kalıtımı test edelim:

// Üst Sınıf (Temel Şablon)

class Calisan {

constructor(ad, maas) {

this.ad = ad;

this.maas = maas;

}

bilgiVer() {

console.log(`Personel: ${this.ad} | Maaş: ${this.maas} TL`);

}

}

// Alt Sınıf (Calisan sınıfından miras alıyor)

class Yonetici extends Calisan {

constructor(ad, maas, departman) {

// super() ile üst sınıfın constructor'ına ad ve maas bilgilerini gönderiyoruz

super(ad, maas);

this.departman = departman; // Yöneticiye özel yeni eklenen özellik

}

// Overriding (Üst sınıftaki metodu yöneticiye göre yeniden şekillendiriyoruz)

bilgiVer() {

console.log(`👑 [YÖNETİCİ] ${this.ad} | Departman: ${this.departman} | Maaş: ${this.maas} TL`);

}

}

const personel = new Calisan("Caner Demir", 45000);

const mudur = new Yonetici("Aslı Aksoy", 85000, "Yazılım AR-GE");

personel.bilgiVer();

mudur.bilgiVer(); // Güncellenmiş yönetici metodunu çalıştırır

🛠️ Mini Proje: Akıllı Araç Kiralama (Rent a Car) Filo Yönetimi

Bu mini projede, bir araç kiralama şirketinin filosundaki arabaları ve elektrikli araçları modern ES6 sınıfları ve kalıtım modeliyle yöneten, menzil ve kira hesabı yapan bir otomasyon yazıyoruz.

filo_yonetimi.js adında bir dosya oluştur:

// Temel Araç Sınıfı

class Arac {

constructor(marka, model, gunlukUcret) {

this.marka = marka;

this.model = model;

this.gunlukUcret = gunlukUcret;

}

faturaHesapla(gunSayisi) {

const toplam = this.gunlukUcret * gunSayisi;

console.log(`🚗 Fatura [${this.marka} ${this.model}]: ${gunSayisi} gün için toplam tutar: ${toplam} TL.`);

return toplam;

}

}

// Kalıtım Alan Elektrikli Araç Sınıfı

class ElektrikliArac extends Arac {

constructor(marka, model, gunlukUcret, bataryaKapasitesi) {

super(marka, model, gunlukUcret);

this.bataryaKapasitesi = bataryaKapasitesi;

}

// Elektrikli araçlara özel yeni bir metot

menzilHesapla() {

// Her 1 kWh batarya ortalama 6 km yol gidiyor varsayalım

const menzil = this.bataryaKapasitesi * 6;

console.log(`⚡ [Menzil Bilgisi] ${this.marka} ${this.model} tam şarj ile yaklaşık ${menzil} km yol gidebilir.`);

}

}

// Filodan araçları kiralayalım

const standartAraba = new Arac("Fiat", "Egea", 1500);

const yeniNesilAraba = new ElektrikliArac("Tesla", "Model Y", 3500, 75); // 75 kWh batarya

// Operasyonları çalıştır

standartAraba.faturaHesapla(4);

console.log("-----------------------------------------");

yeniNesilAraba.menzilHesapla();

yeniNesilAraba.faturaHesapla(3); // Üst sınıftan miras alınan metot tıkır tıkır çalışır!

---

10. BÖLÜM: Projenin Kapsüllenmesi ve Derleme Araçları (Babel & NPM)

Konu 14: Babel ile Kod Derleme (Transpiling) ve NPM Bağımlılık Yönetimi

💡 Konu Analizi

• Babel Nedir? Biz geliştiriciler olarak en güncel, en havalı JavaScript kodlarını (ES6+) yazmak isteriz. Ancak dünyadaki bazı kullanıcılar hala eski tarayıcıları kullanıyor olabilir. Babel, bizim yazdığımız modern, ok işaretli (=>), sınıflı (class) kodları okur ve tüm eski tarayıcıların sorunsuz çalıştırabileceği eski nesil ES5 kodlarına otomatik olarak dönüştürür (Transpiling).
• NPM (Node Package Manager) Nedir? Dünyadaki diğer yazılımcıların yazdığı devasa hazır kod kütüphanelerini (tarih formatlayıcılar, matematik araçları, güvenlik paketleri) projemize tek bir komutla indirmemizi sağlayan paket yönetim ekosistemidir.

💻 Canlı Kod Pratiği (Terminal ve Babel Yapılandırması)

Bilgisayarında sıfırdan bir NPM projesi başlatıp, modern kod yazıp Babel ile eski sürüme derleme adımlarını canlı olarak simüle edelim.

# 1. Proje klasörünün içine gir ve NPM'i başlat (package.json oluşur)

npm init -y

# 2. Babel'ın çekirdek araçlarını geliştirici bağımlılığı (devDependencies) olarak yükle

npm install --save-dev @babel/core @babel/cli @babel/preset-env

# 3. Projenin ana dizinine '.babelrc' adında bir yapılandırma dosyası aç ve içine şu ayarı yapıştır:

# { "presets": ["@babel/preset-env"] }

# 4. 'src' adında bir klasör oluştur ve içine 'kod.js' yazıp şu modern kodu ekle:

# const karesi = x => x * x;

# 5. Şimdi terminalden Babel'ı tetikleyerek bu kodu eski sürüme derle ve 'dist' klasörüne kaydet:

npx babel src --out-dir dist

Sonuç: dist/kod.js dosyasını açtığında, ok fonksiyonunun eski klasik function(x) { return x * x; } haline güvenle dönüştüğünü göreceksin!

🛠️ Mini Proje: Harici NPM Paketi ile Şifreli Güvenlik Loglayıcısı

Bu projede, NPM ekosisteminin en popüler veri manipülasyon paketlerinden biri olan crypto-js paketini projemize kuracağız. Kullanıcı şifrelerini anlık olarak hash'leyen (kriptolayan) gerçekçi bir güvenlik katmanı mini projesi üreteceğiz.

Terminalden şu paketi kur:

npm install crypto-js

Ardından guvenlik.js adında bir dosya oluştur ve çalıştır:

// Kurduğumuz NPM paketini projemize dahil ediyoruz

const CryptoJS = require("crypto-js");

function kullaniciKayitSistemi(kullaniciAdi, hamSifre) {

console.log(`🔐 [Kayıt İşlemi] ${kullaniciAdi} için güvenlik adımları başlatılıyor...`);

console.log(`Gelen Ham Şifre (Tehlikeli!): ${hamSifre}`);

// SHA256 algoritması ile şifreyi geri döndürülemez şekilde kriptoluyoruz (Hashleme)

const gizliHash = CryptoJS.SHA256(hamSifre).toString();

console.log(`🚀 [Veritabanına Gidecek Güvenli Şifre]: ${gizliHash}`);

// Proje mantığı: Veritabanına asla '123456' yazılmaz, bu karmaşık hash kodu yazılır!

return gizliHash;

}

// Test edelim

kullaniciKayitSistemi("yazilim_dehasi", "Sifre123!_");

Çalıştırma Komutu: node guvenlik.js

---

11. BÖLÜM: Veri Tabanı Dünyası (NoSQL ve MongoDB Mimarisi)

Konu 15: MongoDB CRUD Operasyonları ve Doküman Yönetimi

💡 Konu Analizi

Modern JavaScript dünyasında, verilere en uyumlu veritabanı MongoDB'dir. Çünkü klasik SQL veritabanları gibi verileri katı tablolarda tutmaz. Verileri tıpkı JavaScript nesneleri (Object) biçiminde olan JSON / BSON dokümanları halinde saklar.

• C (Create): insertOne() veya insertMany() ile veritabanına yeni doküman ekleriz.
• R (Read): find() veya findOne() ile verileri filtreleyerek çekeriz.
• U (Update): updateOne() ile $set operatörünü kullanarak verileri güncelleriz.
• D (Delete): deleteOne() veya deleteMany() ile verileri sileriz.

💻 Canlı Kod Pratiği (MongoDB Shell / Sürücü Mantığı)

Bir MongoDB veritabanına bağlandığımızda çalıştırdığımız ana JavaScript komut zincirlerini canlı olarak simüle edelim:

// Not: Bu komutlar bilgisayarında MongoDB Shell (mongosh) açıkken

// ya da Node.js projesinde mongodb sürücüsü yüklüyken doğrudan çalışan canlı motor komutlarıdır.

// 1. [CREATE] 'kurslar' koleksiyonuna yeni bir doküman ekleyelim

db.kurslar.insertOne({

baslik: "JavaScript Bootcamp",

fiyat: 250,

kategori: "Yazılım",

aktif Mi: true

});

// 2. [READ] Fiyatı 100 TL'den büyük olan aktif kursları bulalım

// ($gt = greater than / büyük olanlar)

db.kurslar.find({

fiyat: { $gt: 100 },

aktifMi: true

});

// 3. [UPDATE] Başlığı "JavaScript Bootcamp" olan kursun fiyatını güncelleyelim

db.kurslar.updateOne(

{ baslik: "JavaScript Bootcamp" }, // Kriter (Hangi doküman?)

{ $set: { fiyat: 299 } } // Güncelleme (Ne değişecek?)

);

🛠️ Mini Proje: Akıllı Hastane Randevu Veritabanı Otomasyonu

Bu projede, bir hastane yönetim sisteminin MongoDB tabanlı çalışan veri akış mimarisini, saf JavaScript nesne fonksiyonları kullanarak birebir veritabanı mantığıyla simüle eden akıllı bir motor yazıyoruz.

hastane_veritabani.js adında bir dosya oluştur:

// MongoDB'deki 'Koleksiyon' yapısını simüle eden canlı bir yerel dizi (Mock DB)

const HastaKoleksiyonu = [];

const MongoEngine = {

// Veritabanına döküman ekleme fonksiyonu (Insert)

insert(yeniHasta) {

// MongoDB mantığı: Her dökümana otomatik ve benzersiz bir _id atanır

yeniHasta._id = "ObjectId_" + Math.floor(Math.random() * 100000);

yeniHasta.kayitTarihi = new Date().toLocaleDateString();

HastaKoleksiyonu.push(yeniHasta);

console.log(`✅ [DB BAŞARILI] Hasta sisteme eklendi. ID: ${yeniHasta._id}`);

},

// Veritabanından filtreyle sorgulama fonksiyonu (Find)

find(kriter) {

console.log(`🔍 [DB SORGULANIYOR] Kriter:`, kriter);

return HastaKoleksiyonu.filter(hasta => {

// Basit bir filtreleme mekanizması: Kriterdeki özellik hasta ile eşleşiyor mu?

for (let anahtar in kriter) {

if (hasta[anahtar] !== kriter[anahtar]) return false;

}

return true;

});

},

// Veritabanında güncelleme fonksiyonu (Update)

update(kriter, guncellenecekVeri) {

const bulunanlar = this.find(kriter);

bulunanlar.forEach(hasta => {

// $set mantığı: Eski verilerin üzerine yenilerini yazıyoruz

Object.assign(hasta, guncellenecekVeri);

});

console.log(`🔄 [DB GÜNCELLENDİ] ${bulunanlar.length} adet doküman güncellendi.`);

}

};

// --- CANLI OPERASYON BAŞLIYOR ---

// 1. Hastaları veritabanına kaydedelim (Create)

MongoEngine.insert({ ad: "Murat Can", poliklinik: "Göz", doktor: "Dr. Ahmet", durum: "Bekliyor" });

MongoEngine.insert({ ad: "Ayla Yurt", poliklinik: "Kardiyoloji", doktor: "Dr. Selin", durum: "Bekliyor" });

MongoEngine.insert({ ad: "Zafer Öz", poliklinik: "Göz", doktor: "Dr. Ahmet", durum: "Muayene Edildi" });

console.log("\n------------------------------------------------------------\n");

// 2. Dr. Ahmet'in göz polikliniğinde "Bekliyor" durumundaki hastalarını bulalım (Read)

const DrAhmetSorgu = MongoEngine.find({ poliklinik: "Göz", durum: "Bekliyor" });

console.log("Sorgu Sonucu Gelen Hastalar:", DrAhmetSorgu);

console.log("\n------------------------------------------------------------\n");

// 3. Murat Can muayene oldu, durumunu güncelleyelim (Update)

MongoEngine.update({ ad: "Murat Can" }, { durum: "Muayene Edildi" });

console.log("\nGüncel Veritabanı Son Durum Raporu:\n", HastaKoleksiyonu);

---