Javascript dersleri serimizin ilk yazısında ( Yeni Başlayanlar için JavaScript! #1 ), JavaScript dünyasına küçük bir giriş yapmıştım. Bu yazımda Fonksiyonlar, if-else, diziler, for-while, this anahtar kelimelerinden bahsedeceğim.
Javascript Dersleri – İlk proje
Hazırlıklar
Konulara geçmeden önce geliştireceğimiz oyun için biraz hazırlık yapalım. İlk yazımda belirtmiş olduğum gibi; proje için gerekli klasörleri ve dosyaları oluşturduktan sonra mutfağa gidin. Sevdiğiniz bir içecek alın. Daha sonra kulaklığınızı takın ve YouTube da en sevdiğiniz müzikleri açın. Evet artık hazırsınız! 😀
Başlıyoruz !
Bütün bunların ardından index.html düzenlemek için açalım ve içerisine aşağıdaki satırları yazalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Şimdi sıra CSS ve JavaScript dosyalarını eklemekte.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- css ekledik -->
</head>
<body>
<script src="script/app.js"></script> <!-- JavaScript ekledik -->
</body>
</html>Evet, app.js dosyamızı açıp her şeyin doğru çalıştığından emin olmak için ufak bir test yapalım.
console.log("Her şey yolunda");Yukarıdaki kodu yazdıktan sonra index.html açın. Daha sonra control + shift + C tuş kombinasyonu veya Sağ tık, “Öğeyi Denetle” diyerek konsola girin. Ve karşınızda farkında olmadan yazdığınız ilk JavaScript kodunun çıktısı! 😀 İsterseniz herkes gibi “Merhaba Dünya!” da yazabilirsiniz.
Şimdi, birinci yazıda bahsetmediğim bir olaya giriş yapacağım : Nesne kavramı. Fakat aklınız karışmasın bu yazıda bunu bir değişken türü olarak düşünebilirz. Şimdi Object i tanıyalım.
JavaScript Object – Nesne Tanımlama
Aslında Object, Javascript derslerinde şu ana kadar öğrendiğimiz veri türlerini içerebilen bir nesnedir (veri türü gibi düşünebilirsiniz). Süslü parantez içerisine önce değişken adı, sonra değişken için birden fazla değer atanabilir. Biraz yakından bakarsak ne demek istediğimi daha rahat anlayabilirsiniz.
Burada “kahraman” isimli objemizi tanımladık. Kahraman objesi içerisine bahsettiğimiz gibi birden fazla değer atadık. (ad, soyad, ozellik)
Konsolumuza yazdırdığımızda objemiz ve tüm özellikleri geldi. Süper!
Peki, ben içindeki değişkenlerin hepsine değilde; sadece bir tanesine ulaşmak isteseydim. O zaman ne yapmam gerekirdi? Bunun için endişelenmeye gerek yok. Çok basit bir cevabı var: Nokta İşareti.
Oluşturduğumuz “kahraman” objesinin içinde tanımladığımız ad, özellik ve soyad özelliklerine ulaşabiliyoruz. Ulaşmakla kalmayıp özellikleri kullanarak işlem de yapabiliriz. İşte bu çok güzel!
Burada hem kahraman objemizin tamamamını hem de console.log(kahraman.ad); satırıyla sadece kahramanımızın adını yazdıracağız.
Denemelerimizi yaptık. Neyin nasıl ve nerede çalıştığını görmüş olduk. Yazdığımız tüm kodları silelim ve temiz bir başlangıç yapalım.
Temiz Bir Sayfa
Yazarlar kendi aralarında savaşsaydı ilginç olabilirdi. Ancak bu oyunda savaşmayacaklar 🙂 O yüzden, kahraman özelliklerini değiştirelim. can ve atak adlı iki özellik ekleyelim. Daha sonra aynı mantıkta dusman değişkeni oluşturup aynı özellikler ile oluşturalım.
Kahramanımız ve düşmanımız hazır. Şimdi, onların savaşmaları gerek! Ama nasıl? Cevap, ufak bir matematik probleminde gizli:
dusman.hayat = dusman.hayat - kahraman.atakBurada yaptığımız şey; düşmanın hayat özelliğini, kahramanın atak özelliği miktarınca azaltmaktır. Bu mantığı kullanarak kodumuzu yazalım ve sonucu görelim.
İlk savaşımızı yaptık. Kahraman ve düşmanın savaşmalarını her istediğimde, aynı satırın gerekli yerlerini değiştirerek yeniden yazmak bana saçma geliyor. Öyle bir kod yazmalıyım ki; onlarca gereksiz tekrardan beni kurtarsın. Bu isteğimi yapabilmem için Fonksiyonların nasıl kullanıldığını bilmem gerekiyor. Javascript dersleri dahilinde fonksiyonlara da bir göz atalım.
Fonksiyonlar
Fonksiyonlar JavaScript’in ve tüm yazılım dünyasının olmazsa olmazıdır. Bizi gereksiz tekrarlardan kurtarırlar. Ve neredeyse her işimizi onlara yaptırırız. Matematikte öğrendiğimiz fonksiyonlara benzerler. İçlerine bir değer girer, sonra o değeri belirli işlemlerden geçirir ve bir sonuç elde ederiz. Tüm temel Javascript dersleri içeriklerinde onlarla karşılaşmanız kaçınılmazdır.
Matematikteki fonksiyonları özleyenler için bir örnek 🙂
F(x) = x^2 + 2x + 4
x=1,
=> F(1) = 1 + 2 + 4
=> F(1) = 7JavaScript içerisinde nasıl tanımlandığını beraber görelim.
function anahtar kelimesi, gördüğümüz kodun bir fonksiyon olduğunu söylüyor. Parantezler arasında yazdığımız X ise bizim fonksiyon içerisinde lokal kullandığımız değişken. Parantez arasında, farklı isimde birden fazla değişkeni virgül ile ayırarak tanımlayabiliriz.
Tanımladığımız değişkenlere, fonksiyon dışından erişemeyeceğimizi tekrar hatırlatayım.
Fonksiyonların farklı kullanımları da var. Parantez arasında hiç değişken tanımlamadan da fonksiyonu kullanabiliriz. Bundan farklı olarak geri dönüş değeri de vermeyebilir. Örneğimizi genişletince ne demek istediğim daha da anlaşılır olacak.
Bu örnekte G Fonksiyonu iki değer almakta ve bir geri dönüş değerine sahip.
Yazdır fonksiyonu da bir değer alıyor ancak herhangi bir geri dönüş değeri yok.
KonsolaMerhabaYaz fonskiyonu ise herhangi bir girdisi olmadığı gibi bir çıktıya da sahip değil.
Tüm bu kullanımlar ihtiyacınıza göre şekillenir.
Şimdi oyunumuza geri dönelim. saldır adında bir fonksiyon oluşturdum.
Eğer düşmana iki kez saldırırsak düşmanın hayatı sıfır olur. Bunda herhangi bir sorun yok. Ya üç kez saldırırsak o zaman program nasıl davranır? Aslında program çalışmaya devam eder ama düşmanın hayatı -50 olacağı için mantık hatası meydana gelir. Buradaki sorunu çözmek için bana karar verebilme yeteneğine sahip bir anahtar kelime lazım. O anahtar kelime if dir. Yani, Javascript dersleri #2 yazımızda, tam da işimiz düştüğü anda Karar Yapılarına giriş yapıyoruz.
if-Else
if anahtar kelimesinin anlamı “eğer” dir. Ve JavaScript içerisinde de taşıdığı anlam ile bize yardımcı olur. if yapısı bize program içerisinde karar verebilme yeteneği kazandırır. if içerisinde yazdığımız koşul eğer doğru ise if bloğu içerisindeki işlemleri uygular. değilse else bloğuna geçer ve else bloğu içerisindeki işlemleri uygular.
if(kosul){
...
}else {
...
}Birden fazla kararı birbirleriyle bağlatılı olarak kontrol etmek için de else if bloğu devreye giriyor.
if(kosul1){
...
}else if(kosul2){
...
}
else if(kosul3){
...
}else{
...
}Oyundaki problemi çözelim. Yapmamız gereken saldır fonksiyonu içerisinde aşağıdaki gibi bir if bloğu açmak.
if(savunan.hayat < 0){
savunan.hayat = 0;
}Burada savunan tarafın canı eğer negatif bir sayıya eşit olursa bizim için sıfır olmasıyla eşit olacağından savunanın hayatını sıfıra eşitledik böylece geri dönüş değeri negatif dönemez ve sorunu çözmüş oluruz.
Diziler
Diziler ile çok fazla veriyi tek bir değişken içerisinde tutabilirsiniz. Örnek olarak bir sınıfı ele alalım içerisindeki her bir öğrenci için yeni bir değişken yazmak ilk başta göze mantıklı gelse de program akışı içerisinde dinamik olarak yönetemeyeceğimiz için bu tür bir kullanım saçma olacaktır. Bu yüzden öğrencileri içeren tek bir dizi işimizi halledecektir. Diziler [] arasında yazılır ve değerler virgül ile ayrılır.
Aşağıdaki örnekte Object tipini kullandım ancak diğer türler ile de oluşturabilirsiniz.
let ogrenci = [
{
ad: "Ali",
soyad: "Atay",
numara: 95
},
{
ad: "Serkan",
soyad: "Keskin",
numara: 100
},
{
ad: "Osman",
soyad: "Sonat",
numara: 78
}
];let rakamlar = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ];Dizileri kullanırken diziadı[index] şeklinde erişebilir ve değiştirebiliriz.
let dizi[0 ,1 ,5 ,5 ,9];
console.log(dizi[0]); // çıktısı => 0
console.log(dizi[1]); // çıktısı => 1
console.log(dizi[2]); // çıktısı => 5
console.log(dizi[3]); // çıktısı => 5
console.log(dizi[4]); // çıktısı => 9
dizi[3] = 3;
console.log(dizi[3]); // çıktısı => 3
Oyunumuz içerisindeki kullanımına geçmeden For-While ‘dan bahsedelim. Daha sonra diziler ve For-while döngülerinin nasıl uyum içerisinde çalıştığını göreceksiniz. 🙂
For-While
For ve While anahtar kelimeleri ile tekrar etmesini istediğimiz bir çok şeyi yaptırabiliriz. For ve While aslında döngü şekilleridir. Eğer ekrana 100 defa “seni seviyorum” yazdırmak isterseniz arka arkaya 100 satır console.log("Seni Seviyorum!"); yazmak biraz tuhaf olurdu değil mi ?
For anahtar kelimesinin yapısı kısaca şu şekildedir:
for (let index = 0; index < uzunluk; index++) {
...
}İlk noktalı virgüle içerisinde olan index değişkeni sayaç işlevi görür. For içerisinde döngünün hangi aşamasında olduğumuzu bize söyleyen değişkendir.
İkinci noktalı virgüle kadar olan kısım ise koşuldur. Koşul sağlandığı sürece döngü çalışmaya devam eder.
Ve son kısımda ise index arttırılır.
Örneğimizi görelim.
const uzunluk = 100;
for (let index = 0; index < uzunluk; index++) {
console.log("Seni Seviyorum!");
}While ise sadece içerisinde yazılan koşul doğru olduğu sürece, herhangi bir sayaç kullanmadan çalışan bir döngüdür. Yapısı ise şu şekildedir:
while (koşul) {
// koşul gerçekleşene kadar kod bloğu çalışır.
}Evet, şimdi sıra oyunumuzu güncellemekte. Yukarıda bir yerlerde kahramanımız birden fazla saldırı yapması için arka arkaya yazığımız log lar vardı. Önce bu tekrar eden kodları güncelleyelim.
Artık oyunu bitirebiliriz.
Yazdığımız kodun çıktısı:
Kafanızın karışmaması için satır satır açıklayacağım merak etmeyin 🙂
37. satır: Fonksiyon tanımı yaptım.
38. satır: Düşmanlar dizisi içerisinde rahatça hareket edebilmek için for döngüsü kurdum.
39. satır: Console.log(“…”); ile konsola savaş ile ilgili bilgi yazdırdım.
40. satır: Bir düşman ölmeden diğer düşman ile savaşmayı önlemek için while döngüsü kurdum.
41. – 43. satır: Console.log(“…”); ile konsola savaş ile ilgili bilgi yazdırdım.
44. satır: Düşmana saldır fonksiyonu ile saldırıp yeni hayat değişkenini düşmanın hayat değişkenine atadım.
45. satır: Console.log(“…”); ile konsola savaş ile ilgili bilgi yazdırdım.
46. – 51. satır: Düşmanın hayatı “0” a eşit değilse sıranın düşmana geçtiği bilgisini konsola yazdırdım. Eğer düşman öldüyse düşmanın öldüğü bilgisini konsola yazdırdım. Ve daha önce anlatmadığım break anahtar kelimesini kullanarak while döngüsünü bozdum. Sonraki satırlara geçmeden döngüden çıkıp; for döngüsüne geri dönmesini sağladım.
Tam burada break anahtar kelimesi için parantez açmak gerekli. break döngüleri bozan bir anahtar kelimedir ve derleyici bu satıra geldiğinde içerisinde yazıldığı döngüyü bozarak döngüden çıkar. break anahtar kelimesi sonrasında yazılanlar hiçbir anlam ifade etmezler.
Bir de continue anahtar kelimesi var. continue ise döngüyü bozmadan bir sonraki adıma geçirir. Aynı break gibi kendinden sonraki satırların bir anlamı yoktur ancak continue döngüyü bozmaz devam ettirir.
52. -54. satır: Console.log(“…”); ile konsola savaş ile ilgili bilgi yazdırdım.
55. satır: Kahramana saldır fonksiyonu ile saldırıp yeni hayat değişkenini kahramanın hayat değişkenine atadım.
56. satır: Console.log(“…”); ile konsola savaş ile ilgili bilgi yazdırdım.
57. – 60. satır: Kahramanımız ölmüş ise console(“…”); ile konsola bilgi yazıp break komutu ile while döngüsünü kırıp çıktım.
61. satır : while döngüsü kapsayıcı sonu.
62. – 64. satır: Kahramanın hayatı “0” ise artık sonraki düşmanları görmesinin bir anlamı kalmadığı için break komutu ile for döngüsünü kırıp fonksiyona çıktım.
65. satır: for döngüsü kapsayıcı sonu.
66. satır: Savaş fonksiyonu kapsayıcı sonu.
68. satır: Savaş fonksiyonunu çağırdım.
Uzun bir yazı oldu. 🙂 JavaScript çok büyük bir derya tabii ki de 2 yazılık bir Javascript dersi ile bitmesi düşünülemez. JavaScript dersleri serisi ile uzun bir yolculuğa giriş yaptınız. Artık daha gelişmiş JavaScript dersleri için hazırsınız.
Görüşlerinizi, eksik yada yanlış gördüğünüz yerleri, aklınıza takılanları ve havadan sudan sorularınızı yazmayı unutmayın. 😀
TeknoTower platformunda sonraki yazılarımda görüşmek üzere.
