Yeni başlayanlar için JavaScript

JavaScript tam olarak ne işe yarar?

Sayfa açıldıktan sonra olan her şey için. JavaScript, her tarayıcının yerel olarak çalıştırdığı tek dildir ve işi, HTML'in kurduğu ve CSS'in boyadığı sayfayı canlandırmaktır.

Sayfanın üstündeki şekil üç dişlidir ve bu iş bölümünü gösterir. HTML bunun bir başlık, şunun bir düğme olduğunu söyler; CSS düğmenin rengini söyler; JavaScript de birisi ona bastığında ne olacağını söyler.

Yalnızca JavaScript'in yapabildiği dört iş var: sayfa yüklendikten sonra ziyaretçinin yaptığına tepki vermek, şu anda ekranda olan bir şeyi değiştirmek, sayfayı yeniden yüklemeden sunucuyla konuşmak ve bir şeyi bir dahaki sefere kadar tarayıcının kendisinde tutmak. JavaScript gerektirdiğini düşündüğünüz başka her şeyi bir kez daha kontrol etmeye değer; bu dersin altıncı bölümü somut bir listeyle oraya dönüyor.

Bir de onun işi olmayan ve yeni başlayanların sık karıştırdığı bir iş var: tarayıcıda çalışan JavaScript bir sunucu programı değildir. Bir siparişi kaydetmek, e-posta göndermek ve parola denetlemek sunucuda olur. Tarayıcı kodu yalnızca isteği gönderir.

Kodu nereye yazarız ve sayfaya nasıl bağlarız?

Ayrı bir .js dosyasında; sayfaya head içindeki tek satırla bağlanır:

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

Bu bölümde öğreneceğiniz en önemli şey o defer kelimesidir. Anlamı şu: dosyayı HTML okunurken indir, ama çalıştırmayı sayfa tümüyle kurulana kadar beklet. O olmadan head içindeki bir betik öğeler var olmadan çalışır ve bir düğmeyi bulma girişimi null döner. Yeni başlayanların en yaygın "neden çalışmıyor" sorusu budur ve yanıtı tek kelimedir.

İkinci aracınız tarayıcı konsoludur. F12 ile açın ve açık tutun: her JavaScript hatası satır numarasıyla oraya yazılır ve console.log istediğiniz her şeyi size gösterir. Konsolu açmadıkça karanlıkta kod yazıyorsunuz.

const title = document.querySelector("h1");
console.log(title.textContent);

Değişkenler için: değerin değişmesi gerektiğini bilmiyorsanız const, biliyorsanız let yazın. var kelimesi JavaScript'in önceki bir döneminden kalmadır ve yeni kodda yazmak için bir sebep yoktur.

DOM nedir ve neden her şey oradan başlar?

Tarayıcı HTML'inizi okurken ondan bellekte bir nesne ağacı kurar. Bu ağaca DOM denir ve JavaScript dosyanız üzerinde değil onun üzerinde çalışır. Bu yüzden kodla bir şeyi değiştirdiğinizde sayfa anında güncellenirken diskteki dosya olduğu gibi kalır; bir yenileme her şeyi geri getirir.

Bir öğeyi bulmak tek bir fonksiyon ister ve biri yeter. document.querySelector CSS ile aynı seçicileri alır:

const btn  = document.querySelector(".btn");
const rows = document.querySelectorAll(".row");

Bulduktan sonra üç günlük işiniz var. Metni textContent ile değiştirir, sınıfları classList ile ekleyip kaldırır, öznitelikleri setAttribute ile ayarlarsınız.

btn.textContent = "Kaydedildi";
btn.classList.add("is-done");

Bunların arasında ilk günden doğru öğrenmeye değer bir karar var. textContent verdiğiniz şeyi düz metin sayar; innerHTML ise onu işaretleme sayar ve işletir. Eklediğiniz metin bir kullanıcıdan geldiyse, o kullanıcıya sayfanıza etiket yazma imkânı vermişsiniz demektir. Kural basit: gerçekten HTML kurmuyorsanız textContent kullanın.

Bir de işi temiz tutan bir alışkanlık: renkleri ve boyutları JavaScript'ten değiştirmek yerine bir sınıf ekleyin ve görünümü CSS çizsin. JavaScript durumu değiştirir, CSS o durumu gösterir.

Olaylar: ziyaretçi bir şey yaptığında

Ziyaretçinin yaptığı her şey bir olay üretir: tıklama, yazma, form gönderme, kaydırma. Hangi öğede hangi olayı istediğinizi ve hangi fonksiyonun çalışacağını tarayıcıya siz söylersiniz:

btn.addEventListener("click", function () {
  console.log("someone pressed it");
});

İşte gerçekten çalışan ve HTML ile CSS'te mümkün olmayan tam bir örnek: bir metin alanının altındaki karakter sayacı.

<label for="msg">Mesajınız</label>
<textarea id="msg" maxlength="200"></textarea>
<p id="left">200</p>

const box  = document.querySelector("#msg");
const left = document.querySelector("#left");

box.addEventListener("input", function () {
  left.textContent = 200 - box.value.length;
});

Beş satır ve bu beş satıra sığmış birkaç nokta. keyup yerine input olayını seçtik, çünkü keyup yalnızca klavyeyi dinler ve fareyle ya da telefondan yapıştırılan metni kaçırır. value alanın o anki içeriği, length ise uzunluğudur. Sınırlamayı etiketin üzerindeki maxlength yapar; JavaScript yalnızca sayıyı gösterir.

Formlarda bir olay daha gerekir. Gönderimi kendiniz yönetmek istiyorsanız tarayıcının varsayılan davranışını durdurmanız gerekir:

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

Sonraki şekil bu döngüyü adım adım gösteriyor. Orada önemli olan son adımdır: DOM'u siz değiştirirsiniz, sayfayı yeniden çizmek tarayıcının işidir, sizin değil.

fetch: sayfayı yeniden yüklemeden veri almak

Buraya kadar her şey sayfanın içinde oluyordu. fetch, sayfanın dışarıyla konuştuğu yerdir: bir adresi çağırırsınız, sunucu yanıtlar ve yanıtı sayfaya koyarsınız. Sayfa yeniden yüklenmeden.

async function loadPrice() {
  const res  = await fetch("/api/price.json");
  const data = await res.json();
  document.querySelector("#price").textContent = data.toman;
}

await kelimesi, yanıtı bekle ve ancak ondan sonra bir sonraki satırı çalıştır demektir ve yalnızca async işaretli bir fonksiyonun içinde anlam taşır. JavaScript'in gerçekten zorlaştığı ilk yer burasıdır, çünkü işler artık satır satır arka arkaya değildir. İlk gün buraya kadar geldiyseniz yeter; gerisi bekleyebilir.

Vakit kaybetmemek için şimdiden üç şeyi bilin. Birincisi, çağırdığınız adres gerçekten var olmalı ve yanıt vermelidir; konsoldaki Network sekmesi isteğin gidip gitmediğini ve hangi kodun döndüğünü gösterir. İkincisi, adres başka bir alan adına aitse, o sunucu izin vermedikçe tarayıcı yanıtı okumanızı engeller. Üçüncüsü ve en önemlisi: bu kod ziyaretçinin tarayıcısında çalışır ve o kişi kodun tamamını okuyabilir. Bu dosyada hiçbir anahtarın ve parolanın yeri yoktur.

Gerçekte ne kadar JavaScript gerekiyor?

Düşündüğünüzden az ve bu bir tercih değil, bizim konumumuz. Yeni başlayanların JavaScript ile yaptığının büyük bölümünü bugün HTML ile CSS kendisi yapıyor; daha iyi ve daha az kodla:

• bir bölümü details ve summary ile açıp kapatmak, tek satır kod olmadan
• alanın kendisindeki required ve type="email" ile temel form doğrulaması
• loading="lazy" ile görsellerin tembel yüklenmesi
• dialog öğesiyle bir kalıcı pencere
• CSS'teki hover, focus-visible ve has ile öğe durumuna tepki
• scroll-snap ile yatay kaydırıcı; parmakla da doğru davranır

Bu neden önemli: her JavaScript dosyası indirilmeli, ayrıştırılmalı ve çalıştırılmalıdır; çalıştırma da kullanıcının dokunuşuna yanıt veren aynı iş parçacığında olur. Kod çalışırken sayfa kimsenin parmağına yanıt vermez. Ağır bir görsel kaliteyi düşürür; ağır JavaScript sayfayı yavaşlatır. Bunun gerçek site hızına ne yaptığını görmek isterseniz site hızı sayfası ve hız yolunun dersleri bunu ölçümlerle gösteriyor.

Şimdi bu iddianın sınırı; her önerinin bir sınırı vardır. Kurduğunuz şey bir içerik sitesi değil de bir ürünse, bir gösterge paneli, bir düzenleyici ya da canlı bir sohbetse, gerçekten bolca JavaScript gerekir ve bunda yanlış bir şey yoktur. Bizim konuştuğumuz şey kurumsal siteler, sade mağazalar ve bloglar: orada yazmadığınız her kilobayt kazançtır.

Bu sayfadan bir örnek: bu derste gördüğünüz şekiller sıfır satır JavaScript ile çizildi. HTML ve CSS, hepsi bu.