JavaScriptYazılım

Yeni Başlayanlar için JavaScript! #1

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:

javascript eğitim serisi teknotower

Bu kadar konuşmak yeter. Hadi başlayalım !

Anahtar Kelimeler

javascript temelleri javascrip eğitim teknotower

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:

Yeni Başlayanlar için JavaScript! #1 1 javascript
JavaScript

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.

Yeni Başlayanlar için JavaScript! #1 2 javascript
JavaScript

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.

Yeni Başlayanlar için JavaScript! #1 3 javascript
JavaScript

LET

let anahtar kelimesi de const gibi local scope ‘tur. Tanımlanmış olduğu blok dışından erişmek mümkün değildir.

Yeni Başlayanlar için JavaScript! #1 4 javascript
JavaScript let değişken tipi 1
Yeni Başlayanlar için JavaScript! #1 5 javascript
JavaScript let değişken tipi 2

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.

Yeni Başlayanlar için JavaScript! #1 6 javascript

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.

Yeni Başlayanlar için JavaScript! #1 7 javascript

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.

Yeni Başlayanlar için JavaScript! #1 8 javascript

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.

Yeni Başlayanlar için JavaScript! #1 9 javascript
Yeni Başlayanlar için JavaScript! #1 10 javascript

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:

Yeni Başlayanlar için JavaScript! #1 11 javascript

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.

Yeni Başlayanlar için JavaScript! #1 12 javascript

String ifadeleri, toplama operatörünü (+) kullanarak birleştirebilirsiniz.

Yeni Başlayanlar için JavaScript! #1 13 javascript
Değişken değerlerini birleştirken arada boşluk bırakmak için iki tırnak arasına boşluk koyarak birleştirdik.
Yeni Başlayanlar için JavaScript! #1 14 javascript

String ifadelerin içinde bir değişkenin değerini yazdırabilirsiniz.

Yeni Başlayanlar için JavaScript! #1 15 javascript

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.

Yeni Başlayanlar için JavaScript! #1 16 javascript
Yeni Başlayanlar için JavaScript! #1 17 javascript

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. :)

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu