Web Sayfalarının Beyni: Javascript -2
Bir önceki yazımızda Javascript’in ne olduğunu ve hangi geliştirme ortamı ile geliştirebileceğimize baktık. Bu yazımızda değişkenler, diziler ve döngüleri inceleyeceğiz.
Değişken nedir?
Bir web sayfası düşünün orada sayılar ve yazılar var. Biz bu sayı ve yazılara veri diyoruz. Verileri de Javascript’te işlemek için değişkenlere ihtiyacımız var.
Javascript’te değişken tanımlamak için;
Programlama dillerinde değer atamak için; değeri atayacağımız değişken = atanacak değer şeklinde tanımlama yapılması gerekir.
Değişken tanımlarken bazı kurallara uymamız gerekiyor. Bu kurallar;
- Değişken isimlerinde harf, rakam, alt çizgi ve dolar işareti olabilir.
- Değişken isimleri harf, alt çizgi veya dolar işareti ile başlayabilir.
- Değişken isimleri BÜYÜK küçük harf duyarlıdır. (a ve A farklı değişkenlerdir)
- Değişken isimleri arasında boşluk bırakılmaz.
- JavaScript anahtar kelimeleri değişken adı olarak kullanılamaz. (var, let, if, while…vb)
- Değişken isimlerinde Türkçe karakter kullanılabilir. Ancak kullanılması tavsiye edilmez.
Javascript’te 3 tip veri türü vardır. Bunlar; number, string ve booleandır.
Number: Sayısal veri türleridir. Örneğin; 3, 3.14, 1.312321, 21312321…
String: Metinsel veri türleridir. Bir değişkene string bir ifade atamak için eşittirin sağına yazdığımız metinsel ifadeyi çift tırnak(“”) veya tek tırnak(‘’) arasına almamız gerekir.
Boolean: Doğru veya yanlış olarak 2 tür değer alabilen veri türüdür. Boolean veri türüne true veya false değer atanabilir.
Aşağıdaki örnekte bir değişken tanımlayıp console ekranında gösterdim ve aynı değeri bir de değişkene atamadan console ekranında gösterdim. Aynı sonucu aldığım halde neden değişken tanımlamaya ihtiyacım var?
Yukarıdaki koda baktığımızda değişkene çok gerek olmadığı görülüyor fakat durum öyle değil. Bizim web sayfalarımız birçok sayfadan oluşuyor ve birçok yere “Hello World” yazdığınızı düşününn. Sonra yönetim gelip dedi ki artık “Hello World” değil de “Hello World!!!” yazmak istiyoruz. Bu durumda değişken kullanmadığınız için “Hello World” yazığınız her yere gidip düzeltme yapmanız gerekir. Fakat name değişkenini tanımlarsanız sadece name değişkeninde düzeltme yapmanız bütün kodunuzun düzelmesini sağlar ve sizi kod tekrarından kurtarır.
Var, Let, Const nedir?
Değişken tanımlarken değişkenin başında kullanılan anahtar kelimelerdir. Var keywordu yerini Es6 ile gelen let ve const keywordlerine bırakmıştır. Var keywordunu hayatımızdan çıkarıyoruz. Ama neden?
Javascript 3.part kitaplıkları kullanan bir programlama dilidir ve bizim tanımladığımız değişkenler aynı isimle bu kitaplıklarda da tanımlı olabilir. Var keywordu global tanımlıdır ve başka yerde farklı tanımlı ise biz istediğimiz sonucu ekranda göremeyiz. Let keywordu ise tanımlı olduğu süslü parantezler arasında geçerlidir. Bu sayede 3.parti kitaplıklarda farklı tanımlı olsa bile bizim değişkenimize müdahale izni yoktur. Yukarıda örnekte daha net bir şekilde var ve let farkı görülmektedir. Var keywordunun global tanımlı olması ve bu durum bizi olumsuz etkileyebilmesinden ötürü let keywordu kullanıyoruz.
Const keywordu ise sabit tanımlama yapacağımız ve daha sonra değişmesini istemediğimiz değerler için kullanılır. Mesela pi sayısı 3.14'tür ve değişmez. Değiştirmeye çalıştığımız zaman hata ile karşılaşırız.
Peki bir e-ticaret sitesi düşünün. Buradaki bilgisayarların kaç tane olduğunu biliyor muyuz? Bilsek bile hepsini tek tek tanımlamak bir işkence olurdu heralde. Peki aynı türden veriler için ne kullanabiliriz. Tabiki diziler.
Array (Dizi) Nedir?
Birden fazla verinin tutulması için oluşturulan değişkenlere array adı verilir. Array içerisinde tanımlanan her bir veriye eleman denir ve her eleman 0 dan başlayarak artan indeks değerine sahiptir. İndeksler sayesinde arrayin elemanlarına rahatça ulaşabiliriz. Arrayimizin uzunluğuna .length ile ulaşabiliriz. Array iki şekilde tanımlanabilir:
let fruits = [“Elma”, “Armut”]
let fruits = new Array(“Elma”, “Armut”)
Arraylere yeni eleman eklemek, olan elemanı silmek veya olan elemanı güncellemek gibi işlemleri yapabiliriz.
Peki array mantığını anladık ama arraydeki verileri ekrana basarken tek tek mi çağıracağız yoksa arrayimizi bir döngüye alıp o döngünün bizim yerimize bütün elemanları çağırmasını mı sağlayacağız?
Loop (Döngü) Nedir?
Loop, bizim belirlediğimiz kural boyunca tekrar tekrar çalışan ve bizi uzun kod satırlarından kurtaran kod bloğudur. Farklı farklı döngü yöntemleri bulunmaktadır. for, while, do/while, forEach, for…in, for…of gibi. Bu yazıda for looptan bahsedeğim. Bir for loop basitçe şu şekilde tanımlandır:
for(let i = 0; i < arrayimiz.length; i++) {}
buradaki let i = 0, bir değişken oluşturup döngüyü onun ulaşacağı sayıya kadar döndürmemiz için var. i < arrayimiz.length ise oluşturduğumuz i değişkeni hangi şarta kadar devam etmesi gerektiğini söylediğimiz kısım. i++ ise döngü her tamamlanışında i’nin artış veya azalış durumunu kontrol eder.
Yukarıdaki kodda fruits arrayine yeni meyveler eklense bile for döngüsü fruits arrayini döndüğü için bir değişiklik yapmadan yeni meyvelerimizi de ekranda görebileceğiz.
