koddla

Yazılımcıları bilgi ile güçlendirir.

JavaScript temel bilgileri

JavaScript, web sitenize etkileşim ekleyen bir programlama dilidir. Bu, oyunlarda, butonlara basıldığında yanıtların davranışında veya formlardaki veri girişiyle olur; ya da dinamik stil ile animasyon vb. ekleyerek. Bu makale JavaScript’i (JS) kullanmaya başlamanıza yardımcı olacak ve JavaScript ile neyin mümkün olduğunu anlamanızı sağlayacak.

JavaScript nedir?

JavaScript (“Kısaca JS”), bir web sitesine etkileşim ekleyebilen tam teşekküllü dinamik bir programlama dilidir. Brendan Eich (Mozilla projesinin, Mozilla Vakfı’nın ve Mozilla Corporation’ın kurucu ortağı) tarafından icat edilmiştir.

JavaScript çok yönlü ve acemi dostudur. Deneyim kazandıkça oyunlar, animasyonlu 2D ve 3D grafikler, kapsamlı veritabanı odaklı uygulamalar ve çok daha fazlasını oluşturabileceksiniz!

JavaScript’in kendisi nispeten kompaktır, ancak çok da esnektir. Geliştiriciler, temel JavaScript dilinin üzerine çeşitli araçlar yazarak minimum çabayla çok miktarda işlevselliğin kilidini açtılar. Bunlardan bazıları şunlardır:

  • Tarayıcı Uygulama Programlama Arabirimleri (API’ ler) HTML’yi dinamik olarak oluşturma ve CSS stillerini ayarlama gibi işlevler sağlar; kullanıcının web kamerasından video akışı toplamak ve işlemek veya 3D grafikler ve ses örnekleri oluşturmak gibi fonksiyonları vardır.
  • Geliştiricilerin Twitter veya Facebook gibi diğer içerik sağlayıcıların sitelerine işlevsellik eklemesine izin veren üçüncü taraf API’ler.
  • Uygulamaların çalışmalarını hızlandırmak için HTML’ye uygulayabileceğiniz yapı ve kütüphaneler.

Bu özellikler ileri düzey olsa da endişelenmeyin. Aşağıdaki bölüm temel dilin bazı yönlerini tanıtacak ve birkaç tarayıcı API özelliğiyle de oynama fırsatı sunacak. İyi eğlenceler!

Merhaba dünya!

JavaScript en popüler modern web teknolojilerinden biridir! JavaScript becerileriniz geliştikçe, web siteleriniz yeni bir güce ve yaratıcılığa kavuşacaktır.

Ancak, JavaScript ile rahat olmak, HTML ve CSS ile rahat etmekten daha zordur. Küçük bir başlangıç yapmak ve yavaş yavaş ilerlemek zorunda kalabilirsiniz. Başlangıç olarak, Hello world! örneği oluşturmak için sayfanıza JavaScript’i nasıl ekleyeceğinizi inceleyelim. (Merhaba dünya! programlamaya giriş için standart bir programlama örneğidir.)

Önemli: Kursumuzun geri kalanıyla birlikte takip etmiyorsanız, bu örneği indirin ve başlangıç noktası olarak kullanın.

  1. Test sitenize gidin ve scripts klasörü oluşturun. Bu klasörde, main.js adlı yeni bir dosya oluşturun ve kaydedin.
  2. index.html dosyanıza aşağıdaki kodu </body> kapanış etiketinden hemen önce yeni bir satırda ekleyin: 
    <script src="scripts/main.js"></script>
  3. Bu, CSS’de gördüğümüz <link> ile aynı işi yapıyor. JavaScript’i sayfaya uyguluyor ve böylece HTML üzerinde bir etki oluşturuyor.
  4. Bu kodu dosyaya ekleyin: 
const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';
  1. HTML ve JavaScript dosyalarının kaydedildiklerinin emin olun. Ardından index.html‘i tarayıcınızda açın. Şöyle bir şey görmelisin:

Not: <script> öğesini html dosyasının altına yerleştirmemizin nedeni, tarayıcının kodu dosyada göründüğü sırayla okumasıdır.

JavaScript önce yüklenirse ve henüz yüklenmemiş HTML’yi etkilemesi gerekiyorsa, sorunlar olabilir. JavaScript’i bir HTML sayfasının altına yerleştirmek, bu bağımlılığı karşılamanın bir yoludur.

Ne oldu?

Başlık metni JavaScript kullanılarak Hello world! olarak değiştirildi. Bunu, başlığınıza bir başvuru almak ve sonra myHeading adlı bir değişkende depolamak için çağrılan querySelector() adlı bir işlev kullanarak yaptınız. Bu, CSS seçicileri kullanarak yaptığımıza benzer. Bir öğeye bir şey yapmak istediğinizde, önce onu seçmeniz gerekir.

Bundan sonra, kod, değişkenin değerini Hello world! olarak ayarlar.

Not: Bu alıştırmada kullandığınız özelliklerin her ikisi de belgeleri işleme yeteneğine sahip Belge Nesne Modeli (DOM) API’sinin parçalarıdır.

Dil temelleri hızlı kursu

JavaScript’in nasıl çalıştığını daha iyi anlamanızı sağlamak için dilin bazı temel özelliklerini açıklayalım. Bu özelliklerin tüm programlama dillerinde ortak olduğunu belirtmek gerekir. Bu temellere hakimseniz, diğer dillerde de kodlamaya başlarsınız!

Önemli: Bu makalede, neler olduğunu görmek için JavaScript konsolunuza örnek kod satırlarını girmeyi deneyin.

Değişken

Değişkenler değerleri depolayan kapsayıcılardır. Değişkene var veya let anahtar sözcüklerinin ardından değişkene verdiğiniz ismi bildirerek başlarsınız:

let myVariable;

Not: Satırın sonundaki noktalı virgül, deyimin nerede bittiğini gösterir. Yalnızca ifadeleri tek bir satırda yazmanız gerektiğinde önemlidir. Ancak, bazılarımız her ifadenin sonunda noktalı virgül olmasının iyi bir uygulama olduğuna inanır. Noktalı virgül kullanmanız ve kullanmamanız gereken başka kurallar da vardır.

Not: Bir değişkeni neredeyse herhangi bir şekilde adlandırabilirsiniz, ancak bazı kısıtlamalar vardır. (Adlandırma kurallarıyla ilgili bu bölüme bakın.)

Not: JavaScript büyük/küçük harf duyarlıdır. Bu, myVariable ile myvariable aynı olmadığı anlamına gelir. Kodunuzda sorun varsa, isimleri kontrol edin!

Bir değişkeni beyan ettikten sonra, ona bir değer verebilirsiniz:

myVariable = 'Bob';

Ayrıca, bu işlemlerin her ikisini de aynı satırda yapabilirsiniz:

let myVariable = 'Bob';

Değişken adını çağırarak değeri alırsınız:

myVariable;

Bir değişkene değer atadıktan sonra, daha sonra kodda değiştirebilirsiniz:

let myVariable = 'Bob';
myVariable = 'Steve';

Değişkenlerin farklı veri türlerine sahip değerleri tutabileceğini unutmayın:

DeğişkenAçıklamaÖrnek
DizgiBu, dize olarak bilinen bir metin dizisidir. Değerin bir dize olduğunu belirtmek için, tırnak işaretleri içine alın.let myVariable = 'Bob';
SayıBu bir sayı. Sayıların etrafında tırnak işaretleri olmaz.let myVariable = 10;
BooleanBu bir Doğru/Yanlış değeridir. Sözcükler ve tırnak işaretine ihtiyaç duymayan özel anahtar kelimelerdir.let myVariable = true;
DiziBu, birden çok değeri tek bir başvuruda depolamanıza olanak tanıyan bir yapıdır.let myVariable = [1,'Bob','Steve',10];

Dizinin her üyesine şu şekilde
ulaşabilirsiniz:
myVariable[0], myVariable[1], vb
NesneBu her şey olabilir. JavaScript’teki her şey bir nesnedir ve bir değişkende saklanabilir. Öğrenirken bunu aklınızda bulundurun.let myVariable = document.querySelector('h1');

Peki neden değişkenlere ihtiyacımız var? Programlamada ilginç bir şey yapmak için değişkenler gereklidir. Değerler değiştiremezse, bir tebrik iletisini kişiselleştirmek veya resim galerisinde görüntülenen bir görüntüyü değiştirmek gibi dinamik bir şey yapamazsınız.

Yorumlar

Açıklamalar, kodla birlikte eklenebilen metin parçacıklarıdır. Tarayıcı, açıklama olarak işaretlenmiş metni yoksayar. CSS’de olduğu gibi JavaScript’te de yorum yazabilirsiniz:

/*
Burada her şey yorum.
*/

Yorumunuz tek satırdaysa, bunu aşağıdaki gibi iki eğik çizginin arkasına koymayı da seçebilirsiniz:

// This is a comment

Operatör

Operatörler iki değere (veya değişkenlere) dayalı sonuç üreten matematiksel sembollerdir. Aşağıdaki tabloda, JavaScript konsolunda deneyebileceğiniz bazı örneklerin yanı sıra en basit operatörlerden bazılarını görebilirsiniz.

OperatörAçıklamaSembolÖrnek
İlaveİki sayıyı bir araya getirin veya iki dizeyi birleştirin.+6 + 9;
'Hello ' + 'world!';
Çıkarma, Çarpma, BölmeBunlar temel matematikte ne yapmalarını bekliyorsanız onu yaparlar.-, , */9 - 3;
8 * 2;
9 / 3;
AtamaDaha önce de gördüğünüz gibi: bu bir değişkene değer atar.=let myVariable = 'Bob';
EşitlikBu, iki değerin eşit olup olmadığını görmek için bir test gerçekleştirir. Bir / (Boolean) sonucu döndürür.true/false===let myVariable = 3;
myVariable === 4;
Hayır, eşit değilBu, zıt değerini döndürür. Eşitlik işlecinin yanında kullanıldığında, olumsuzlama işleci iki değerin eşit olup olmadığını sınar. true/false!!==

Keşfedilecek çok daha fazla operatör var, ancak bu şimdilik yeterli. Tam liste için İfadeler ve işleçler’e bakın.

Not:Veri türlerini karıştırmak, hesaplamalar yaparken bazı garip sonuçlara yol açabilir. Değişkenlerinize doğru şekilde atıfta bulunduğunuza ve beklediğiniz sonuçları almaya dikkat edin. Örneğin, '35' + '25' ifadesiniz konsolunuza girin. Neden beklediğin sonucu almıyorsunuz? Tırnak işaretleri sayıları dizelere dönüştürdüğünden, sayı eklemek yerine dizeleri birleştirmeyi bitirdiniz. 35 + 25 girerseniz, iki sayının toplamını alırsınız.

Koşullular

Koşullular, bir ifadenin doğru dönüp dönmediğini test etmek için kullanılan kod yapılarıdır. if ... else

let iceCream = 'chocolate';
if(iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

if( ... ) içindeki ifade testtir. Burada iceCream ve chocolate dizgisinin ikisinin eşit olup olmadığını görmek için kimlik işlecini (yukarıda açıklandığı gibi) kullanıyoruz. Bu karşılaştırma true sonucunu döndürürse, ilk kod bloğu çalışır. Karşılaştırma doğru değilse, bunun yerine ikinci kod bloğu ( else deyiminden sonra) çalışır.

Fonksiyonlar

Fonksiyonlar yeniden kullanmak istediğiniz işlevselliği paketlemenin bir yoludur. Kodunuzda o işlevin adını çağırdığınızda yürütülen kod parçası tanımlamak mümkündür. Bu, aynı kodu tekrar tekrar yazmamak için iyi bir yöntemdir. İşlevlerin bazı kullanımlarını daha önce zaten gördünüz. Mesela:

  1. let myVariable = document.querySelector('h1');
  2. alert('hello!');

Bu işlevler, document.querySelector ve alert, tarayıcıda yerleşiktir.

Değişken bir ada benzeyen bir şey görürseniz, ancak bunu parantez izlerse bu büyük olasılıkla bir fonksiyondur. İşlevler genellikle argüman olarak bağımsız değişkenler alır: bunlar foksiyonların işlerini yapmak için ihtiyaç duydukları verilerdir. Bağımsız değişkenler parantez içine girer ve birden fazla bağımsız değişken varsa virgülle ayrılır.

Örneğin, alert() fonksiyonu tarayıcı penceresinin içinde bir açılır kutu görünmesini sağlar, ancak işleve hangi iletinin görüntüleneceğini söylemek için bağımsız değişken olarak bir dize vermemiz gerekir.

Kendi işlevlerinizi de tanımlayabilirsiniz. Bir sonraki örnekte, iki sayıyı bağımsız değişken olarak alan ve çoğaltan basit bir işlev oluşturuyoruz:

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
}

Bunu konsolda çalıştırmayı deneyin; daha sonra birkaç bağımsız değişkenle sınayın. Mesela:

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

NotReturn deyimi, tarayıcıya değişkeni fonksiyondan geri almasını – döndürmesini söyler, böylece sonuç kullanılabilir hale gelir. Çünkü işlevlerin içinde tanımlanan değişkenler yalnızca bu işlevlerin içinde kullanılabilir. Buna değişken kapsamı adı verilir. 

Olay – Event

Bir web sitesindeki gerçek etkileşim, olay işleyicileri gerektirir. Bunlar, tarayıcıdaki etkinliği dinleyen ve yanıt olarak kod çalıştıran kod yapılarıdır. En belirgin örnek, farenizle bir şeye tıkladığınızda tarayıcı tarafından ateşlenen tıklama olayını işlemektir. Bunu göstermek için konsolunuza aşağıdakileri girin ve geçerli web sayfasını tıklatın:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Bir öğeye olay işleyicisi eklemenin birçok yolu vardır. Burada <html> seçerek, onclick özelliğini bir fonksiyona eşit olarak ayarlıyoruz.

Not:

document.querySelector('html').onclick = function() {};

aşağıdakine eşdeğerdir

let myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Sadece daha kısadır.

Örnek web sitemizi ateşleme

JavaScript temelleri ile örnek sitemize bazı yeni özellikler ekleyelim.

Daha ileri gitmeden önce, main.js dosyanızın geçerli içeriğini (“Merhaba dünya!” örneği sırasında daha önce eklediğinizi) silin ve boş dosyayı kaydedin. Bunu yapmazsanız, varolan kod eklemek üzere olduğunuz yeni kodla çakışır.

Görüntü değiştirici ekleme

Bu bölümde, iki görüntüden birinin görüntülenmesini değiştirmek için JavaScript ve DOM API özelliklerinin nasıl kullanılacağını öğreneceksiniz. Bu değişiklik, kullanıcı görüntülenen görüntüyü tıklattıkça gerçekleşir.

  1. Örnek sitenizde öne çıkarmak istediğiniz resmi seçin. İdeal olarak, görüntü daha önce eklediğiniz görüntüyle aynı boyutta veya mümkün olduğunca yakın olmalı.
  2. Bu resmi images klasörünüze kaydedin.
  3. Resmi yeniden adlandırın: firefox2.png.
  4. Aşağıdaki JavaScript’i dosyanıza ekleyin. 
let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src','images/firefox2.png');
    } else {
      myImage.setAttribute('src','images/firefox-icon.png');
    }
}
  1. Tüm dosyaları kaydedin ve tarayıcıda açın. Şimdi görsele tıklattğınızda, diğer görüntüye değişmesi gerekir.

İşte olan bu. Değişkende <img> öğenize bir referans depoladınız. Daha sonra, bu değişkenin (myImage) olay fonksiyonunu onclick() adı olmayan bir işleve (“anonim” işlevi) eşit hale getirdiniz. Yani bu öğe her tıklatıldığı zaman:

  1. Kod, görselin src özniteliğinin değerini alır.
  2. Kod, src değerin özgün görsel yoluna eşit olup olmadığını denetlemek için koşullu kullanır: 
    1. Öyleyse, kod değeri ikinci görüntünün yoluna değiştirir ve diğer görüntünün <img> içine yüklenmesini zorlar.
    2. Değilse (yani zaten değişmiş olması gerekir), değer özgün görüntü yoluna, özgün duruma geri döner.

Kişiselleştirilmiş karşılama iletisi ekleme

Şimdi, kullanıcı siteyi ilk ziyaret ettiğinde sayfa başlığını kişiselleştirilmiş bir karşılama iletisiyle değiştirelim. Bu hoş geldiniz iletisini kalıcı hale getireceğiz. Kullanıcı siteden ayrılır ve daha sonra dönerse, iletiyi Web Depolama API‘sini kullanarak kaydederiz. Ayrıca kullanıcıyı ve dolayısıyla hoş geldiniz mesajını değiştirmek için bir seçenek de dahil edeceğiz.

  1. index.html içinde, <script> elementinin hemen önüne aşağıdaki satırı ekleyin:
<button>Change user</button>
  1. main.js içinde, aşağıdaki kodu dosyanın altına, tam olarak yazıldığı gibi yerleştirin. Bununla değişkenlerimize buton ve başlıkları seçiyoruz:
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
  1. Kişiselleştirilmiş karşılamayı ayarlamak için aşağıdaki işlevi ekleyin. Bu henüz bir şey yapmıyor, ama yakında yapacak.
function setUserName() {
  let myName = prompt('Lütfen adınızı girin.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
  1. setUserName() işlevi, alert()‘e benzer bir iletişim kutusu görüntüleyen prompt() işlevini içerir. Bu fonksiyon, kullanıcıdan veri girmesini istemekten ve kullanıcı Tamam’ı tıkladıktan sonra bir değişkende depolamaktan daha fazlasını yapar: localStorage API’ını çağırarak, verileri tarayıcıda depolamamıza ve daha sonra almamıza yarar. LocalStorage’ın setItem() işlevini, kullanıcının adı için girdisini içeren değişkene ayarlayan 'name'adlı bir veri öğesi oluşturmak ve depolamak için kullanırız. Son olarak, başlık metnini kullanıcının yeni depolanan adına ayarlıyoruz.
  2. Devamında if ... else bloğunu ekleyin (aşağıda). Uygulamayı ilk yüklendiğinde yapılandırması nedeniyle bu başlatma kodunu çağırabiliriz. 
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}
  1. Bu kodun ilk satırı, verilerin var olup olmadığını denetlemek için olumsuzlama işlecini kullanır. Değilse, fonksiyon bu veriyi oluşturmak için çalışır. Varsa (yani, kullanıcı önceki bir ziyaret sırasında bir kullanıcı adı vermişse), depolanan adı alır ve başlığın adını bir dizeye alır, sonra da başlığa atar.
  2. Tüm bunları bir olay fonksiyonu ile birlikte (aşağıda) bir butona koyalım. Tıklatıldığında çalışsın. Böylece, kullanıcının düğmeye basarak farklı bir ad girmesini de sağlayalım.
myButton.onclick = function() {
  setUserName();
}

null kullanıcı adı?

Örneği çalıştırdığınızda ve kullanıcı adınızı girmenizi isteyen iletişim kutusu açıldığında, İptal düğmesine basmayı deneyin. Başlık şuna dönüşecek: Mozilla is cool, null. Bunun nedeni, istemi iptal ettiğinizde değerin null olarak geri dönmesi. null, JavaScript’te bir değerin yokluğunu ifade eden özel bir değerdir.

Ayrıca, ad girmeden Tamam’ı tıklatma yapmayı deneyin. Sadece Mozilla is cool, yazısını göreceğinizi tahmin ediyorsunuzdur.

Bu sorunları önlemek için, kullanıcının boş bir ad girmediğini denetleyebilirsiniz. İşlevinizi şu şekilde güncelleştirin:

function setUserName() {
  let myName = prompt('Lütfen adınızı girin.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
  }
}

Bu şu anlama geliyor: myName değeri yoksa, setUserName()‘i baştan tekrar çalıştır. Bir değer varsa (yukarıdaki ifade doğru değilse), localStorage içinde depola ve başlığın metni olarak ayarla.

Son

Bu makaledeki tüm talimatları izlediyseniz, aşağıdaki resme benzeyen bir sayfaya sahip olmalısınız.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top