JavaScript Nedir? Ne İşe Yarar ve Nasıl Öğrenilir?

İnternette gezinirken bir butona tıkladığınızda menünün açılması, bir formu doldururken anlık uyarılar almanız veya sayfayı yenilemeden yeni içeriklerin yüklenmesi oldukça sıradan görünebilir. Ancak bu işlemlerin arkasında çoğu zaman JavaScript bulunur.

Günümüzde web sitelerinin yalnızca bilgi gösteren statik sayfalardan ibaret olmadığını düşünürsek JavaScript'in neden bu kadar önemli olduğunu anlamak zor değil. Kullanıcıların etkileşim kurabildiği, verilerin anlık olarak değiştiği ve farklı işlemlerin tarayıcı üzerinden gerçekleştirilebildiği web uygulamalarının önemli bir bölümü bu dilin sunduğu imkânlardan yararlanıyor.

Peki JavaScript tam olarak nedir, nasıl çalışır ve yazılım geliştirmeye yeni başlayan biri bu dili öğrenmeye nereden başlamalı?

JavaScript Nedir?

JavaScript, web sayfalarına etkileşim ve dinamik özellikler kazandırmak için kullanılan bir programlama dilidir. İlk olarak tarayıcı ortamında çalışacak şekilde geliştirilmiş olsa da zaman içerisinde kullanım alanı oldukça genişlemiştir.

Bir web sitesinde açılır menü oluşturmak, form verilerini kontrol etmek, görselleri değiştirmek veya kullanıcı işlemlerine göre sayfanın belirli bölümlerini güncellemek JavaScript ile gerçekleştirilebilir.

HTML bir sayfanın yapısını, CSS görünümünü oluştururken JavaScript davranışları ve etkileşimleri yönetir.

Örneğin bir web sayfasında bulunan butona basıldığında ekranda bir mesaj gösterilmesini istediğinizi düşünelim. Bu işlemi JavaScript ile birkaç satır kod kullanarak gerçekleştirebilirsiniz.

JavaScript'in önemli özelliklerinden biri de tarayıcıların büyük çoğunluğunda doğrudan çalışabilmesidir. Kullanıcının ayrıca bir program kurmasına gerek kalmadan kodlar tarayıcının JavaScript motoru tarafından çalıştırılır.

JavaScript Ne İşe Yarar?

JavaScript'in kullanım alanı yalnızca basit animasyonlar veya buton işlemleriyle sınırlı değildir. Günümüzde küçük web sayfalarından kapsamlı uygulamalara kadar çok farklı projelerde kullanılmaktadır.

En yaygın kullanım alanlarından bazıları şunlardır:

Dinamik web sayfaları: Sayfa içerisindeki içerikler kullanıcı hareketlerine göre değiştirilebilir. Açılır menüler, sekmeler ve etkileşimli bileşenler hazırlanabilir.

Form doğrulama: Kullanıcının girdiği bilgiler kontrol edilebilir. Eksik veya hatalı alanlar için anlık uyarılar gösterilebilir.

Veri alışverişi: Sunucudan veri alınabilir veya sunucuya bilgi gönderilebilir. Böylece sayfanın tamamını yenilemeden belirli içerikler güncellenebilir.

Animasyonlar: Geçiş efektleri, hareketli grafikler ve çeşitli görsel etkileşimler oluşturulabilir.

Web uygulamaları: Yönetim panelleri, içerik editörleri, çevrim içi araçlar ve etkileşimli uygulamalar geliştirilebilir.

Oyun geliştirme: Tarayıcı üzerinden oynanabilen basit veya gelişmiş oyunlar hazırlanabilir.

JavaScript'in bu kadar yaygın kullanılmasının önemli nedenlerinden biri, tarayıcı tarafında çalışmasının yanında sunucu tarafında da kullanılabilmesidir.

JavaScript Nasıl Çalışır?

JavaScript kodları, tarayıcıların içerisinde bulunan JavaScript motorları tarafından çalıştırılır. Örneğin Google Chrome V8 motorunu kullanırken Firefox SpiderMonkey motorundan yararlanır.

Tarayıcı bir web sayfasını yüklediğinde HTML ve CSS dosyalarının yanında JavaScript dosyalarını da işleyebilir.

JavaScript kodları doğrudan HTML içerisine yazılabileceği gibi ayrı dosyalarda da tutulabilir.

Basit bir örnek inceleyelim:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Örneği</title>
</head>
<body>

    <h2 id="mesaj">Merhaba Dünya</h2>

    <button id="degistir">
        Tıkla
    </button>

    <script>
        document.getElementById("degistir")
            .addEventListener("click", function () {

                document.getElementById("mesaj").textContent =
                    "JavaScript çalışıyor!";
            });
    </script>

</body>
</html>

Bu örnekte kullanıcı butona bastığında başlık metni değişir.

Kodun çalışma mantığı oldukça basittir. Önce buton seçilir, ardından tıklama olayı dinlenir. Kullanıcı butona bastığında ilgili fonksiyon çalıştırılır ve sayfadaki metin güncellenir.

Burada kullanılan addEventListener() JavaScript'in önemli özelliklerinden biridir. Kullanıcı hareketlerini veya tarayıcı olaylarını dinleyerek belirli işlemlerin gerçekleştirilmesini sağlar.

JavaScript Değişkenleri ve Veri Tipleri

JavaScript öğrenmeye başlayanların ilk karşılaştığı konulardan biri değişkenlerdir.

Değişkenler, program içerisinde kullanılacak bilgileri saklamak için kullanılır. Örneğin bir kullanıcının adını, ürün fiyatını veya işlem sonucunu bir değişken içerisinde tutabilirsiniz.

JavaScript'te değişken tanımlamak için let, const ve eski kodlarda karşılaşabileceğiniz var kullanılır.

let kullanici = "Ahmet";
let yas = 28;

const siteAdi = "Örnek Blog";

console.log(kullanici);
console.log(yas);
console.log(siteAdi);

Burada let ile değeri daha sonra değiştirilebilen değişkenler, const ile yeniden değer ataması yapılamayan değişkenler tanımlanmıştır.

JavaScript farklı veri tiplerini destekler:

String: Metinsel veriler.
Number: Sayısal değerler.
Boolean: Doğru veya yanlış değerleri.
Undefined: Henüz değer atanmamış değişkenler.
Null: Bilinçli olarak boş bırakılan değer.
Object: Birden fazla bilgiyi bir arada tutabilen nesneler.
BigInt: Çok büyük tam sayıları temsil eden veri tipi.

Bu temel yapıların öğrenilmesi, daha karmaşık JavaScript uygulamalarını anlamayı kolaylaştırır.

JavaScript Fonksiyonları Nedir?

Fonksiyonlar, belirli bir işlemi gerçekleştirmek için hazırlanan ve ihtiyaç duyulduğunda tekrar çalıştırılabilen kod bloklarıdır.

Örneğin bir web sitesinde ürün fiyatını hesaplayan, kullanıcının giriş bilgilerini kontrol eden veya belirli bir mesajı ekrana yazdıran fonksiyonlar oluşturabilirsiniz.

function toplama(sayi1, sayi2) {
    return sayi1 + sayi2;
}

const sonuc = toplama(15, 25);

console.log(sonuc);

Bu örnekte iki sayıyı toplayan bir fonksiyon tanımlanmıştır. Fonksiyona gönderilen değerler toplanır ve sonuç geri döndürülür.

Fonksiyonlar sayesinde aynı kodu farklı yerlerde yeniden yazmak zorunda kalmazsınız. Özellikle büyük projelerde kodun daha düzenli ve yönetilebilir olmasına yardımcı olurlar.

DOM Nedir? JavaScript ile HTML Nasıl Değiştirilir?

JavaScript'in web geliştirmedeki en önemli kullanım alanlarından biri DOM olarak bilinen Document Object Model yapısıdır.

DOM, tarayıcının HTML belgesini programlama yoluyla erişilebilir bir nesne yapısına dönüştürmesini sağlar. Böylece JavaScript üzerinden sayfadaki elementleri seçebilir, değiştirebilir, silebilir veya yenilerini oluşturabilirsiniz.

Örneğin bir ürün listesine yeni ürün eklemek istediğinizi düşünelim.

<ul id="urunler">
    <li>Klavye</li>
    <li>Mouse</li>
</ul>

<button onclick="urunEkle()">Yeni Ürün Ekle</button>

<script>
function urunEkle() {

    const liste = document.getElementById("urunler");

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

    yeniUrun.textContent = "Monitör";

    liste.appendChild(yeniUrun);
}
</script>

Bu örnekte butona basıldığında listeye yeni bir ürün eklenir.

DOM işlemleri özellikle yönetim panellerinde, ürün listeleme sayfalarında ve kullanıcı etkileşiminin yoğun olduğu web uygulamalarında oldukça önemlidir.

JavaScript ile Sayfa Yenilemeden Veri Almak

Modern web sitelerinde kullanıcıların her işlem sonrasında sayfanın yeniden yüklenmesini beklemesi istenmez.

Örneğin bir arama alanına ürün ismi yazıldığında sonuçların otomatik olarak listelenmesi veya bir butona basıldığında sunucudan yeni bilgi alınması gerekebilir.

JavaScript içerisinde bulunan Fetch API bu tür işlemlerin gerçekleştirilmesini sağlar.

Basit bir örnek:

async function veriGetir() {

    try {
        const response = await fetch(
            "https://jsonplaceholder.typicode.com/posts/1"
        );

        if (!response.ok) {
            throw new Error("Veri alınamadı.");
        }

        const data = await response.json();

        console.log(data);

    } catch (error) {

        console.error("Hata:", error);

    }
}

veriGetir();

Bu kod belirtilen adrese HTTP isteği gönderir ve dönen JSON verisini JavaScript nesnesine dönüştürür.

Burada kullanılan async ve await ifadeleri, asenkron işlemlerin daha okunabilir şekilde yazılmasını sağlar.

Fetch API özellikle API servisleriyle çalışan web uygulamalarında sık kullanılan araçlardan biridir.

JavaScript Kütüphaneleri ve Framework'leri Nelerdir?

JavaScript öğrenirken bir süre sonra kütüphane ve framework kavramlarıyla karşılaşmak kaçınılmazdır.

Bunlar geliştiricilerin daha hızlı ve düzenli uygulamalar oluşturmasına yardımcı olan araçlardır.

React: Kullanıcı arayüzleri geliştirmek için kullanılan popüler bir JavaScript kütüphanesidir. Bileşen tabanlı yapısı sayesinde büyük arayüzlerin yönetilmesini kolaylaştırır.

Vue.js: Öğrenmesi nispeten kolay olan ve kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript framework'üdür.

Angular: Özellikle kapsamlı ve kurumsal web uygulamalarında tercih edilen bir framework'tür.

jQuery: DOM işlemlerini, olay yönetimini ve tarayıcılar arası bazı farklılıkları kolaylaştırmak amacıyla geliştirilmiş bir JavaScript kütüphanesidir. Günümüzde birçok eski projede hâlâ kullanılmaktadır.

Bu araçların tamamını aynı anda öğrenmeye çalışmak yerine önce temel JavaScript bilgilerini edinmek çok daha doğru bir yaklaşımdır.

JavaScript ile Node.js Arasındaki İlişki

JavaScript başlangıçta ağırlıklı olarak tarayıcılar üzerinde çalışıyordu. Node.js ile birlikte sunucu tarafında da kullanılabilmeye başladı.

Node.js, JavaScript kodlarının tarayıcı dışında çalıştırılmasını sağlayan bir çalışma ortamıdır.

Bu sayede JavaScript kullanarak web sunucuları, API servisleri, otomasyon araçları ve çeşitli komut satırı uygulamaları geliştirilebilir.

Örneğin küçük bir HTTP sunucusu oluşturmak için aşağıdaki kod yeterlidir:

const http = require("node:http");

const server = http.createServer((req, res) => {

    res.writeHead(200, {
        "Content-Type": "text/plain; charset=utf-8"
    });

    res.end("Node.js sunucusu çalışıyor!");

});

server.listen(3000, () => {
    console.log("Sunucu 3000 portunda hazır.");
});

Bu uygulama çalıştırıldığında yerel bilgisayarınızda 3000 portundan yanıt veren basit bir HTTP sunucusu oluşturulur.

Node.js sayesinde JavaScript yalnızca tarayıcı tarafındaki işlemlerle sınırlı kalmaz.

JavaScript Öğrenmek Zor mu?

JavaScript'in temel seviyesini öğrenmek, programlamaya yeni başlayan biri için ulaşılabilir bir hedeftir. Ancak iyi bir JavaScript geliştiricisi olmak yalnızca değişkenleri ve fonksiyonları bilmekten ibaret değildir.

Özellikle asenkron programlama, nesne yapıları, kapsam (scope), prototipler ve hata yönetimi gibi konuların anlaşılması biraz daha fazla pratik gerektirir.

Öğrenme sürecinde şu sırayı takip etmek faydalı olabilir:

Değişkenler ve veri tipleri.
Koşullar ve döngüler.
Fonksiyonlar ve diziler.
Nesneler ve temel programlama mantığı.
DOM ve olay yönetimi.
ES6 ve modern JavaScript özellikleri.
Promise, async ve await.
Fetch API ve JSON işlemleri.
Modüller ve proje geliştirme.

Öğrendiklerinizi küçük uygulamalara dönüştürmek, yalnızca video veya doküman okumaktan çok daha etkili olacaktır.

JavaScript Öğrenmek İçin Hangi Kaynaklar Kullanılabilir?

JavaScript öğrenmek isteyenler için internette çok sayıda ücretsiz kaynak bulunuyor.

MDN Web Docs, JavaScript'in temel özelliklerinden tarayıcı API'lerine kadar geniş bir dokümantasyon sunuyor. Özellikle belirli bir fonksiyonun nasıl çalıştığını öğrenmek için başvurulabilecek güvenilir kaynaklardan biri.

JavaScript.info ise temel seviyeden başlayarak daha ileri konulara uzanan kapsamlı dersler içeriyor.

ECMAScript standardı da dilin resmî özelliklerinin tanımlandığı teknik kaynaktır. Güncel dil özelliklerini anlamak isteyen geliştiriciler için önemli bir referanstır.

Kaynak seçerken yalnızca teorik anlatımlara bağlı kalmamak gerekiyor. Her yeni konudan sonra küçük bir uygulama hazırlamak öğrenilen bilgilerin pekişmesini sağlar.

Bu dili öğrenmek isteyenlerin öncelikle temel programlama mantığını kavraması, ardından DOM, asenkron işlemler ve API kullanımı gibi konulara yönelmesi daha sağlıklı olacaktır.