Bu yazımda, JavaScript temelleri konusunu ele alacağım. Basit bir oyunu beraber geliştireceğiz. Günün sonunda, JavaScript temellerini öğrenmiş olacaksınız. Yazıyı iki kısıma ayırdığım için yapacağımız oyunu ve geriye kalan konuları serinin ikinci yazısında ele alacağım.
Javascript Öğrenmeye Başlamadan…
JavaScript kullanan geliştiricilerin çok büyük bir kısmı, front-end (Kullanıcı arayüzü) tarafında çalışıyor. JavaScript’in amacı HTML’i daha dinamik hale getirmektir. Ancak Javascript, back-end (API, önyüzde gözükmeyen arkaplan kodları) için de kullanılıyor. JS, Functional Programming için çok daha uygun olsa da benim gibi OOP dillerine hakim olan arkadaşlar, alışkın oldukları şekilde OOP kullanabilirler. Bu konu hakkında biraz araştırma yaparsanız (özellikle yabancı platformlarda) hangi tarafın daha iyi olduğu konusunda ciddi tartışmalar olduğunu göreceksiniz. Hangi tarafta olursanız olun, JavaScript her zaman çantanızda taşıdığınız bir İsviçre çakısı gibidir 🙂
Başlarken
Anlatım yaparken kullanacağım editör Visual Studio Code olacak. Ücretsiz ve çok kullanışlı bir editör. Kullanımı gayet kolay. Ayrıca çok sayıda uzantıyı yükleyip işinizi kolaylaştıracak bir yapısı var.
Visual Studio Code kadar olmasa da Notepad++ ve Brackets kullanmışlığım var. Hepsi birçok konuda başarılı editörlerdir. JavaScript için istediğiniz editörü kullanabilirsiniz.
Oyunu yapmaya bu serinin ikinci yazısında başlayacağız. Ama ne yapacağımızdan biraz bahsedeyim. Böylece temel oluşturmuş olalım:
Yapacağımız ilk iş; kendimize özel bir karakter tasarlamak olacak. Karakterimizin özelliklerini ayarladıktan sonra karakterimizi zorlayacak bir de düşman eklememiz gerekecek. Karakter tasarlandıktan sonra savaş mekaniklerini oluşturacağız. Karakterimiz düşman ile karşı karşıya gelince savaşmaya başlayacak. Eğer karakterimiz karşılaşmadan sağ çıkarsa kazanacak, ölürse kaybedecektir. Biliyorum, çok basit ancak bu projeyi yazmadan önce kendimi kaptırıp çok fazla özellik ekledim :)) Bu kadar basit gözüken bir projeyi, o kadar karmaşık hale getirmiştim ki başımı kaldırdığımda ağzımdan çıkan ilk cümle “Ben ne yaptım.” oldu. Bu yüzden en sade halini kullanmaya karar verdim. Yazının sonunda bu oyunu istediğiniz gibi geliştirebilirsiniz. 🙂
Projeye başlamadan son bir şey daha. Proje yapısı şu şekilde olacak:
Bu kadar konuşmak yeter. Hadi başlayalım !
Anahtar Kelimeler
Anahtar kelimeler, programlama dillerinin özel anlamlar yüklediği kelimelerdir. Örnek olarak JavaScript içerisinde birazdan bahsedecek olduğum var, const, let gibi kavramlar birer anahtar kelimedir. Yazının devamında birçok anahtar kelime ile karşılaşacağımızdan lafı fazla uzatmadan değişkenlere geçelim.
Değişkenler
Değişkenler, bir programlama dilinin en önemli yapılarıdır. Değişkenler ne yaparlar? Değişkenler bellekte yer ayırırlar. Program içerisine aldıkları değerleri bellekte ayırdıkları konumlara yazarlar. Bellekte ayrılan bu konumlara daha sonra erişip içerisindeki bilgiyi alabilir, değiştirebilir veya silebilirler. Tabii ki ne yapacaklarını onlara biz öğreteceğiz. 🙂
JavaScript içerisinde değişkenlerin kullanımı
Scope (kapsam, faaliyet alanı) kavramından bahsetmeden değişkenlere başlamak olmaz. Scope tanımlanan değişkenin programın hangi kısımlarında kullanılması gerektiğini tanımlar. Scope ikiye ayrılır: Global scope ve Local Scope.
Global Scope
Program içerisinde fonksiyonların dışında tanımlanır. Programın her yerinden erişilebilen scope tipidir.
Local Scope
Fonksiyon içerisinde tanımlanır. Sadece tanımlandığı fonksiyon içerisinden erişilebilen scope tipidir.
Değişken Kullanım Çeşitleri
Değişkenleri birbirlerinden ayıran özellikler bulunur. Değişkenlerin bu özelliklere uygun olarak kullanılması için farklı programlama dillerinde farklı isimlere sahip anahtar kelimeler vardır. Genel olarak değişkenler şu şekilde kullanılırlar:
JavaScript’in temelde üç farklı değişken tipi vardır var, const, let. Sırayla inceleyelim.
VAR
var anahtar kelimesi global scope’tur. var ile tanımlayacağınız bir değişkeni herhangi bir yerde tanımlayabilirsiniz. Yazdığınız kodun herhangi bir yerinden erişebilirsiniz. Aynı zamanda, aynı isimde bir çok kez tanımlama işlemini de yapabilirsiniz. Diğer değişken tiplerini gördüğünüzde farkı daha net anlayacaksınız.
CONST
const anahtar kelimesi local scope’tur. const ile tanımlamış olduğunuz değişkene sadece bir kez veri atama işlemi yapabilirsiniz. const anahtar kelimesi değişkene farklı bir atama işlemine izin vermeyecektir.
LET
let anahtar kelimesi de const gibi local scope ‘tur. Tanımlanmış olduğu blok dışından erişmek mümkün değildir.
let değişkenini fonksiyon dışında tanımladım. Ama fonksiyon içerisinden rahatça erişebildim. İkinci resimde görüldüğü gibi fonksiyonIciDegisken “tanımlandı ancak kullanılmadı” diyor. Halbuki fonksiyonun dışından erişmeye çalışmıştım. Sonuç olarak let tanımlandığı fonksiyon dışında çağrılamaz.
JavaScript değişken tipleri
JavaScript içerisinde değişkenlere atama işlemi yapmayı öğrendikten sonra değişkenlere hangi veri tiplerini atayabiliyoruz bir bakalım.
String
Genel olarak çift tırnak arasında yazılan (bazı istisnalar dışında) her karakteri, karakter dizisi olarak tutan veri türüdür. Kabaca “yazı/metin atamaları için kullanılır” denilebilir.
Number
Tam sayıları tutan veri türüdür. Diğer programlama dillerinde, tam sayıları tutmak için ihtiyaca yönelik farklı türde veri yapıları vardır.
Boolean
Boolean veri tipi doğru ( true ) ve yanlış ( false ) olmak üzere iki mantıksal değerden birine sahip olan veri türüdür.
Undefined (tanımsız)
Herhangi bir değer atanmamış değişkenlerin değeri undefined ‘dır. Yani, bir değişken tanımlar ve değer atamazsak ekrana basıldığında undefined görürüz.
Yorum Satırı
Yorum satırı, aslında program yazarken bıraktığımız küçük notlardır. Bu notları, bilgisayar derlemez. Yani, yorum satırları içerisinde yazılan her karakter, bilgisayar için anlamsızdır. Biz de bilgisayarın anlamasını beklemiyorduk zaten :). Yazdığınız kodun bir üst satırına kod hakkında ufak bilgiler yazmak, ileride siz veya takım arkadaşlarınız için kodun ne işe yaradığının anlaşılması için en hızlı yoldur.
Kullanımına bakacak olursak:
String İfadeler
String ifadelerin kullanımını inceleyelim. (" ") tırnak işareti ve (' ') tek tırnak işaretinin yaptıkları iş aynıdır. Yani hangisini kullanmak istiyorsanız onu kullanabilirsiniz.
String ifadeleri, toplama operatörünü (+) kullanarak birleştirebilirsiniz.
String ifadelerin içinde bir değişkenin değerini yazdırabilirsiniz.
Alt Gr + ; => ` ` ile yapılan farklı tek tırnak içerisinde ${ } içerisine JavaScript kodu yazabilirsiniz. Sadece değişken adını yazarsanız ekrana değişken içeriğini basar.
JavaScript String ifadeleri hakkında daha fazla bilgi için bknz.
Yazıyı daha fazla uzatmayalım. Serinin devamında, fonksiyonlar, İf- else, Diziler, for – while gibi önemli konulardan bahsedeceğim.
TeknoTower platformunda sonraki yazılarımda görüşmek üzere. 🙂
