JavaScript, modern web geliştirmenin temel taşlarından biridir ve dinamik, interaktif web uygulamaları oluşturmak için kullanılan güçlü bir programlama dilidir. İlk olarak 1995 yılında Netscape tarafından geliştirilen bu dil, bugün hem istemci tarafında (tarayıcılar) hem de sunucu tarafında (Node.js gibi) yaygın bir şekilde kullanılmaktadır. Bu yazıda, JavaScript'in tarihçesinden başlayarak temel syntax'ına, DOM manipülasyonuna, asenkron programlamaya, popüler framework entegrasyonlarına, güvenlik ipuçlarına ve performans optimizasyon tekniklerine kadar her yönüyle derinlemesine inceleyeceğiz. Ayrıca, uygulamalı örnekler ve bir tutorial ile konuları pekiştireceksiniz.
JavaScript'in Tarihçesi
JavaScript, Brendan Eich tarafından Netscape Navigator tarayıcısında dinamik içerik oluşturmak amacıyla geliştirildi. İlk adı Mocha olan dil, daha sonra LiveScript ve nihayetinde JavaScript adını aldı. 1996 yılında ECMA International tarafından standartlaştırıldı ve ECMAScript olarak adlandırıldı. Günümüzde ECMAScript, dilin standartlarını belirler ve her yıl yeni özellikler eklenir (örneğin, ES6/ES2015 ile let/const, arrow functions gibi yenilikler). JavaScript, tarayıcıların ötesine geçerek Node.js ile sunucu tarafında da kullanılmaya başlandı ve React, Vue gibi framework'lerle front-end geliştirmede devrim yarattı.
JavaScript'in Temel Syntax'ı
JavaScript, öğrenmesi kolay ancak güçlü bir syntax'a sahiptir. Değişken tanımlama, fonksiyonlar, döngüler ve koşullu ifadeler gibi temel yapılar, diğer C-tabanlı dillerle benzerlik gösterir. İşte temel bir örnek:
// Değişken tanımlama
let isim = 'Ahmet';
const PI = 3.14;
// Fonksiyon tanımlama
function selamVer(kisi) {
return `Merhaba, ${kisi}!`;
}
// Koşullu ifade
if (isim === 'Ahmet') {
console.log(selamVer(isim));
} else {
console.log('Tanıdık bir isim değil!');
}
// Döngü
for (let i = 0; i < 3; i++) {
console.log(`Sayı: ${i}`);
}
Değişkenler var, let ve const ile tanımlanır. let ve const, ES6 ile tanıtıldı ve kapsam (scope) yönetimini iyileştirdi. const ile tanımlanan değişkenler yeniden atanamaz, ancak içindeki nesnelerin özellikleri değiştirilebilir. Örneğin:
const kisi = { ad: 'Ayşe', yas: 25 };
kisi.yas = 26; // Geçerli
kisi = {}; // Hata: const değişken yeniden atanamaz
DOM Manipülasyonu
Document Object Model (DOM), web sayfalarının programatik olarak kontrol edilmesini sağlar. JavaScript, DOM ile HTML elementlerini seçip düzenler. Örneğin, bir butona tıklama olayını dinlemek ve içeriği değiştirmek:
// Element seçme
document.getElementById('myButton').addEventListener('click', () => {
document.getElementById('myDiv').innerHTML = 'Tıklandı!';
});
DOM manipülasyonu, dinamik içerik oluşturmak için güçlü bir araçtır. Örneğin, bir liste oluşturup silme işlevi:
function ekleOgeler() {
const ul = document.createElement('ul');
['Elma', 'Armut', 'Muz'].forEach(oge => {
const li = document.createElement('li');
li.textContent = oge;
ul.appendChild(li);
});
document.body.appendChild(ul);
}
Bu kod, bir liste oluşturur ve sayfaya ekler. DOM manipülasyonunda performans için DocumentFragment kullanımı önerilir, çünkü birden fazla DOM işlemi tek bir toplu işlemde yapılır.
Asenkron Programlama: Promises ve Async/Await
JavaScript, asenkron işlemleri yönetmek için önce geri çağrılar (callbacks), ardından Promises ve son olarak async/await ile güçlü mekanizmalar geliştirdi. Promises, asenkron işlemlerin sonucunu temsil eder. Örneğin, bir API'den veri çekme:
fetch('https://api.example.com/veri')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));
Async/await, Promises'ı daha okunabilir hale getirir:
async function veriCek() {
try {
const response = await fetch('https://api.example.com/veri');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Hata:', error);
}
}
veriCek();
Async/await, özellikle birden fazla asenkron işlemi sırayla veya paralel olarak yönetmek için idealdir. Örneğin, paralel veri çekme:
async function paralelVeriCek() {
const [veri1, veri2] = await Promise.all([
fetch('https://api.example.com/veri1').then(res => res.json()),
fetch('https://api.example.com/veri2').then(res => res.json())
]);
console.log(veri1, veri2);
}
Framework Entegrasyonları: Node.js ve React
JavaScript, hem sunucu hem de istemci tarafında kullanılabilen çok yönlü bir dildir. Node.js, JavaScript'i sunucu tarafında çalıştırmak için V8 motorunu kullanır. Örneğin, basit bir HTTP sunucusu:
const http = require('http');
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Merhaba, Dünya!');
});
server.listen(3000, () => {
console.log('Sunucu 3000 portunda çalışıyor');
});
Bu kod, Kaliteweb gibi bir hosting sağlayıcısında barındırılan bir sunucuda çalıştırılabilir ve Datatelekom veri merkezinde güvenli bir şekilde hizmet verebilir. Node.js, Express gibi framework'lerle API geliştirme için idealdir.
React ise istemci tarafında kullanıcı arayüzleri oluşturmak için popüler bir kütüphanedir. JSX ile bileşen tabanlı geliştirme sağlar. Örneğin, bir sayaç bileşeni:
import React, { useState } from 'react';
function Sayac() {
const [sayi, setSayi] = useState(0);
return (
<div>
<p>Sayı: {sayi}</p>
<button onClick={() => setSayi(sayi + 1)}>Arttır</button>
</div>
);
}
export default Sayac;
React, performans için sanal DOM kullanır ve bileşenlerin yeniden render edilmesini optimize eder. Node.js ve React birlikte, full-stack uygulamalar geliştirmek için güçlü bir kombinasyon oluşturur.
JavaScript Güvenlik İpuçları
JavaScript'in gücü, güvenlik açıklarını da beraberinde getirir. İşte bazı güvenlik ipuçları:
- XSS (Cross-Site Scripting) Önleme: Kullanıcı girişlerini sanitize edin. Örneğin, DOMPurify kütüphanesi kullanabilirsiniz.
import DOMPurify from 'dompurify';
const kirli = '<script>alert("XSS Saldırısı!")</script>';
const temiz = DOMPurify.sanitize(kirli);
document.getElementById('hedef').innerHTML = temiz;
- CSRF Koruması: Sunucu tarafında CSRF token'ları kullanın.
- Güvenli API İstekleri: HTTPS kullanın ve API anahtarlarını gizli tutun.
- Korsan Yazılımlara Karşı Koruma: Güvenilir CDN'ler kullanın ve bağımlılıkları düzenli olarak kontrol edin.
Performans Optimizasyonu
JavaScript performansını artırmak için şu teknikleri kullanabilirsiniz:
- Debouncing ve Throttling: Hızlı tekrarlanan olayları sınırlamak için:
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
window.addEventListener('resize', debounce(() => console.log('Yeniden boyutlandırıldı'), 200));
- Lazy Loading: Görselleri ve modülleri yalnızca gerektiğinde yükleyin.
const modül = await import('./modül.js'); // Dinamik import
- Memoization: Tekrarlanan hesaplamaları önbelleğe alın:
function memoize(fn) {
const cache = {};
return function (...args) {
const key = JSON.stringify(args);
if (cache[key]) return cache[key];
const result = fn(...args);
cache[key] = result;
return result;
};
}
const agirHesaplama = memoize((x) => x * x);
console.log(agirHesaplama(5)); // Hesaplar
console.log(agirHesaplama(5)); // Önbellekten alır
- Web Workers: Yoğun işlemleri ana iş parçacığından ayırın:
// worker.js
const worker = new Worker('worker.js');
worker.postMessage(1000);
worker.onmessage = (e) => console.log('Sonuç:', e.data);
Uygulamalı Tutorial: Basit Bir To-Do Uygulaması
Bu tutorial, yukarıdaki konuları birleştirerek bir to-do uygulaması oluşturmanızı sağlayacak. HTML, CSS ve JavaScript kullanarak başlayalım:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>To-Do Uygulaması</title>
<style>
.todo-item { margin: 10px 0; }
.completed { text-decoration: line-through; }
</style>
</head>
<body>
<h1>To-Do Listesi</h1>
<input type="text" id="gorevInput" placeholder="Yeni görev ekle">
<button onclick="gorevEkle()">Ekle</button>
<ul id="gorevListesi"></ul>
<script>
async function gorevEkle() {
const input = document.getElementById('gorevInput');
const gorev = input.value.trim();
if (!gorev) return;
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `${gorev} <button onclick="this.parentElement.remove()">Sil</button> <button onclick="this.parentElement.classList.toggle('completed')">Tamamla</button>`;
document.getElementById('gorevListesi').appendChild(li);
input.value = '';
// Örnek: API'ye veri gönderme
try {
await fetch('https://api.example.com/gorevler', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ gorev })
});
} catch (error) {
console.error('API hatası:', error);
}
}
</script>
</body>
</html>
Bu uygulama, DOM manipülasyonu, olay dinleme ve asenkron veri gönderimi içerir. Kaliteweb hosting hizmetlerinde bu tür uygulamaları kolayca barındırabilir ve Datatelekom veri merkezinde güvenli bir şekilde çalıştırabilirsiniz.
İleri Seviye Konular
- Module Sistemi: ES Modules ile kodunuzu modüler hale getirin:
// util.js
export const topla = (a, b) => a + b;
// main.js
import { topla } from './util.js';
console.log(topla(2, 3)); // 5
- Proxy ve Reflect: Nesne işlemlerini özelleştirin:
const kisi = new Proxy({ ad: 'Ali' }, {
get(target, prop) {
return prop in target ? target[prop] : 'Bilinmiyor';
}
});
console.log(kisi.ad); // Ali
console.log(kisi.yas); // Bilinmiyor
- WebAssembly Entegrasyonu: Performans kritik işlemler için WebAssembly kullanın:
WebAssembly.instantiateStreaming(fetch('modul.wasm')).then(({ instance }) => {
console.log(instance.exports.topla(5, 3)); // WebAssembly fonksiyonu
});
Sonuç
JavaScript, web geliştirmenin vazgeçilmez bir parçasıdır. Temel syntax'tan asenkron programlamaya, framework entegrasyonlarından güvenlik ve performansa kadar geniş bir yelpazede beceriler sunar. Bu rehber, hem yeni başlayanlar hem de ileri seviye geliştiriciler için kapsamlı bir kaynak olmayı amaçlamaktadır. Uygulamalı örnekler ve tutorial ile öğrendiklerinizi pekiştirebilir, kendi projelerinizi geliştirebilirsiniz.