GİRİŞ

Merhaba! Javascript şüphesiz en sık kullanılan programlama dillerinden, nitekim çoğu web sayfası dinamik özellikler için onu kullanır. Örneğin bir web sitesinde karşılaştığınız buton muhtemelen HTML ile oluşturulmuştur, ancak ona tıkladığınızda arkada birtakım işler yapan veya sayfada değişiklik oluşturan bizzat JavaScript kodudur. HTML demişken, eğer bu yazıyı okuma sebebiniz bir web sitesi yapmaksa öncelikle HTML ve CSS öğrenmeniz yerinde olacaktır.

Şunu da söylemeden edemeyeceğim: Java ve JavaScript tamamıyla farklı diller. Aralarındaki isim benzerliği sık sık karıştırılmalarına yol açıyor.

Ufak bir uyarı: Bu blog serisi JavaScript'in temellerini öğremenize katkı sağlayacaktır, ancak odak noktası JavaScript'in websitelerindeki kullanımı olacak. Bu sebeple eğer hedefiniz bir oyun veya indirilebilir uygulama yapmaksa bu yazılar -size JavaScript'in sözdizimini öğretmekle beraber- sizin için yeterli olmayacaktır. Ayrıca yazılarda sürekli JavaScript yazmaktansa kısaltması olan JS'yi kullanacağım. Eh, sözü fazla uzatmayalım...

JAVASCRIPT'E GİRİŞ

Öncelikle HTML dosyalarının .html, CSS dosyalarının .css, C# dosyalarının .cs uzantısına sahip olduğu gibi JavaScript dosyaları da .js uzantısına sahiptir. Eğer VSCode vb. bir kod düzenleyicisi kullanıyorsanız zaten .js uzantılı dosyalara özel bir ikon verecektir.

Şimdi bir HTML dosyasına sahip olduğunuzu varsayıyorum. Örneğin bu dosyanın ismi index.html olsun. Yine aynı klasörde/dizinde script.js isminde bir dosya oluşturalım. Şimdi bu iki dosyayı birbirine bağlamak için tek yapmamız gerken HTML dosyamızın sonuna (isterseniz head veya body etiketlerinin içine de koyabilirsiniz, benim tercihim html'in de dışına koymak) şu kodu eklemek:

Burada dikkat edilecek nokta src niteliğinin içindeki dosya isminin JS dosyanızın ismiyle aynı olmasıdır. Bundan sonra dosyaya yazdığımız JS kodları HTML sayfamızda çalışacaktır. Peki ya nasıl? Hadi, birkaç satır yazalım!

TARAYICI KONSOLUNA YAZI YAZDIRMA

Programlamada konsol, bir tür veri giriş ve çıkış panelidir. Tüm büyük tarayıcıların da bir konsolu bulunur. Web sayfaları bu konsola hata, uyarı ve bilgilendirme mesajları yazabilir; kullanıcılar buradan sayfada yerel değişiklikler yapabilirler. Tabii ki bu değişiklikler sadece sizin cihazınızla sınırlıdır, asıl sayfada bir değişiklik olmaz.

HTML dosyanızı tarayıcınızda açtıktan sonra bahsi geçen konsolu Google Chrome, Microsoft Edge ve Mozilla Firefox'ta Ctrl + Shift + J ile açabilirsiniz. Safari'de ise süreç biraz daha farklı olabilir. Konsolu açtıktan sonra kodunuzu ister buraya yazıp Enter tuşu ile anlık olarak çalıştırabilir, ister JS dosyanıza yazıp sayfa yenilendiğinde çalıştığını görebilirsiniz. Şimdi kod ile buraya bir şeyler yazdıralım.

console.log("Merhaba, Dünya!");

Tarayıcınıza geçip sayfayı yenilediğinizde konsolunuzda Merhaba, Dünya yazısını görmelisiniz. Yazdığımız koda bir göz atalım:

console.log, konsola metin yazdırmak için kullanılan fonksiyondur.
Bu fonksiyon tek bir parametre alır, yani çalışmasını etkileyen tek bir değer vardır. Bu da görüldüğü üzere yazdırılacak olan ifadedir. Aynı matematikte olduğu gibi parametreler, parantez içinde yazılır.
Fark ettiyseniz metnimizi tırnak içinde yazdık. Bunun sebebi metinlerin (string), tüm büyük dillerde tırnak içinde ifade edilmesidir. Tırnak kullanmasaydık bir hata alacaktık. Ancak çift tırnak (") kullanmak benim tercihim, siz isterseniz tek tırnak (') da kullanabilirsiniz elbet.
JS'te kod bloklarının (kodun tek başına çalışan bir kısmı, genellikle bir satır) sonuna noktalı virgül (;) konur. JavaScript bu noktalı virgülü bazen kendi başına koysa da bazı durumlarda koyamaz. Bu yüzden her zaman kendimiz koymak en sağlıklısıdır.

DEĞİŞKEN OLUŞTURMAK

Değişkenler, içlerinde bir değer saklayan birimlerdir. Bunları bir kutu gibi düşünebiliriz. Ee, her kutunun -her kutunun olmasa da bazı kutuların- bir anahtarı olur. Değişkenlerin anahtarları da isimleridir. Yani yine matematikte yaptığımız gibi 5 sayısını x değişkenine atayarak denklemlerde bu sayı yerine x'i kullanabiliriz. Bu durumda değişken anahtarı x, değer ise 5'tir. Haydi, bir örnekle inceleyelim!

                    var metin = "Merhaba, Dünya!";

                    console.log(metin);

                    var sayi = 3.14;

                    console.log(sayi);

                    var dogruluk = true;

                    console.log(dogruluk);

Bu kod ekrana önce Merhaba, Dünya!, sonra 3.14, sonra da true yazdıracaktır. Koda bakacak olursak;

var, değişken oluşturmak için kullanılan anahtar kelime(lerden biri)dir. İngilizce variable (değişken) kelimesinin kısaltmasıdır.
metin, ilk değişkenimizin ismidir.
Atama operatörü (=) ile metin değişkenini Merhaba, Dünya! metnine eşitledik.
Sonrasında ise bu değişkeni konsolumuza yazdırdık. Dikkat! Değişken isimleri tırnak içine alınmaz! Alınırlarsa eğer, metin olarak değerlendirilirler.
Diğer satırlarda ise aynı şekilde sayi ve dogruluk isimli değişkenler oluşturduk ve bunlara 3.14 ile true değerlerini atadık. Sonra bunları da ekrana yazdırdık.
Tabii ki noktalı virgüllerimizi unutmadık :)
Değişkenlere metin (string) ve sayı (number) türlerinde değerler atanabildiği gibi mantıksal (boolean) değerler de atanabilir. Bunlar önermenin doğru olduğunu belirten true ve yanlış olduğunu belirten false olmak üzere iki tanedirler.

Ayrıca dikkat ettiyseniz yukarıdaki açıklama satırlarının ilkinde var'ın değişken oluşturma ifadelerinden yalnızca biri olduğunu söyledim. Peki diğerleri neler? let ve const! Bunlara bir örnekle bakalım:

                    var metin = "Merhaba, Dünya!";

                    var metin = "Yok. Başka bi' şey yazalım.";

                    metin = "Tamam, bu son.";

                    console.log(metin);

Bu kod sorunsuz çalışacak ve 4. satır ekrana metin değişkeninin mevcut değeri olan Tamam, bu son. metnini yazdıracaktır. Buradan anlayabiliriz ki var ile tanımlanan değişkenler yine var ifadesiyle tekrardan tanımlanabilir (2. satır) veya herhangi bir ön ifade kullanılmadan üzerlerine yeni bir değer atanabilir (3. satır). Ancak const için işler biraz daha farklı. Bu ifade, ismini İngilizce constant (sabit) kelimesinden alır. Olayını az çok anlamışsınızdır sanırım :)

                    const metin = "Merhaba, Dünya!";

                    const metin = "Yok. Başka bi' şey yazalım.";

                    metin = "Tamam, bu son.";

                    console.log(metin);

Bu kod konsolda bir hata mesajı gösterecektir. Çünkü const değişkenleri ne yeniden tanımlanabilir, ne de üzerlerine yeni bir değer atanabilir.

let'e gelecek olursak; bu ifade ile tanımlanan değişkenler yeniden tanımlanamazlar, ancak üzerlerine yeni bir değer atamak istediğinizde de sorun çıkarmazlar. Yani ne var kadar lakayıt, ne de const kadar katıdırlar. Yani

                    let durum = "sıkkın";

                    durum = "mutlu";

                    console.log(durum);

bu kod sorunsuz şekilde çalışırken

                    let durum = "sıkkın";

                    let durum = "mutlu";

                    console.log(durum);

bu kod bir hata verecektir. let ile var'ın başka birtakım farkları da var, ancak şu an konumuz değiller.

YORUM SATIRLARI

Bazen kodunuzu açıklamak isteyebilirsiniz. Bazen de bir kodun şimdilik çalışmasını istemezsiniz, ancak silip baştan yazmak da zahmetlidir. İşte böyle durumlarda yorum satırlarına başvuruyoruz. Büyük programlama dillerinde yorum satırlarını belirtmek için özel bir karakter veya karakter grubu vardır. JS'te ise bu // veya /* */ olarak seçilmiştir. Yorum satırları tarayıcı tarafından es geçilir, yani çalıştırılmaz. Örneğin;

                    // Bu bir yorum satırı. İstediğimi yazabilirim, nas'olsa okunmayacak. Ama daha etkin de kullanılabilir tabii :)

                    console.log("Bu kısım okunuyor");

                    /*
Bu da birden çok satırdan oluşan bir yorum.
Burası da dahil
*/

                

Kafa karışıklığı olmaması adına: Yazıyı telefondan okuyorsanız ekran dar olduğundan ilk yorum da birden çok satırdan oluşuyormuş gibi gözükebilir, ancak tek satırdır. // ifadesi yalnızca bulunduğu satıra etkir.

Ayrıca belirtmekte fayda var: JS, değişkenlerin tanımlandığı satırları bir nevî yukarı atar. Örneğin tanımlanmamış bir değişkeni ekrana yazdırmaya çalışmak hata verecektir, ancak bir değişkeni önce ekrana yazdırıp sonra tanımlamak istersek hata değil undefined çıktısını verecektir:

                    // Yazdığımız kod

                    console.log(degisken);

                    var degisken = "merhaba";

                    // JS'in okuma şekli

                    var degisken;

                    console.log(degisken);

                    degisken = "merhaba";

Bir değişken tanımlandıysa ancak üzerine bir değer atanmadıysa, bu onun değerinin undefined olarak okunmasına sebep olur ("undefined", İngilizce'de "tanımsız" demektir.). Bu olay hoisting (kaldırma) olarak adlandılır.

OPERATÖRLERLE İŞLEM YAPMA

Operatörler, değişkenler ve değerler üzerinde matematiksel veya mantıksal işlemler yapmaya yarayan semboller ve ifadelerdir. Örneğin toplama (+) ve çıkarma (-) sembolleri birer matematiksel operatördür. Hatta daha önce değişkenlere değer atamak için kullandığımız eşittir (=) işareti de bir operatördür. Bu yazıda sık kullanılan dört operatör çeşidini öğreneceğiz. Bunlar; matematiksel operatörler, mantıksal operatörler, karşılaştırma operatörleri ve atama operatörleri. Şimdi matematiksel operatörlerle başlayalım:

                    // Toplama

                    console.log(3 + 5);
                    // Çıktı: 8

                    // Çıkarma

                    console.log(3 - 5);
                    // Çıktı: -2

                    // Çarpma

                    console.log(3 * 5);
                    // Çıktı: 15

                    // Bölme

                    console.log(3 / 5);
                    // Çıktı: 0.6

Bu kısım kendini oldukça iyi anlatıyor. Tabii ki burada sayılar yerine daha önce tanımladığımız değişkenleri de kullanabilirdik.

Burada bahsetmeden edemeyeceğim bir nokta var: Bu dört operatörün üçü yalnızca sayılar arasında işlem yapabilir, aksi takdirde hata verirler. Ancak toplama için işler farklıdır. Toplama; metinleri, hatta ve hatta mantıksal değişkenleri bile toplayabilir. Örneğin;

                    console.log(3 + "elma");
                    // Çıktı: 3elma

                    // Burada JS, işlem yapabilmek için 3 sayısını da bir metin olarak aldı.

                    console.log("elma" + "armut");
                    // Çıktı: elmaarmut

                    // Burada iki metin uç uca eklendi.

                    console.log(5 + true);
                    // Çıktı: 6

                    // Böyle durumlarda mantıksal değerler sayıya dönüştürülür. true değeri 1'e, false değeri ise 0'a eşit olur.

                    console.log(2 * (true + false));
                    // Çıktı: 2

                    // Burada true ile false toplanıp 1 + 0 = 1 bulunmuş, sonra ise bu değer 2 ile çarpılıp 2 * 1 = 2 sonucu elde edilmiştir.
                

Bu kısım da tamamsa eğer, biraz daha spesifik olan diğer 4 matematiksel operatörümüze geçebiliriz.

                    // Üs Alma

                    console.log(7 ** 3);
                    // Çıktı: 343

                    // Kalan Alma (Modülüs)

                    console.log(7 % 3);
                    // Çıktı: 1

İki çarpma işaretinin yan yana gelerek üs alma işareti haline gelmesi oldukça manidar. Modülüs ise solundaki sayının sağındakiyle bölümünden kalanı verir. Örneğin 7'yi 3'e böldüğümüzde bölüm 2 ve kalan 1 olur. Bu operatörü matematiksel olarak şöyle de gösterebiliriz:

x % y ≡ x (mod y)

Diğer iki operatörümüze de bakalım:

                    var x = 46;

                    var y = 46;

                    var z = 46;

                    var t = 46;

                    // Artırma

                    console.log(x++); // Çıktı: 46

                    console.log(++y); // Çıktı: 47

                    // Azaltma

                    console.log(z--); // Çıktı: 46

                    console.log(--t); // Çıktı: 45

Burada ufak bir kafa karışıklığı olabilir. Bu operatörler hem atama hem de matematiksel işlem yaparlar. Zaten atama da yaptıkları (yani değişkene yeni bir değer verdikleri) için her satır için farklı birer değişken tanımladım. Yukarıdaki gibi operatörü değişkenin başına veya sonuna yazmak değişkene atanan değeri değiştirmese bile ifadenin değerini, yani konsola yazdırılan değeri değiştirir. Fazla uzatmadan açıklayalım: Başa da sona da konsa (++) değişkeni bir arttırır ve (--) bir azaltır. Ancak değişkenin sonrasına konduklarında önce değişkenin değerini verir, sonra değişkeni bir değiştirirler; öncesinde konduklarındaysa önce değişkeni bir değiştirir, sonra değerini verirler. Örnekte de operatörler değişkenin sonuna konduklarında değişken değişmiştir ancak önce değişkenin halihazırdaki değerini konsola yazdırmıştır. Umarım açıklayabilmişimdir.

Şimdi sırada mantıksal operatörlerimiz var. Bu operatörler lise matematiğinde de görmüş olabileceğiniz önermeler arasındaki mantıksal işlemleri (ve, veya...) yapmamızı sağlarlar. Her türdeki değerler üzerinde işlem yapabilirler, çıktı olarak ise genellikle true ya da false verirler. Öncelikle boolean değerleri ile nasıl işlediklerine bakalım:

                    // Ve (tüm değerler true, biri bile false ise sonuç false olur.)

                    console.log(true && true); Çıktı: true

                    console.log(true && false); Çıktı: false

                    // Veya (en az bir değer true)

                    console.log(true || true); Çıktı: true

                    console.log(true || false); Çıktı: true

                    console.log(false || false); Çıktı: false

                    // Değil (başına konduğu değerin tersi)

                    console.log(!true); Çıktı: false

                    console.log(!false); Çıktı: true

Girdi olarak sadece boolean (true ya da false) değil her türden değer alabilmeleri biraz ilginç gelmiş olabilir. Zira doğruluğu veya yanlışlığı olmayan 5 ve 6 değerleriyle nasıl mantıksal işlem yapabiliriz ki? İşte bu durumda sayılar ve metinleri de boolean türünde gösterebiliriz. Bu durumda 0, "" (boş metin), null (boş), undefined (tanımsız), NaN (not a number - sayı değil) değeleri false; kalanlar ise true olarak değerlendirilir. Çıktı olarak ise true ya da false vermek yerine sonuç true ise işlemde true olarak okunan son değeri, false ise de false olarak okunan son değeri verir. Çıktı kısmı biraz karışık olabilir ama merak etmeyin, buna pek ihtiyacımız olmayacak. Çünkü zaten boolean ile diğer türler arası dönüşümlerde 5, 6, 7, 8 ve true'nun bir farkı yoktur. Bunlara da birkaç örnekle bakabiliriz:

                    console.log(5 && 6); 

                    5 de 6 da true olarak okunur. true && true, true verir. İşlemde true olarak okunan son değer ise 6'dır. Çıktı: 6

                    console.log(0 && "elma"); 

                    0 false, "elma" true olarak okunur. false && true, false verir. İşlemde false olarak okunan son değer 0'dır. Çıktı: 0

                    console.log(42 || false); 

                    42, true olarak okunur. true || false, true verir. İşlemde true olarak okunan son değer 42'dir. Çıktı: 42

                    console.log(!6); 

                    6, true olarak okunur. !true, false verir. Çıktı: false

                    console.log(!""); 

                    "" (boş metin), false olarak okunur. !false, true verir. Çıktı: true

Anlaşıldıysa harika! Eğer tam anlaşılmadıysa da gayet doğal, öncekilere göre biraz daha karmaşık bir yapı var. Anladıktan sonra öğreneceğimiz dört operatör tipinden üçüncüsüne geçebiliriz: Karşılaştırma operatörleri.

Karşılaştırma operatörleri, adı üzerinde, iki değer arasında bir karşılaştırma yapar. Bu karşılaştırma eşitlik, farklılık, büyüklük, küçüklük, büyük eşit olma durumu vs. olabilir. İşte kullanımları:

                    console.log(5 == 5); 

                    5 ve 5 eşittir. Çıktı: true

                    console.log(6 > 5); 

                    6, 5'ten büyüktür. Çıktı: true

                    console.log(6 < 5); 

                    6, 5'ten küçük değildir. Çıktı: false

                    console.log(3 >= 3); 

                    3, 3'e büyük eşittir. Çıktı: true

                    console.log(4 <= 5); 

                    4, 5'e küçük eşit değildir. Çıktı: false

                    console.log(6 == "6"); 

                    Sayı olan 6 ve metin olan "6" farklı türlerde olsalar da değerleri aynıdır. Çıktı: true

                    console.log(6 === "6"); 

                    Sayı olan 6 ve metin olan "6" aynı değerde olsalar da farklı türlerde olduklarından denk değillerdir. Çıktı: false

                    console.log(6 != 3); 

                    6, 3'ten farklıdır. Çıktı: true

                    console.log(6 !== "6"); 

                    Sayı olan 6, metin olan "6"ya denk değildir. Çıktı: true

                    console.log(!(6 > 6)); 

                    "6 > 6", yanlış olduğundan false verir. Bunun tersini alırsak true elde ederiz. Çıktı: true

Bunlar da bu kadardı, hepsi basit matematiksel ifadeler. Şimdi ise sırada öğreneceğimiz son operatör türü olan atama operatörleri var. İsimlerinden de anlaşılacağı üzere değişkenlere değer atamak için kullanılıyorlar. Bunlar da zor değil:

                    var x = 3;

                    console.log(x);

                    // x'e 3 değerini atar. Çıktı: 3

                    x += 2;

                    console.log(x);

                    // x'in değerini 2 artırır. Çıktı: 5

                    x -= 1;

                    console.log(x);

                    // x'in değerini 1 azaltır. Çıktı: 4

                    x *= 4;

                    console.log(x);

                    // x'in değerini 4'e katlar. Çıktı: 16

                    x /= 8;

                    console.log(x);

                    // x'in değerini 8'de 1'ine indirir. Çıktı: 2

                    x **= 3;

                    console.log(x);

                    // x'in değerini küpüne çıkarır. Çıktı: 8

                    x %= 2;
console.log(x);

                    // x'in değerini 2 ile bölümünden kalanına (mod 2'deki dengine) eşitler. Çıktı: 0

SONUÇ

Evet, giriş için yeterince uzun bir yazı oldu. Kafanıza takılan bir şey veya gördüğünüz bir hata olursa yorumlarda belirtmekten çekinmeyin. İyi günler, hayırlı Ramazanlar!

Yorumlar ()