JavaScript Referansı
JavaScript Referansı, geliştiricilerin dilin tüm özelliklerini derinlemesine anlamalarını ve gerçek dünya projelerinde etkin bir şekilde kullanmalarını sağlayan kapsamlı bir rehberdir. Önemi, bir evi inşa etmeye, bir odayı dekore etmeye veya bir mektup yazmaya benzetilebilir: her fonksiyon, özellik veya metod, kodun okunabilir, sürdürülebilir ve verimli olmasını sağlamak için düzenlenmiştir.
Bu referans, kişisel web siteleri (personal website), bloglar (blog), e-ticaret siteleri (e-commerce) ve haber portalları (news site) gibi çeşitli projelerde kullanılabilir. Dinamik içerik yönetimi, kullanıcı etkileşimleri, form doğrulama, API çağrıları ve gerçek zamanlı veri güncellemeleri için temel bir kaynaktır.
Okuyucular bu referans sayesinde değişken tanımlamadan başlayarak array ve nesne manipülasyonları, fonksiyonlar, DOM (Document Object Model) ile etkileşim, event handling, asenkron programlama (asynchronous programming) ve performans optimizasyonuna kadar birçok konuyu öğrenirler. Tıpkı bir mektup yazarken veya bir kütüphaneyi düzenlerken olduğu gibi, JavaScript Referansı, kodu düzenli, anlaşılır ve verimli bir şekilde yapılandırmayı öğretir.
Temel Örnek
javascript// Define a simple e-commerce product object
const urun = {
ad: "Laptop", // Product name
fiyat: 1200, // Price
stok: 10, // Stock quantity
stokGuncelle: function(miktar) { // Method to update stock
this.stok -= miktar;
console.log(`${this.ad} stok: ${this.stok}`);
}
};
urun.stokGuncelle(2);Pratik Örnek
javascript// Dynamic visitor counter for a blog post
const butonOku = document.createElement("button");
butonOku.textContent = "Makale Oku";
document.body.appendChild(butonOku);
let ziyaretSayisi = 0;
butonOku.addEventListener("click", function() {
ziyaretSayisi++; // Increment visitor count
console.log(`Makale ziyaretçi sayısı: ${ziyaretSayisi}`);
});İyi uygulamalar ve sık yapılan hatalar, JavaScript’te ustalaşmak için kritik öneme sahiptir.
İyi uygulamalar:
- Modern sözdizimini kullanmak (let ve const) ve scope hatalarını önlemek.
- try...catch ile hata yönetimi yaparak kodun dayanıklılığını artırmak.
- DOM işlemlerinde gereksiz tekrarları önleyerek performans optimizasyonu sağlamak.
-
Kod yorumları ve düzenli yapı ile anlaşılabilirliği artırmak; tıpkı bir odayı dekore etmek gibi.
Sık yapılan hatalar: -
Bellek sızıntıları (memory leaks) – kullanılmayan nesneler temizlenmez.
- Event handling hataları – gereksiz tetiklemeler.
- Hatalı veya eksik hata yönetimi – beklenmeyen çöküşler.
- Tarayıcı uyumsuzluğu – farklı tarayıcılarda hatalar.
Debugging ipuçları: tarayıcı geliştirme araçlarını kullanmak, kodu küçük modüller halinde test etmek ve gerçek projeye entegre etmeden önce doğrulamak.
📊 Hızlı Referans
| Property/Method | Description | Syntax | Example |
|---|---|---|---|
| length | Array veya string uzunluğu | array.length | string.length |
| push | Array sonuna eleman ekler | array.push(value) | let arr=\[]; arr.push(5); |
| pop | Array son elemanı çıkarır | array.pop() | let arr=\[1,2]; arr.pop(); |
| querySelector | DOM’dan öğe seçer | document.querySelector(selector) | document.querySelector("#id"); |
| addEventListener | Event handler ekler | element.addEventListener(event,function) | button.addEventListener("click",()=>{}); |
| setTimeout | Belirli süre sonra fonksiyon çalıştırır | setTimeout(function,milliseconds) | setTimeout(()=>{console.log("1s sonra çalıştı");},1000); |
| JSON.stringify | Nesneyi JSON string’e çevirir | JSON.stringify(object) | let obj={a:1}; console.log(JSON.stringify(obj)); |
| JSON.parse | JSON string’i nesneye çevirir | JSON.parse(text) | let text='{"a":1}'; console.log(JSON.parse(text)); |
📊 Complete Properties Reference
| Property | Values | Default | Browser Support |
|---|---|---|---|
| length | Integer | 0 | All |
| innerHTML | HTML content | "" | All |
| textContent | Plain text | "" | All |
| style | CSSStyleDeclaration | {} | All |
| classList | DOMTokenList | \[] | All |
| value | String | "" | All |
| id | String | "" | All |
| disabled | true/false | false | All |
| checked | true/false | false | All |
| src | URL | "" | All |
| alt | String | "" | All |
| title | String | "" | All |
Özet ve sonraki adımlar:
JavaScript Referansı, kişisel web siteleri, bloglar, e-ticaret siteleri ve haber portalları için dinamik uygulamalar geliştirmede temel bir kaynaktır. DOM manipülasyonu, event handling, performans optimizasyonu ve sürdürülebilir kod yazımı konusunda rehberlik eder.
Bu referans, HTML DOM ile etkileşim ve backend ile iletişim açısından kritik bir bağlantı sağlar. Bir sonraki adımlar, Promise ve Async/Await ile asenkron programlama, modüler geliştirme ve design pattern’lerin öğrenilmesini içermelidir. Pratik yaparak, gerçek projeler üzerinde çalışarak ve debugging araçlarını kullanarak ileri düzey JavaScript becerileri geliştirilebilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek