A'dan Z'ye Javascript 1 | TurkHackTeam

TürkHackTeam.org
[A’DAN Z’YE] JAVASCRİPT ÖĞRENİYORUZ #1
KODLAMA İÇİN GEREKLİ ORTAMIN HAZIRLANMASI
İlk olarak Visual Studio Code editörünü aşağıdaki resmi sitesinden indirip kurabilirsiniz.
https://code.visualstudio.com/download
İndirip kurduktan sonra eklentilerimizi kurmaya başlayalım. Eklentiler sayfasına gitmek için editörün
sol taraftaki panelinde bulunan "Extensions" simgesine tıklıyoruz,

Ardından arama kısmına "javascript Code Snippets" yazarak çıkan eklentiyi kuruyoruz. Bu eklenti
önceden tanımlanmış kod parçalarını içerisinde bulundurduğu için kod yazımımızı hızlandıracak ve
kolaylaştıracaktır.
Şimdi arama kısmına "Live Server" yazarak çıkan eklentiyi kuruyoruz. Bu sayede kodlarla yaptığımız
değişiklikleri anlık olarak görüntüleyebileceğiz.
Eklentilerimizi de kurduğumuza göre artık başlayabiliriz.
JAVASCRİPT DOSYASINI HTML DOSYASINA DAHİL ETME
Masaüstüme "javascript" adında bir klasör oluşturdum. Editörüm ile bu klasörü açıyorum. Bu andan
itibaren işlemlerime bu klasör ile devam edeceğim. Editör üzerinde klasörümüzün içerisine

"index.html" adından bir dosya oluşturuyorum. Ardından aynı klasör içerisine "app.js" adında
javascript dosyası oluşturuyorum. Şimdi Js dosyamızı index.html dosyamıza dahil edelim. Bu sayede
app.js dosyasına yazdığımız javascript kodları web sitemizde çalıştırılmış olacak. Bunun için html
dosyamızda <body></body> tagleri arasına aşağıdaki kodu yazıyoruz;
<script src="app.js"></script>
Bu sayede Js dosyamız html dosyamıza dahil edilmiş oldu.
WEB GELİŞTİRİCİ ARACI VE CONSOLE
Bu araç tarayıcılar üzerinde kodları denemek için kullanılan araçlara web geliştirici aracı adını
veriyoruz. Web geliştirici aracına klavye üzerinde "F12" tuşuna basarak erişebiliriz. (Aslında hepimizin
bildiği 'Öğeyi Denetle' olayı :) )
Aracımızın "Console" kısmına gelerek kodlarımızı burada denemeye çalışalım ve aşağıdaki kodu
yazalım, (Yazdığımız kodları console satırında görüntülemek için console.log(); kodunu kullanıyoruz. )
console.log("Merhaba Dünya");
Kodumuzu yazdıktan sonra aşağıdaki resimde de gördüğünüz üzere yazdığımız kodun değeri
karşımıza aynı ekranda çıktı

Web geliştirici aracı üzerinde yaptığımız bu işlemlerin tamamını editörümüz üzerinde de yaparak
"console" üzerinde görüntüleyebiliriz. Bu sayede kodlarımızın değerini "console" üzerinde görmüş ve
denemiş olduk.
JAVASCRİPT DEĞİŞKEN OLUŞTURMA
VAR DEĞİŞKENİ
Bu değişken, belirlediğimiz değişkenlere değer atamamızı sağlar. Aşağıdaki kodlar ile a, b ve c
değişkenlerine değer atadım. Javascriptte yazdığımız kodların çalışması için kodların sonuna noktalı
virgül (;) koymamız gerekiyor. Bu nedenle yazdığımız her bir kod için noktalı virgül kullanıyoruz. Örnek
kullanımına bakabilirsiniz,
var a = 10;
var b = 20;
var c = 30;
Siz değişkenlerin isimlerini ve değerlerini istediğiniz gibi değiştirebilirsiniz. Şimdi bu değerleri
console'a yansıtacak olan kodu giriyorum,
console.log(a,b,c);
Yukarıdaki kod a, b ve c değişkenlerini aşağıdaki gibi tarayıcımızın console kısmına yazdırdı;

PRİMİTİVE VERİ TİPLERİ
Sadece değişkenin değerini gösteren veri tipleridir.
NUMBER VERİ TİPİ
Değişkene atadığımız sayı değerinin konsol üzerinde sayı olarak görüntülendiği veri tipidir. Örneğin;
var a = 10;
console.log(a);
"Peki değişkenlerin veri tiplerini nasıl öğrenebiliriz?" Diyecek olursanız da bunun için aşağıdaki kodu
yazdığımızı ve değişkenimizi oluşturduğumuzu farz edelim.
var a = 10;
Bu değişkenimizin veri tipini öğrenebilmek için aşağıdaki kodu yazıyoruz,
console.log(typeof a);
Bu kodu yazdıktan sonra "console" kısmına baktığımızda değişkenimizin veri tipini öğrenebiliriz.
Gördüğünüz gibi "Number" veri tipinde olduğunu öğrendik,

STRİNG VERİ TİPİ
Değişkene atadığımız yazı değerinin console üzerinde de yazı olarak görüntülendiği veri tipidir. Bu veri
tipini kullanırken değişkenimize ait değeri tırnak (") içerisine almamız gerekiyor. Örneğin "a" isimli
değişkenimizin değeri "javascript" olsun. "javascript" değerini kod üzerinde tırnak içerisinde
göstermemiz gerekiyor. Şimdi bir örnek yapalım,
var a = "javascript";
Bunu aşağıdaki kodla console üzerine yazdırdığımızda,
console.log(a);
Console üzerinde aşağıdaki gibi görüntülenecek.

Şimdi bu değişkenimizin veri tipini öğrenelim. Aşağıdaki kodu editörümüz üzerinde yazıyoruz,
Ve gördüğünüz gibi değişkenimizin veri tipinin "String" olduğunu gördük

BOOLEAN VERİ TİPİ
Bu veri tipine ait değişkenler yalnızca "true" ya da "false" değerini alabilirler. Koşul durumunda
kullanılan veri tipidir. Örnek kullanımı aşağıdaki gibidir;
var a = true;
Şimdi bu değişkenimizin veri tipini öğrenelim;
Aşağıda da gördüğünüz gibi değişkenimizin veri tipi boolean,

NULL VERİ TİPİ
Değer olarak atandığı değişkeni boş değerli olarak gösteren veri tipidir. Değer kısmına yalnızca "Null"
değeri alır. Örnek kullanımını aşağıda görebilirsiniz;
var a = null;
console.log(a);
Yukarıda a değişkenime null değerini atadım ve alttaki kod ile console üzerine yazdırdım. Ve console
üzerinde aşağıdaki gibi göründü;

UNDEFİNED VERİ TİPİ
Değer verilmeyen değişkenlerin veri tipidir. Örneğin "a" değişkenimizi atadık ancak değerini
vermedik. Bu durumda değişkenimizin veri tipi "Undefined" olacaktır.
var a;
Üstteki kodu girdikten sonra aşağıdaki kod ile console ekranı üzerine yazdırmak istediğimizde
console.log(a);
Tarayıcımızın console kısmında aşağıdaki gibi görünecektir,

REFERENCE VERİ TİPLERİ
Bellekte bir yeri gösteren modern veri tipleridir
ARRAY
Birden fazla değerleri belirtmek için kullanılan veri tipidir. Örneğin, "a" değişkenimize "1, 2, 3, 4"
değerlerini aynı anda atayalım. Bunun için aşağıdaki kodu yazıyoruz,
var a = [1,2,3,4];
Şimdi bu değerleri aşağıdaki kodlarla console üzerine yansıtalım,
console.log(a);
Tarayıcımızın console kısmına baktığımızda aşağıdaki gibi göründüğünü öğrendik,

Şimdi
bu veri tipimizin ne olduğuna bakalım. Aşağıdaki kodu yazıyoruz,
Tarayıcımızın console kısmına tekrar baktığımızda yazdığımız modern kodların birer obje olması
sebebiyle veri tipinin yazması gereken yerde "Object" yazdığını gördük.

DEĞİŞKEN TANIMLAMA
ES6 Standartı sayesinde Javascript değişkenleri "var" anahtar kelimesine ek "let" ve "const" anahtar
kelimeleriyle de tanımlanabilmektedir. "var" anahtar kelimesini önceki başlıklarımızda bahsettiğimiz
için bu başlıkta değinmeyeceğim.
LET İLE DEĞİŞKEN TANIMLAMA
let anahtar kelimesini var anahtar kelimesinden ayıran temel özellik let ile tanımlanan değişkenin
tekrar tanımlanamamasıdır. Örneğin "a" değişkenini "10" değeri ile tanımladık. Bu değişkeni ikinci kez
farklı bir değer ile tanımlamaya çalıştığımızda hata verecektir. Örneğin, kodumuzu aşağıdaki gibi
oluşturduğumuzu varsayalım.
let a = 10;
let a= 20;
console.log(a);
Yukarıdaki kodu kaydedip tarayıcımızdan console kısmına baktığımızda aşağıdaki gibi bir uyarıyla
karşılaşacağız,

CONST İLE DEĞİŞKEN TANIMLAMA
Bu anahtar kelimeyle oluşturulmuş değişkenin değeri tanımlandıktan sonra başka bir kod öbeği
içerisinde değiştirilemez. Örneğin aşağıdaki kod ile "a" isimli değişkenimizi tanımlayıp konsola
yazdıralım,
const a = 10;
console.log(a);
Bu kodumuz çalışacak ve tanımladığımız değer console üzerinde görünecektir. Lakin farklı bir kod
öbeği içerisinde "a" değerini tekrar tanımlamak istediğimizde bunu başaramadığımızı göreceğiz.
Örneğin "a" değişkenimizi "10" değeri ile tanımlayalım. Ardından farklı bir kod öbeğinde "a"
değişkenimizi "20" olarak tanımlayalım. Bakalım ne olacak,
const a = 10;
console.log(a);
a = 20;
console.log(a);
Kodu kaydedip console'a baktığımızda aşağıdaki gibi "typeerror" hatasıyla karşılaştık;

Şimdi
bu durumu bir de arraylerde ele alalım. const ile tanımladığımız değişkeni tekrar tanımlamak
istediğimizde tıpkı yukarıdaki gibi bir hatayla karşılaşacağız. Örneğin "a" değişkenimizin değeri array
olarak "1,2,3,4,5" olsun. Biz bu değeri farklı bir öbekte "1,2,3,4,5,6" olarak değiştirdiğimizde yine aynı
hatayı alacağız. Yani aşağıdaki gibi bir kod yazdığımızda aynı hata karşımıza tekrar gelecek.
const a = [1,2,3,4,5];
a = [1,2,3,4,5,6];
console.log(a);
Ancak biz "a" değerinin referans gösterdiği yeri değiştirmek yerine referans gösterdiği yerin değerini
değiştirdiğimizde bu hatayla karşılaşmayacağız. Örneğin kodumuzu aşağıdaki şekilde oluşturalım.
const a = [1,2,3,4,5];
Bu kodu oluşturduktan sonra "a.push();" kodu ile referans gösterilen yerin değerine ekleme yapalım.
Diyelim ki "a" değişkenimizin değerine ek olarak "6" değerini de ekledik. Bunun için kodumuzu
aşağıdaki şekilde yazıyoruz.
a.push(6);
Yani kod öbeğimiz şu şekilde oluşuyor;
const a = [1,2,3,4,5];

a.push(6);
Bunu da console üzerinde yazdırdığımızda hata vermediğini ve "6" değerini değişkenimize
tanımladığını göreceğiz.
VERİ TİPLERİNİ BİRBİRLERİNE DÖNÜŞTÜRME
Bu başlığımızda veri tiplerini birbirine dönüştürme işlemlerini anlatacağım. Örneğin string veri tipinde
bir değişkeni number veri tipine dönüştürme ya da number veri tipindeki bir değişkeni string veri
tipine dönüştürme işlemlerini yapacağız.
VERİ TİPLERİNİ STRİNG VERİ TİPİNE DÖNÜŞTÜRME
İlk olarak let ile "value" isminde bir değişken oluşturuyorum ve buna "10" değerini tanımlıyorum,
let value ();
value = 10;

Ardından bu kod öbeğime aşağıdaki kodu da ekleyerek ekranıma yazdırıyorum,
console.log(value);
Totalde aşağıdaki gibi bir kod öbeğim oluşmuş oldu,
let value;
value = 10;
console.log(value);
Daha önceki bilgilerimizden faydalanarak "value" isimli değişkenimizin number veri tipinde olduğunu
görebiliyoruz. Şimdi bu değişkenimizi string veri tipine dönüştürelim. Bunu "10" olarak tanımladığımız
değeri parantez () içine alarak ve başına "String" yazarak gerçekleştirebiliriz. Bunu koda dökecek
olursak aşağıdaki gibi bir kod yazmamız gerekir,
let value;
value = String(10);
console.log(value);
Yukarıdaki kodu yazdıktan sonra console üzerinde oluşan değer değişmeyecek ancak veri tipimizin
değiştiğini göreceğiz. Bunu daha önceden de öğrendiğimiz gibi aşağıdaki kod ile kontrol edebiliriz,
console.log(typeof value);
Konsolumuza baktığımızda veri tipinin string veri tipine değişmiş olduğunu gördük,

Boolean veri tipini de yine aşağıdaki gibi string veri tipine dönüştürebilmemiz mümkün,
let value;
value = String(true);
Değişkenin veri tipini kontrol etmek için kod öbeğimize aşağıdaki kodu da ekledikten sonra console
üzerinde veri tipinin string veri tipi olduğunu göreceğiz,
console.log(typeof value);

Aynı şekilde örneğin, "10" değeri ile tanımlanmış number veri tipine sahip value değişkenimizi string
veri tipine çevirmek istediğimizde aşağıdaki gibi bir kod yazabiliriz,
let value;
value = (10).toString();
Üstteki kodu editörümüze yazıp altına aşağıdaki kodu yazdıktan sonra console kısmına baktığımızda
veri tipimizin string veri tipine dönüşmüş olduğunu göreceğiz
console.log(value);
VERİ TİPLERİNİ NUMBER VERİ TİPİNE ÇEVİRME
Farklı veri tiplerine ait değerler Number parantezi içerisine alınarak number veri tipine çevrilebilir.
Örneğin "value" isimli değişkenimizin "10" string değerine sahip olduğunu varsayalım ve bunu koda
dökelim. Kodumuz aşağıdaki gibi olacaktır.

let value = ("10");
Biz bu string veri tipine sahip değişkenimizi number veri tipine çevirmek için değerimizi tıpkı string
parantezine aldığımız gibi number parantezi içerisine alacağız. yani kodumuz aşağıdaki gibi olacak;
let value = Number("10");
Biz bunu console üzerine yazdırdığımızda aşağıdaki gibi number veri tipine sahip olarak görünecek
Null veri tipi için de aynı işlemleri yaptığımızda yine number veri tipine dönüştüğünü göreceğiz. Ancak
undefined veri tipinin değeri tanımsız olduğu için number veri tipine çevrilmeye çalışıldığında NaN
(Not a Number) şeklinde bir cevap çıkacak ve number veri tipine çeviremeyecektir. Aynı şekilde
parantez içerisine "Ahmet", "Ali" gibi textler girdiğimizde ya da array oluşturduğumuzda belli bir sayı
değeri olmadığı için console üzerinde NaN şeklinde bir cevap dönecektir.
Number parantezi ile gerek ondalık sayı olsun gerek tam sayı olsun her türlü stringi number veri
tipine dönüştürebiliriz. Ayrıca ondalık sayılar için ayrı tam sayılar için ayrı kodlar kullanarak da
dönüşüm işlemini gerçekleştirebiliriz. Ondalık sayılar için olanla başlayalım. Burada "value"

değişkenini tanımlayan sayımız "1.15" ve veri tipimiz string olsun. Bu değişkenin veri tipini number
veri tipine dönüştürmek için aşağıdaki kodu kullanacağız;
let value;
value = parseFloat("1.15");
Bu kod ile ondalık sayıları içeren stringimizi number'a çevirmiş olduk. Şimdi tam sayıları içeren
stringimizi ona özel kodla number'a çevirelim. Değişken ismimiz yine "value" ve değişkenimizi
tanımlayan tam sayımız "1" ve veri tipimiz string olsun. Bu değişkeni number'a çevirmek için aşağıdaki
kodu kullanabiliriz,
let value;
value = parseInt("1");
Bu kodu console üzerine yazdırdığımızda number veri tipine dönüşmüş olduğunu görebiliriz.
Şimdi veri tipi dönüştürme işlemini otomatik olarak nasıl yapabileceğimize bakalım. Aşağıdaki gibi bir
kod girelim. Bu kodda "a" değişkenine 2 değer atadım. javascript bu veri tipinin dönüşüm işlemini
otomatik olarak yapacak,
const a = "hello" + "10";
Yukarıdaki koduma aşağıdaki kodu ekleyerek veri tipine bakmak istiyorum,
Totalde kod öbeğim aşağıdaki gibi olacak,
const a = "hello" + "10";
Aşağıda da gördüğünüz gibi 2 değer atadım ve javascript bunları birleştirerek string olarak
görünmesini sağladı.

ARİTMETİK OPERATÖRLER
Aritmetik operatörler başlığı altında JS üzerinde Toplama, çıkarma, bölme, çarpma operatörlerini
işleyeceğiz. Bunun için ilk olarak 2 değişken oluşturuyoruz ardından bu değişkenlere değer atıyoruz.
let value;
const value1 = 10;
const value2 = 20;
Yukarıda gördüğünüz üzere 2 farklı değişken oluşturdum. Şimdi bu değişkenlerimizi toplama
operatörümüzü kullanarak toplayalım. Bunun için yukarıdaki kodların altına aşağıdaki gibi bir kod
yazıyoruz,
console.log(value1 + value2);
Üstteki kodu yazıp kaydettikten sonra tarayıcı üzerinde console kısmını kontrol ettiğimizde aşağıdaki
gibi "value1" ve "value2" değerlerini topladığını ve sonucu console üzerinde gösterdiğini görüyoruz,

Şimdi değişkenlerimizi ve değerlerini değiştirmeden aynı kodlar üzerinde çıkarma işlemi yapalım.
Kodumuz aşağıdaki gibi olacaktır,
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 - value2);
Kodu kaydedip konsolu görüntülediğimizde işlemi yaptığını ve sonucu console üzerine yazdırdığını
görebiliyoruz,

Değişkenleri ve değerlerini değiştirmeden şimdi de çarpma işlemini yapalım çarpma işlemi için
simgemiz "*" budur. Çarpma işlemi kodumuzu yazalım,
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 * value2);
Şimdi console kısmına bakalım ve çarpma işlemimizin sonucu ekranda görelim

Yine değişken ve değer değişimi yapmadan bölme işlemini gerçekleştirelim. Bu işlem için "/"
operatörünü kullanacağız. Kodumuz aşağıdaki gibidir,
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 / value2);
Console kısmına baktığımızda aşağıdaki gibi bölme işleminin gerçekleştiğini ve sonucun ekrana
yazdırıldığını görüyoruz;

Şimdi ise iki değişkenin bölümünden kalanı görebilmek için aşağıdaki kodu yazacağız. Burada
kullanacağımız operatör "%" operatörü,
let value;
const value1 = 10;
const value2 = 20;
console.log(value1 % value2);
Gördüğünüz gibi bölme işleminden kalanı console üzerinde görebildik,

MATH OBJESİ VE METODLARI
İçerisinde birçok matematik fonksiyonu ve özelliği barındıran bir objedir.
Şimdi bu objeyi tanıyalım. Örneğin javascript üzerinde "Pi sayısı" değerine ulaşmak istiyoruz. Bunun
için aşağıdaki kodu kod satırımıza girmemiz ve console üzerine yazdırmamız yeterli, (console.log();
kodunu kafa karıştırmaması için bu başlık altında anlatımıma eklemiyorum. Lakin console üzerinde
sonuçları görebilmeniz için bu kodu yazdığımız kodların sonuna eklemelisiniz. Bunu zaten önceki
başlıklarımızda öğrenmiştik)
let value;
value = Math.PI

Şimdi javascript math objesi ile ondalık sayıyı en yakın tam sayıya yuvarlayalım. İlk olarak yuvarlamak
istediğimiz sayıyı belirtelim. Ben "3.4" sayısını belirliyorum ve aşağıdaki kodu yazıyorum,
let value;
value = Math.round(3.4);
Bu kodu console üzerine yazdırdığımızda aşağıdaki gibi en yakın tam sayıya yani "3"e yuvarlanmış
oldu.

Şimdi ise bütün ondalık sayıları bir üstündeki tam sayıya yuvarlayan metoda bakalım. "Math.ceil"
metodunu kullanacağız kodumuzu yazarken. Örneğin sayımız yine "3.4" olsun. Bizim bu sayımızın bir
üstündeki tam sayı "4" olduğundan javascript sayımızı "4"e yuvarlayacaktır. Kodumuz aşağıdaki gibi,
let value;
value = Math.ceil(3.4);
Aşağıda da gördüğünüz üzere sayımız "4"e yuvarlandı

Tam tersi olarak verilen ondalık sayıyı bir altındaki tam sayıya yuvarlayan bir metodumuz da mevcut.
Bu operatörümüz "math.floor" metodu. Bu sefer sayımız "3.8" olsun. javascript bunu "3" sayısına
dönüştürecektir. Bakalım öyle mi olacak
let value;
value = Math.floor(3.8);
Tahmin ettiğimiz gibi sayımız "3"e yuvarlandı.

Bir de karekök alma metodumuz mevcut. Bu metodumuz "Math.sqrt" metodu. Karekökünü
alacağımız sayı "36" olsun. Kodumuzu aşağıdaki şekilde yazıyoruz,
let value;
value = Math.sqrt(36);
Aşağıda da gördüğünüz gibi "36" sayısının karekökünü alarak bize "6" sayısını verdi.

Şimdi mutlak değer alma metodumuzu kullanalım. Metodumuz "Math.abs" metodu. Mutlak değerini
almak istediğimiz sayı ise "-36" olsun. Kodumuzu aşağıdaki gibi yazıyoruz,
let value;
value = Math.abs(-36);
Aşağıda gördüğünüz gibi "-36" sayısının mutlak değerini alarak bize "36" sayısını verdi

Şimdi üs alma metodunu kullanalım. Metodumuzun adı "Math.pow" metodu. Üssünü almak
istediğimiz sayı ise "10" olsun ve "10" sayısının 4. kuvvetini almak isteyelim. Kodumuzu aşağıdaki gibi
yazıyoruz,
let value;
value = Math.pow(10,4);
Aşağıda gördüğünüz gibi "10" sayısının 4. kuvvetini aldı ve console üzerine yazdırdı.

Şimdi max metodunu kullanarak belirtilen sayılar arasında en büyük sayıyı console üzerine
yazdıracağız. Bunun için "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi
yazıyorum,
let value;
value = Math.max(1,10,-100,50);
Aşağıda da gördüğünüz gibi bu sayılar içinden en büyük sayımızı bulduk,

Şimdi belirtilen sayılar arasından en küçük sayıyı bulup ekrana yazdıracağız. Bunun için "Math.min"
metodunu kullanacağız. Yine "1", "10", "-100" ve "50" sayılarını belirliyorum ve kodumu aşağıdaki gibi
yazıyorum,
let value;
value = Math.min(1,10,-100,50);
Gördüğünüz gibi en küçük sayımız -100 olarak karşımıza çıktı,

Şimdi 0 ile 1 arasında rastgele sayı üretme metodumuzu kullanalım. Metodumuzun adı
"Math.random" Kodumuzu aşağıdaki gibi girdiğimizde sayfayı her yenilediğimizde javascript bize 0 ile
1 arasında rastgele olarak farklı sayılar verecek,
let value;
value = Math.random();
Biz 0 ile 50 arasında rastgele bir sayı üretmesini istersek kodumuza "*50" şekline bir ekleme
yapıyoruz. Yani kodumuz aşağıdaki gibi oluyor,
let value;
value = Math.random() *50;
Diyelim ki 0 ile 50 arasında rastgele tam sayılar üretmek istedik. Bunun için de daha önceden
öğrendiğimiz "Math.floor" metodunu "Math.random" metodu ile birleştireceğiz. Kodumuz aşağıdaki
gibi olacak,
let value;

value = Math.floor(Math.random() *50);
STRİNG METODLARI
Bu başlığımızda javascriptte stringleri biraz daha tanıyacak ve metodlarını öğreneceğiz. İlk olarak
stringleri uç uça ekleme metodumuzu görelim. Bunun için iki farklı değişken oluşturalım. Öncesinde
"value" isimli değişkenimizi oluşturalım. Bu değişkene değer vermeyeceğiz. Çünkü birazdan
oluşturacağımız 2 değişkenin tanımı niteliğinde olacak. Aşağıdaki kodu yazarak value isimli
değişkenimizi oluşturuyoruz,
let value;
Ardından "value1" ve "value2" adında 2 farklı değişken oluşturuyorum. "value1" değişkenimin değeri
"java", "value2" isimli değişkenimin değeri "script" olsun. Bunu aşağıdaki gibi koda döküyorum,
const value1 = "Java";
const value2 = "script";
Bu değişkenlerimizi oluşturduk. Şimdi sırada bu iki değişkenin değerini yani stringi uç uça ekleme
işlemi var. Bunun için değişkenlerimizi daha önce oluşturduğumuz "value" değişkenine tanımlayıp
"value1" ve "value2" değişkenlerinin değerleri arasına "+" operatörünü koyalım. Yani kodumuz
aşağıdaki gibi olacak,
value = value1 + value2;
Bu kodu da yazdıktan sonra şimdi yazdığımız kodları console üzerinde görüntüleyelim. Önceki
başlıklarımızda da yaptığımız gibi kodlarımızın altına aşağıdaki kodu ekliyoruz,
console.log(value);
Yani toplamda kodlarımız aşağıdaki gibi olacak,
let value;

console.log(value);
Sonuçta console'daki görüntü aşağıdaki gibi görünecek;
Şimdi biz stringleri uç uça eklerken arada boşluk olmasını istiyorsak bu sefer de değer atadığımız iki
değişkeni, "value" değişkenine tanımladığımız kod öbeğini aşağıdaki gibi değiştireceğiz.
value = value1 + " " + value2;
Bu sayede javascript boşluk bıraktığımız kısmın değer olduğunu varsayacak ve iki değişken arasına
boşluk koymuş olacak. Totalde kodlarımız aşağıdaki gibidir,
let value;

value = value1 + " " + value2;
console.log(value);
Aşağıda da gördüğünüz üzere araya boşluk bıraktı.
Şimdi değer atanan ve "value" ile eşitlenen değişkenlerimize ekleme yapmak istediğimizi varsayalım.
Yani konsolda "javascript" yazmasını değil "javascriptders" yazmasını isteyelim. Bunun için yeni bir
değişken oluşturmamıza gerek yok. değişkenlerimizin sonuna "+ "ders"" eklediğimiz zaman konsolda
karşımıza "Javascriptders" olarak çıkacak. Zaten "value" değişkenimizi "value1 + value2" şeklinde
tanımlamıştık. Bu yüzden bu iki değişkeni tekrar yazmadan aşağıdaki gibi bir kod yazabiliriz,
value = value + "ders";
Aynı zamanda aşağıdaki kod da yukarıda yazdığımız koda denk olacak istediğimizi kullanabiliriz,
value += "ders";

Yukarıdaki kodu diğer kodlarımız arasına eklediğimizde toplamda aşağıdaki gibi bir kod öbeğine sahip
olacağız,
let value;
value = value + "ders";
console.log(value);
kodları kaydedip console üzerine baktığımızda aşağıdaki gibi göründüğünü görmüş olacağız,
Şimdi string içerisindeki karakter sayısını bulmayı görelim. Bunun için kullanacağımız metod
"degiskenadi.length;" (degiskenadi yazan yere değişkenimizin adını yazıyoruz) Örnek kullanımı
aşağıdaki gibi olacak,
value = value1.length;

Toplamda aşağıdaki kod öbeğine sahip olacağız,
let value;
value = value1.length;
console.log(value);
Gördüğünüz gibi value1 değişkenine ait string değerinin karakter sayısını bize gösterdi,
Şimdi varolan değişkenimize uç uça string ekleme metodumuza bakalım. Kullanacağımız metod
"degiskenadi.concat()". Burada parantez içerisine virgülle ayrımak kaydıyla istediğimiz kadar string
girebiliriz. Örneğin "value1" stringini ilk olarak "value2" stringiyle ardından değişkene tanımlanmamış
"ders" stringiyle birleştirelim. Kodumuz aşağıdaki gibi olmalı,
value = value1.concat(value2,"ders");

Toplamda aşağıdaki kod öbeğine sahip olacağız,
let value;
value = value1.concat(value2,"ders");
console.log(value);
Şimdi varolan stringimizdeki bütün karakterlerin küçük harfle yazılması için
"degiskenadi.toLowerCase()" metodunu kullanacağız. Örnek kullanımı aşağıdaki gibidir,
value = value1.toLowerCase();
Sahip olduğumuz toplam kod öbeği aşağıdaki gibi olacak,

let value;
value = value1.toLowerCase();
console.log(value);
String içerisindeki bütün harfleri büyük yazmak istediğimizde "degiskenadi.toUpperCase()" metodunu
kullanıyoruz. Örnek kullanımı aşağıdaki gibidir,
value = value1.toUpperCase();
Toplam kod öbeğimiz aşağıdaki gibi olacak,
let value;
value = value1.toUpperCase();
console.log(value);
Şimdi string içerisinde indexlerden bahsedelim. Javascriptte stringlerde bulunan her bir karakter bir
index'e karşılık gelir ve bu indexler sırasıyla 0'dan balayarak 0,1,2,3,4... şeklinde isimlendirilirler. Biz
javascript üzerinde herhangi bir indexi çağırdığımızda o index hangi karaktere karşılık geliyorsa ekrana
o karakter yazdırılır. Örneğin "java" stringimizde 0. index "J" karakteridir. Aynı şekilde 1. index "a"
karakteri, 2. index "v" karakteridir gibi. Şimdi bu metodumuzu gösterelim. daha önceden
oluşturduğumuz "value1" değişkeninin 3. indexini çağırmak isteyelim. Bunun için aşağıdaki kodu
yazıyoruz,
let value;
value1 = "java";
value = value1[3];
console.log(value);
Kodumuzu kaydettikten sonra konsola bakalım. Gördüğünüz gibi Java kelimesinin 3. indexini yani "a"
karakterini ekranımıza yazdırdı,

Aynı şekilde bu metod yerine ".charAt()" metodunu da kullanabiliriz. Burada parantez içerisine indexi
yazarak konsolda hangi karaktere karşılık geldiği görülebilir. Bu metodun koda dökümü şu şekildedir.
value = value1.charAt(1);
Toplamda kod öbeği aşağıdaki şekilde olmalıdır.
let value;
value1 = "java";
value = value1.charAt(1);
console.log(value);
Şimdi stringin boyutunu bilmediğimiz durumlarda hangi index olduğunu da bilemeyeceğimiz için bu
seferde uzunluk metodunu kullanacağız. Bunun için stringde istediğimiz karakterin sondan kaçıncı
karakter olduğunu belirteceğiz. Örneğin "Java" stringinin sondan 2. karakterini görmek isteyelim.
Bunun için aşağıdaki kodu yazıyoruz,

value = value1[value1.length -2];
Toplamda kod öbeğimiz şu şekilde olacak,
let value;
value1 = "java";
value = value1[value1.length -2];
console.log(value);
Aşağıda da gördüğünüz gibi stringimizin sondan 2. karakteri ekranımıza yazdırıldı
Şimdi istediğimiz karakterin kaçıncı indexte olduğunu gösteren indexof metodunu kullanalım. "Java"
stringimizin "v" karakterinin kaçıncı indexte olduğunu görmek istediğimizi varsayalım. Bunun için
aşağıdaki kodu yazıyoruz,
value = value1.indexOf("v");

Toplamda kod öbeğimiz aşağıdaki gibi olmalıdır,
let value;
value1 = "java";
value = value1.indexOf("v");
console.log(value);
Aşağıda da gördüğünüz gibi "v" karakterinin kaçıncı indexte olduğunu gösterdi.
Şimdi split metodunu işleyelim. Virgüllerle ayrılmış elemanları tek tek almak istediğimizde split
metodunu kullanıyoruz. Örneğin "dil" isimli değişkenimize "ingilizce","almanca","fransızca" olmak
üzere 3 eleman ekledik ve bunları aşağıdaki gibi virgüllerle ayırdık,
let value;
const dil = "ingilizce,almanca,fransızca";

Virgüllerle ayrılmış bu elemanları konsol üzerinde ayırmak istediğimizde kodumuzu aşağıdaki gibi
yazıyoruz. Burada kodun sonuna "," ekleyerek elemanların hangi karaktere göre ayrılacağını
belirtiyoruz. Yukarıdaki kodda elemanları virgül ile ayırdığımız için burada "," işaretini kullanıyoruz,
value = dil.split(",");
Toplam kod öbeğimiz aşağıdaki gibi olmalıdır,
let value;
console.log(value);
Konsolu görüntülediğimizde elemanlarımızın aşağıdaki gibi arraylere ayrıldığını görüyoruz,
Şimdi yukarıda verdiğimiz "dil" değişkeni elemanlarından "almanca" elemanının yerine "Turkce"
koymak istediğimizi varsayalım. Bunun için replace metodunu kullanacağız. Öncelikle "dil" isimli
değişkenimizin değerlerine tekrar bakalım,

let value;
Burada "almanca" yerine "Turkce" yazmak istediğimizde aşağıdaki gibi bir kod yazıyoruz,
value = dil.replace("almanca","Turkce");
Toplamda kodlarımız aşağıdaki gibi olmalı,
let value;
value = dil.replace("almanca","Turkce");
console.log(value);
Konsolumuzu görüntülediğimizde istediğimiz gibi olduğunu göreceğiz

Şimdi stringimiz içerisinde istediğimiz elemanın varlığını kontrol edelim.Bunun için includes
metodunu kullanacağız. Örneğin ben "dil" değişkenimin içerisinde "fransızca" elemanının varlığını
kontrol etmek istiyorum. Eğer stringimizin içerisinde böyle bir eleman varsa konsol üzerinde "true"
yazdığını, yoksa "false" yazdığını göreceğiz. Kodumuzu aşağıdaki şekilde yazıyoruz,
value = dil.includes("fransızca");
Toplamda kodlarımız şu şekilde olmalı,
let value;
value = dil.includes("fransızca");
console.log(value);
Konsolumuzu görüntülediğimizde stringimizin içerisinde "fransızca" elemanı olduğu için "true"
şeklinde bir dönüt aldık.

TEMPLATE LİTERAL ÖZELLİĞİ
Bu özellik stringleri kolay bir şekilde biçimlendirmemizi sağlıyor. Şimdi bu özelliği kullanarak
stringlerimizi oluşturalım. 3 adet değişken oluşturup değerlerini tanımlayacağız. Ben const ile
aşağıdaki gibi 3 farklı değişken ve değer oluşturdum,
const name = "black";
const department = "bilgi";
const salary = 4000;
Şimdi bu değerlerimizi bir stringde birleştirmek istediğimizi varsayalım. Bunu normal şartlar altında
aşağıdaki gibi yapacaktık,
const a = "İsim: " + name + "n" + "Departman: " + department + "n" + "Maaş: " + salary;
Bu kodu konsolumuza yazdırdığımızda aşağıdaki gibi görünecek,

Biz bu kodları yazarak yukarıdaki gibi bir görüntü elde edebildik. Ancak bu kadar uğraşmadan daha
kolay bir şekilde yine aynı görüntüyü elde edebiliriz. Burada "template literal" özelliği devreye
girecek. Daha önceden oluşturduğumuz aşağıdaki değişkenleri yine editörümüze yazıyoruz,
const name = "black";
const department = "bilgi";
const salary = 4000;
Birazdan yazacağımız kodlarda " `` " işaretini kullanacağız. Bu işareti oluşturmak için " Alt Gr + noktalı
virgül ( ; ) " kombinasyonunu kullanabilirsiniz. Şimdi ilk olarak name değişkenimizden başlayalım. Bu
özelliği kullanırken değişkenimizi " ${} " içerisine alarak yazıyoruz. Yani name değişkeninden hareketle
ismimizi tanımlayacağımız için kodumuzu şu şekilde yazmamız gerekiyor; " `İsim:${name}n` "
Buradaki " n " bir sonraki tanımı yeni satıra yazmayı sağlayacak. Biz bu kodumuzu rastgele
oluşturduğumuz "a" değişkenine tanımlarsak aşağıdaki gibi bir kod oluşacak,
const a = `İsim:${name}n`;

Aynı şekilde "department" ve "salary" değişkenlerini de bu özellikle yazıp uç uça eklediğimizde "a"
değişkenine tanımlanan kodlarımız aşağıdaki gibi olacak,
const a = `İsim:${name}nDepartman:${department}nMaaş:${salary}n`;
Bu sayede yukarıdaki uzun kodu kısaltarak vakitten tasarruf edebildik.
ARRAYLERİN ÖZELLİKLERİ
Bu başlığımızda önceki başlıklarımızda da bahsettiğimiz Arrayleri ayrıntılı olarak inceleyecek ve
özelliklerine göz atacağız. Bu başlık altında değindiğim metodlar en sık kullanılan metodlardır. Diğer
tüm metodlara internet üzerinden erişim sağlayabilirsiniz. Ben örnek olması açısından en sık
kullanılan metodlardan bahsedeceğim. İlk olarak arrayleri nasıl oluşturabildiğimize bir bakalım.
"1,2,3,4,5,6" rakamlarından oluşan arrayimi aşağıdaki gibi yazabilirim,
let value;
const numbers = [1,2,3,4,5,6];
Aynı zamanda bir arrayi bu şekilde oluşturabildiğimiz gibi aşağıdaki gibi new Array metoduyla da
oluşturabilmemiz mümkün,
let value;
const numbers = new Array(1,2,3,4,5,6);
Şimdi "numbers" değişkenimizin uzunluğunu "degiskenadi.length" metodu ile görelim. Bu metodu
kullandığımızda "numbers" değişkenine ait arrayin kaç elemanlı olduğunu görebiliriz. Kodumuzu
aşağıdaki gibi yazıyoruz,
let value;
const numbers = [1,2,3,4,5,6];
value = numbers.length;
Bu kodu "console.log(value);" kodu ile konsola yazdırdığımızda arrayimizin 6 elemanlı olduğunu
görebiliyoruz.

Aynı zamanda stringlerde olduğu gibi arraylerde de elemanımızın kaçıncı indexde olduğunu ya da
kaçıncı indexte hangi elemanımızın olduğunu görebilme imkanımız var. Şimdi değişkenimizi ve
arrayimizi değiştirmeden 0. indexte hangi elemanımızın olduğuna bakalım aşağıdaki kodu yazıyoruz
value = numbers[0];
Kodumuzu konsola yazdırdığımızda konsol üzerinde "1" elemanımızı görebiliyoruz.
Şimdi herhangi bir indexteki değeri değiştirmeye çalışalım. "numbers" değişkenimizde "4" elemanının
yerine "10" yazmak istediğimiz düşünelim. Baktığımızda "4" elemanının 3. indexte olduğunu
görüyoruz. Bu nedenle kodumuzu aşağıdaki gibi yazdığımızda "4" elemanının yerine "10" yazılmış
olacaktır,
numbers[3] = 10;
Şimdi istediğimiz elemanın kaçıncı indexte olduğunu "indexOf" metoduyla görelim. Ben "6"
elemanımın kaçıncı indexte olduğunu bilmek istiyorum. Bu nedenle kodumu aşağıdaki gibi yazıyorum
ve "6" elemanının kaçıncı indexte olduğunu konsolda görebiliyorum,
value = numbers.indexOf(6);
Şimdi Arrayimizin sonuna "push" metodu ile eleman ekleyelim. Ben arrayime "7" elemanını eklemek
istiyorum. Bu nedenle aşağıdaki kodu yazıyorum,
numbers.push(7);
Bu şekilde arrayimin sonuna "7" elemanını eklemiş oldum. Şimdi arrayimizin başına eleman
ekleyelim. Bunun için "unshift" metodunu kullanacağız. Ben arrayimin başına "0" elemanını eklemek
istiyorum. Bunun için aşağıdaki kodu yazabilirim,
numbers.unshift(0);
Şimdi arrayimizn sonundan değer çıkartalım. Bunun için "pop" metodunu kullanacağız. Aşağıdaki
kodu yazdığımızda arrayimizin en sonundaki kod çıkartılmış olacak,

numbers.pop()
Aynı zamanda arrayimizin başından "shift" metoduyla eleman çıkartabiliriz. Bunun için aşağıdaki kodu
yazıyoruz,
numbers.shift()
Şimdi belirli indexler arasındaki elemanları çıkartmaya çalışalım. Bunu gerçekleştirebilmek için
"splice" metodunu kullanacağız. ben 0. indexten 4. indexe kadar bütün elemanları çıkartmak
istiyorum. bu nedenle aşağıdaki kodu yazarak bu isteğimi gerçekleştirebilirim,
numbers.splice(0,4);
Şimdi arrayimizdeki elemanları ters çevirelim. Bunun için "reverse" metodunu kullanacağız. Aşağıdaki
kodu yazdığımızda elemanlarımızın sıraı tersine çevrilecektir,
numbers.reverse();
Şimdi elemanlarımızı ilk karakterlerine göre küçükten büyüğe sıralayalım. Bunun için "sort" metodunu
kullancağız. Aşağıdaki kodu girdiğimiz zaman javascript elemanalarımızı yalnızca ilk rakamına bakarak
küçükten büyüğe doğru sıralayacak,
value = numbers.sort();
OBJE OLUŞTURMA
Bu başlığımızda javascript üzerinde obje oluşturacak ve bu objelerin özelliklerini ve işlevlerini
tanımlayacağız. İlk olarak bir örnekle başlamak istiyorum. Bir programmer objesi oluşturacağım ve bu
programmer'ın yani objemin özelliklerini belirleyeceğim. Aşağıdaki gibi bir kod yazıyorum.
Gördüğünüz gibi kodu yazarken süslü parantez " {} " kullandık. Bu süslü parantezimin içerisine
birazdan objemizin özelliklerini gireceğiz.

const programmer {};
Şablonumuzu oluşturduk şimdi objemize özellik atayalım. Ben bu objemin yani programmer'ımın
ismini, yaşını, mail adresini özellik olarak belirteceğim. Aşağıdaki gibi özellikleri süslü parantezin
içerisine yazararak ve her özelliğin sonuna virgül (,) ekleyerek objemi tanımlıyorum,
const programmer = {
name : "Black",
Age : 30,
Mail : "black@xx.com",
};
Aynı zamanda aşağıdaki gibi iç içe obje de kullanabiliriz. Mesela "Adres" adında bir obje oluşturup bu
objemi "programmer" objemle iç içe yazabilirim. Aşağıdaki gibi bir kod yazabiliriz.
const programmer = {
Name : "black",
Age : 30,
mail : "black@xx.com",
address : {
city : "antalya",
street : "Atatürk",
},
}
Şimdi konsol üzerinde bu objemizi ve özelliklerini görüntüleyelim. Ben aşağıdaki kodu üstteki kodalrın
sonuna ekleyerek yazdığım kodların konsolda görüntülenmesini sağlıyorum,
console.log(programmer);

Şimdi objemizi arraylerden oluşturalım. Bu sefer objemizin adı "programmer2" olsun. Bu sefer en
dışta köşeli parantez kullanacağız. Objemize özellik verirken yine süslü parantezimizi kullanacağız.
Arrayimi aşağıdaki gibi oluşturuyorum,
const programmer2 = [
{name : "Black", Age : 30},
]
Bu kodu konsola yazdırdığımızda konsolumuzda aşağıdaki gibi bir görüntü oluştuğunu görüyoruz,

ZAMAN OBJESİ VE METODLARI
Bu başlığımızda zaman objesi oluşturacak ve metodları ele alacağız. Başlangıç olarak şu anki zamanı
görüntüleyeceğimiz kodumuzu yazalım,
const date = new Date();
bu kodu yazdıktan sonra konsola yazdırdığımızda aşağıdaki gibi şu anki zamanı bize verecek,

Şimdi doğum tarihimizi javascript zaman objesi ile yazmaya çalışalım. Ben Mustafa Kemal Atatürk'ün
doğum tarihini ay/gün/yıl şeklinde yazdıracağım. Objeme "birthday" adını veriyorum ve aşağıdaki
kodu yazıyorum,
const birthday = new Date(5/19/1881);
Bu kodu " console.log(birthday); " kodu ile konsolumuza yazdırdığımızda aşağıda gördüğünüz gibi
Atatürk'ün doğum tarihini görebildik.

Şimdi "birthday" objemizin üzerinde çeşitli metodları deneyelim. İlk olarak "birthday" metodu
üzerinde belirttiğimiz ayın yılın hangi ayı olduğunu "getMonth" metodu ile görelim. Aaşğıkdai kodu
"birthday" objemize ait kodların altına yazıyoruz.
value = birthday;
value = birthday.getMonth();
kodumuzu konsol üzerine yansıttığımızda Mayıs ayı yılın 5. ayı olduğu halde aşağıdaki gibi "4" sonucu
elde ettik. Bunun sebebi javascriptin saymaya "0" sayısından başlamasıdır. Bu durumda Ocak 0. ay
olacak dolayısıyla mayıs ayı da 4. ay olmuş olacak.

Şimdi getDate metodunu kullanarak "birthday" objesinde günün ayın hangi günü olduğunu tespit
edeceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
value = birthday.getDate();
getDay metodunu kullanarak günümüzün haftanın kaçıncı günü olduğunu öğreneceğiz. Yine saymaya
0 saysıından başlanacak yani pazartesi haftanın 0. günü olmuş olacak. Aşağıdaki kodu yazıyoruz,
value = birthday.getDay();
getHours metodu ile objemizin saat bilgisini elde edeceğiz. Kodumuz aşağıdaki gibi olacak,
value = birthday.getHours();
getMinutes metodu ile objemizin dakika bilgisini elde edeceğiz. Kodumuz aşağıdaki gibidir,
value = birthday.getMinutes();

getSeconds metodu ile objemize ait saniye bilgisini görebileceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,
value = birthday.getSeconds();
Şimdi objemizde tanımladığımız zaman bilgilerini değiştirmeyi görelim. İlk olarak ay bilgisini
değiştirelim. Ben yukarıda tanımladığım ay bilgisini Ağustos ayıyla değiştirmek istiyorum. Ağustos ayı
yılın 8. ayı olmasına rağmen javascriptte 7. ay olacağı için kodumuzu aşağıdaki gibi yazıyoruz,
value = birthday.setMonth(7);
Aynı zamanda aşağıdaki kodla gün bilgisini değiştirebiliriz. Ben ayın 10. günü olmasını istiyorum.
Aşağıdaki kodu giriyoruz,
value = birthday.setDate(10);
Şimdi doğum yılını değiştirelim ben doğum yılını 2020 olarak tekrar ayarlamak istediğimde aşağıdaki
kodu yazıyorum,
value = birthday.setFullYear(2020);
Saat bilgisini değiştirmek için aşağıdaki gibi bir kod yazıyoruz. Ben saat bilgisinin 4 ile değiştirilmesini
istiyorum,
value = birthday.setHours(4);
Dakika bilgisini değiştirmek için aşağıdaki kodu yazıyoruz. Ben dakika bilgisinin "0" ile değiştirilmesini
istiyorum,
value = birthday.setMinutes(0);
Aynı şekilde saniye bilgisini değiştirmek için aşağıdaki metodu kullanıyoruz. ben saniye bilgisini "0" ile
değiştirmek istiyorum

value = birthday.setSeconds(0);
JAVASCRİPT KARŞILAŞTIRMA OPERATÖRLERİ
Bu başlığımızda javascript üzerinde verilen değerleri birbirleriyle karşılaştırma işlemini
gerçekleştireceğiz. Karşılaştırma yaparken kullandığımız operatöre göre karşılaştırma doğruysa
boolean değeri olarak bildiğimiz "true" yanlışsa "false" değerlerini konsol üzerinde göreceğiz. İlk
operatörümüzle başlayalım.
Her iki değerin birbirine eşitliğini kontrol eden operatör (==) operatörüdür. Örnek kullanımı aşağıdaki
gibidir;
Aşağıdaki örnekte her iki değer birbirine eşit olduğu için veri tipine bakılmaksızın konsolumuzda true
dönecektir. Birbirinden farklı değer olsalardı false döndüğünü görecektik.
console.log(2 == 2);
console.(2 == "2");
Karşılaştırmayı değerler ve veri tipleri üzerinden yapan (===) operatörünün kullanımı aşağıdaki
gibidir. Bu operatör karşılaştırma yaparken yalnızca değerlere bakmaz aynı zamanda string, number
gibi veri tiplerini de göz önünde bulundurur. Veri tipleri farklı ama değerleri aynı olan
karşılaştırmalarda "false" değeri dönecektir. Ancak değerleri ve veri tipleri aynı olan karılaştırmalarda
"true" değerinin döndüğünü görebiliriz;
console.log("2" === "2");
console.log(2 === 2);
Sol taraftaki değerin sağ taraftaki değere olan büyüklüğünü karşılaştırmak için (>) operatörünü
kullanacağız. Örnek kullanımı aşağıdaki gibidir. Bu örnekte "true" dönütünü almaya çalıştık,
console.log(2 > 1);
Sol taraftaki değerin sağ taraftaki değere olan küçüklüğünü karşılaştırmak için (<) operatörünü
kullanıyoruz. Aşağıda "true" dönütünü almaya çalıştık;

console.log(1 < 2);
Her iki taraftaki değerlerin birbirine eşit olmadığını göstermek için (!=) operatörünü kullanıyoruz. Yani
iki taraftaki değerler birbirine eşitse "false" eşit değilse "true" dönütünü almış olacağız. Aşağıda true
dönütünü almaya çalıştık;
console.log(1 != 2);
Eğer iki taraftaki değerler birbirine eşitse ya da sol taraf, sağ taraftaki değerden büyükse, her iki
durumda da "true" dönütünü almak için (>=) operatörünü kullanacağız. Aşağıdaki iki örnekte de
"true" dönütünü alacağız;
console.log(2 >= 2);
console.log(2 >= 1);
Eğer iki taraftaki değerler birbirine eşitse veya sol taraftaki değer sağ taraftaki değerden küçükse, her
iki durumda da "true" dönütünü almak için (<=) operatörünü kullanıyoruz, ve örneğimizi aşağıdaki
gibi yapıyoruz,
console.log(2 <= 2);
console.log(1 <= 2);
JAVASCRİPTTE MANTIKSAL BAĞLAÇLAR
Not (!) Operatörü
Bu operatör iki değerin karşılaştırması sonucunda "true" dönütü vermesi durumunda bu dönütü
"false"a çevirecek, aynı şekilde "false" dönütü veren karşılaştırmaları da "true"ya çevirecek olan
operatördür. Örnek kullanımı aşağıdaki gibidir. Burada karşılaştırma işlemini parantez içine alıp
başına "!" sembolünü eklememiz operatörü çalıştırmak için yeterli;
console.log(!(2 == 2));

AND (&&) Operatörü
Bu operatör birden fazla karşılaştırma operatörünü birbirine bağlar ve bağladığı tüm
karşılaştırmaların doğruluğunu kontrol eder. Yani bu bağlaçla bağlanan tüm karşılaştırmalar "true"
dönütünü veriyorsa konsolda "true" döner. Ancak yalnızca biri "false" dönütünü verse dahi konsolda
"false" dönütü görünecektir;
Aşağıda her iki karşılaştırma da doğru olduğundan konsolda true dönecektir,
console.log((2 == 2) && (3 == 3));
Aşağıdaki karşılaştırmada ise 2. karşılaştırma yanlış olduğu için konsolumuzda false dönecektir;
console.log((3 != 4) && (3 == 4));
OR (||) Operatörü
Bu operatörle bağlanan karşılaştırmalarda en az 1 karşılaştırma doğru olsa bile genel sonuç "true"
olacaktır;
console.log((3 == 3) || (4 == 5));
JAVASCRİPTTE KOŞULLAR
"if" Koşulu
Burada eğer verilen koşul true dönütünü verirse süslü parantez içerisinde belirtilen kod bloğu çalışır.
Yani "Eğer xx koşulu true ise yy kod bloğunu çalıştır. " şeklinde bir olay döner. Burada koşulumuzu
parantez "()" içerisine, koşulun sonucunda çalışacak kod bloğumuzu da süslü parantez "{}" içerisine
yazacağız.

if (4 == 4){console.log("Karşılaştırma doğru");}
Yukarıda 4'ün 4'e eşit olduğunu belirttik ve karşılaştırmamız doğru olduğu için konsolda belirttiğimiz
kod bloğu çalışmış oldu. Karşılaştırmamız yani koşulumuz yanlış olsaydı kod bloğumuz çalışmayacaktı.
"else" Koşulu
Burada üstte verilen if koşulu çalışmadığı takdirde else koşuluna atanan kod bloğu çalışır. Yani "if
koşulu false ise xx kod bloğunu çalıştır" şeklinde bir olay dönüyor. Bildiğimiz gibi if koşulu "false"
olduğu zaman if koşulu içerisinde verilen kod bloğu çalışmıyordu. İşte bu durumlarda else koşulu
içerisinde verilen kod bloğu çalışacak. else koşulunda parantez "()" kullanmıyoruz yani yeni bir
karşılaştırma ifadesine yer vermiyoruz çünkü bu koşul if koşulunun devamı niteliğinde. Örneğimiz
aşağıdaki gibidir. else koşulunu if koşulu ile birlikte aşağıdaki gibi verdim. Gördüğünüz gibi if
koşulunda verilen ifade yanlış bir ifade yani false dönütü oluşacak ve if kod bloğu çalışmadan else kod
bloğu çalışacak;
if(4 == 5){console.log("Karşılaştırma Doğru");}
else {console.log("Karşılaştırma yanlış")}
"else if" Koşulu
Bu koşul, birden fazla koşul kontrol edilmek istendiğinde kullanılır. Burada ilk olarak bir değişken
oluşturalım. Bu değişkenimiz "islem" değişkeni olsun ve değerini 1 yapalım. Ve bu değer üzerinde
oynama yaparak çalışan kod bloklarını kontrol edelim. İlk olarak if koşulunu oluşturuyoruz. Ardından
else if koşullarımızı oluşturuyoruz. if koşulunun false dönütü vermesi durumunda else if koşullarından
true dönütü veren koşulun kod bloğu çalışacaktır. Örneğimiz aşağıdaki gibi;
const islem = "2";
if(islem === "1"){console.log("İşlem 1");}
else if(islem === "2"){console.log("İşlem 2");}
else if (islem === "3"){console.log("İşlem 3");}
TERNARY OPERATÖR

Bu operatör if ve else koşullarını tek bir blokta birleştirerek koşulun true dönütü vermesi halinde
belirtilen kod bloğunu, false dönütü vermesi halinde de yine verilen diğer kod bloğunu çalıştıracak.
Zamandan tasarruf olarak düşünebiliriz. Kodumuzu aşağıdaki gibi yazalım. Burada 4 sayısının 5
sayısına eşit olduğunu belirttik. Eğer bu doğruysa soru işaretinden "?" sonraki kod bloğu çalışacak.
Ancak eğer bu ifade yanlış bir ifadeyse iki noktadan ":" sonraki ifade çalışacak;
console.log(4 === 5 ? "İfade Doğru" : "İfade yanlış");
JAVASCRİPTTE FONKSİYONLAR
Fonksiyon Tanımlama Ve Çalıştırma
Javascriptte fonksiyon oluşturmak için "function" anahtar kelimesini kullanacağız. Ardından
fonksiyonumuzun ismini tanımlayıp değer atadıktan sonra süslü parantez içerisine çalıştırmak
istediğimiz kod öbeğimizi yazıyoruz
function merhaba() {console.log("ilk fonksiyon");}
Biz yukarıdaki kodu yazarak yalnızca fonksiyonumuzu tanımlamış olduk. Yani kodumuzu bu şekilde
bıraktığımızda kod öbeğimiz çalışmayacaktır. Bu fonksiyonu çalıştırmak için aşağıdaki kodu yazıyoruz,
merhaba();
Şimdi fonksiyonumuza değer atayarak işlemlerimizi yapalım. ben "name" ve "surname" değerlerini
yazdıracağım. Kodumu aşağıdaki gibi yazıyorum. (Daha önceki başlıklarımızda bu kısmı işlemiştik
şimdi bunları fonksiyon üzerinde görelim)
function merhaba(name,surname){console.log(`İsim : ${name} soyisim : ${surname}`)}
Fonksiyonumuzu yukarıdaki gibi tanımladıktan sonra aşağıdaki kodu yazarak fonksiyonumu
çalıştırıyorum. Burada parantez içerisine sırasıyla "name" ve "surname" değerleri yerine yazılacak
olan yazıyı giriyorum,
merhaba("black","coder");

Şimdi biten fonksiyonu tekrar çağırdığımız yere döndürmek için "return" operatörünü kullanacağız.
Örneğin ayrı ayrı iki fonksiyon yazalım. Her iki fonksiyonda da aynı değeri döndürmek isteyelim. İlk
fonksiyonumuzda "5" değerinin karesini alalım. İkinci fonksiyonumuzda da çıkan sonucun küpünü
almaya çalışalım ve en son çıkan değeri konsolumuza yazdıralım. Bu işlemi yapmamızı "return"
operatörü sağlayacak. Her iki fonksiyonumuzu da aşağıdaki gibi tanımlıyoruz
function square(x){return x*x;}
function cube(x){return x*x*x;}
Ardından değerlerimizi aşağıdaki gibi eşitliyoruz. Burada a değerini "5" sayımızın karesine eşitledik.
Ardından Çıkan sonucun küpüne eşitleyip konsola yazdırdık.
let a = square(5);
a = cube(a);
console.log(a);
IMMEDIATELY INVOKED FUNCTION EXPRESSION (IIFE)
Bu fonksiyon türü çalıştırma koduna ihtiyaç duyulmadan tanımlandığı yerde çalışan bir fonksiyondur.
Örneğin "merhaba" isimli fonksiyonumuzu aşağıdaki gibi tanımlayalım. Burada dikkat etmemiz
gereken yer, fonksiyonumuzun en başından süslü parantezin bitimine kadar olan yeri parantez
içerisine almak ve ardından en sona " (); " sembollerini koymak olacak.
(function merhaba(){console.log("IIFE");})();
ANONİM FONKSİYONLAR
Burada ilk olarak bir obje oluşturarak başlayalım. Objemizi aşağıdaki gibi oluşturup süslü parantez
içerisine fonksiyonlarımızı yazacağız. Ben örnek olması açısından aşağıdaki gibi bir kod yazıyorum.
Burada objemin adı "data" ve bu objemin "add" isimli bir özelliği var. Bu özelliğe atanmış bir de
fonksiyonumuz var.
const data = {add:function(){console.log("ekle");}}

Şimdi tanımladığımız bu anonim fonksiyonu çalıştırmak isteyelim. Bunun için " obje_adi.ozellik_adi();
" şeklinde bir kod yazacağız. Yani yukarıdaki örneğimize göre bu kodumuz aşağıdaki gibi olacak;
data.add();
Bu fonksiyonları çeşitlendirmek mümkün. Ben en basitinden bu şekilde anlatım yaptım...
DÖNGÜ YAPILARI
While Döngüsü
Tanımlanan bir değişken, while ile verilen koşulu sağladığı müddetçe döngünün devam ettiği yapıdır.
Bir örnekle başlayalım. Örneğin "i" isimli bir değişkenimiz olsun ve bu değişkenimizin değeri "0" olsun.
Ardından while döngümüzü açalım ve koşulumuzu "10"dan küçük sayılar olacak şekilde ayarlayalım.
Aynı zamanda da bu "i" değişkenimizin değeri her döngüde "1" sayı artarak devam etsin
let i = 0;
while(i < 10){console.log(i);
i++;}
Yukarıdaki kodda i değişkenimize değer atadık. Ardından koşulumuzu yazdık. Daha sonra süslü
parantez içerisinde "i" değişkenimizi konsola yazdıracak olan kodu yazdık ve i sayısını her döngüde 1
sayı arttıracak kodu ( i++ ) yazdık. Burada artık while döngümüz çalışmış ve konsolumuza yansımış
olacaktır,

Şimdi döngü içerisinde herhangi bir yerde çalıştırıldığında döngüyü sonlandıran "break" operatörüne
bakalım. Yukarıdaki örnekten devam edelim. Biz bu "i" değişkenimize ait değerin istediğimiz bir yere
geldiğinde durmasını istiyorsak aşağıdaki kodu yukarıdaki kodlarımız arasına ekleyeceğiz. Örneğin
döngüde i değerinin "5" sayısına geldiğinde durmasını istiyorsak aşağıdaki kodu yazıyoruz,
if (i == 5){break;}
Bu kodu önceki örneğimizde kullandığımız kodla aşağıdaki gibi birleştirirsek,
let i = 0;
while(i < 10){console.log(i);
if (i == 5){break;}
i++}
gördüğünüz gibi döngümüz belirttiğimiz sayıya geldiğinde durdu

Şimdi döngü içerisinde belirtilen değerlerin döngüden çıkartılarak döngünün devam ettirildiği
"continue" operatörünü inceleyelim. Burada yine aynı örnek üzerinden devam edelim ve 3 sayısını
döngüden çıkartmak istediğimizi varsayalım. Continue operatörünü aşağıdaki gibi kullanacağız,
if (i == 3){i++;
continue;}
Burada continue'den önce "i" sayısını arttıracak kodu girmemizin sebebi döngünün sonsuz döngü
olmasını engellemek içindir. Yukarıdaki kodu önceki örneğimizle birleştirirsek genel olarak kodlarımız
aşağıdaki gibi olacaktır
let i = 0;
while(i < 10)
{if(i == 3){i++;
continue;}
console.log(i);
i++;}

Do While Döngüsü
Bu döngü, while döngüsünün aksine ilk olarak kod bloğunu çalıştırır ardından koşulu kontrol ederek
döngüyü devam ettirir. Yani değişkene tanımlanan değer koşulu sağlamasa bile bir defa çalışacaktır.
do{console.log(i);
i++;}
while(i < 10);
For Döngüsü
Bu döngüyü bir array oluşturarak anlatmaya başlayalım. Aşağıda "langs" adında bir array oluşturdum
const langs = ["js","java","html"];
Bu arrayimi for döngüsü ile konsola yazdıracağım. Bunun için elimde başlangıç indexi olması
gerekiyor. Yani döngümün arrayin hangi indexinden başlayarak devam etmesini istiyorsam o indexi
koduma ekleyeceğim. Örneğin döngümüz "js" elemanından başlasın yani 0. index. Bunu koda
aşağıdaki gibi döküyorum;
for (let index = 0;index < langs.length;index++){console.log(langs[index]);}
Yukarıdaki kodda döngümün başlangıç noktasını belirttim. Ardından koşulumu belirttim, daha sonra
arttırma kodumu yazdım ve bu koşulun doğru olması durumunda gerçekleşecek işlemi belirttim.
WINDOW (PENCERE) OBJESİ
Javascriptte en genel objedir. İçerisinde birçok metod bulunmaktadır. Biz bu başlığımızda windows
objesine ait bazı metodları ele alacağız. İlk olarak "alert" metodumuzu inceleyelim.
Alert metodu, yazılan stringin sayfa üzerinde popup penceresi açarak gösterilmesini sağlayan
metodtur. Örneğin PopUp penceremize "javascript" yazdırmak istersek aşağıdaki kodu kullanmamız
gerekiyor,

alert("Javascript");
Şimdi popup penceremizde confirm metodunu kullanarak soru soralım. Kodumuzu aşağıdaki gibi
yazabiliriz,
const cevap = confirm("Emin Misiniz ?");
Şimdi prompt metoduyla input alma işlemini yapalım. Örneğin bu metodla "9 + 9" işlemini soralım.
Kodumuzu aşağıdaki gibi yazabiliriz
const cevap = prompt("9 + 9 = ?");

Şimdi window objemizin içerisindeki özelliklere göz atalım. Editörümüze aşağıdaki kodu yazarak
windows objemizin özelliklerine ve metodlarına erişebiliriz,
console.log(window);
Ben burada "location" isimli özelliğe değinmek istiyorum. Bu özelliği açtığımızda içerisinde çeşitli
elemanlar bulundurduğunu görüyoruz. İlk olarak aşağıdaki kodu yazarak location özelliğimize
erişelim,
let value;
value = window;
value = window.location;
console.log(value);
Örneğin location özelliğindeki "host" bilgisini ekrana yazdıralım. Bunun için aşağıdaki kodu yazıyoruz,
let value;
value = windows.location.host;

console.log(value);
Gördüğünüz gibi host bilgisi konsolumuza aşağıdaki gibi yansıdı
Şimdi windows objemizin location özelliğindeki reload metodunu ( window.location.reload(); )
kullanalım. Bu metodla sayfamızı yenileyebiliriz. reload metodunu daha önce öğrendiğimiz confirm
metoduyla birleştirelim. Örneğin PopUp olarak "Sayfa Yenilensin Mi?" şeklinde bir soru sorulsun.
Kullanıcı "OK" butonuna bastığında sayfa yenilensin. "Cancel" butonuna bastığında ise sayfa
yenilenmesin. Bunu aşağıdaki kodla gerçekleştirebiliriz,
if (confirm("Sayfa Yenilensin Mi?")) {window.location.reload();}
Bu şekilde aşağıdaki kodu kullanarak diğer tüm özellikleri ve metodları görebilir, kullanabilirsiniz. Çok
fazla metod olması sebebiyle ben yalnızca örnek vermek amaçlı bazı metodları ve özellikleri
gösterdim,
console.log(window);

SCOPE (KAPSAM) KAVRAMI
Scope Kavramı, bir değişkenin nerelerde varolduğunu belirtir. Bu başlığımızda da bu kavramlardan
bahsedeceğiz,
Global Scope
Herhangi bir fonksiyon veya blok içerisinde olmayan scope kavramıdır. Ve program içerisinde her
yerden erişilebilir. Kullanımından sonra bellekten silinmediği için kullanılması önerilmeyen bir scope
kavramıdır
let value1 = 10;
var value2 = 20;
const value3 = 30;
Function Scope
Herhangi bir fonksiyon içerisinde bulunan scope kavramıdır. Bu scope kavramının içerisinde
barındırılan kodlar kullanıldıktan sonra bellekten silinir. Ve yalnızca çağırıldığı fonksiyonda erişilir.
function Func(){var value1 = 40;
let value2 = 50;
const value3 = 60;}
Func();
Block Scope
if, while, for bloğu içerisinde bulunan scope kavramıdır. Burada var ile tanımlanan değişkenler block
scope'a özgü olmadığı için dışarıda bulunan global scope'a ait aynı isimdeki değişkenlerin değerini
değiştirir. Ancak let ile tanımlanan değişkenler block scope'a özgü olması sebebiyle dışarıdaki
değişkenle hiçbir bağ kurmadan kendi değerini ekrana yazdırır.

if (true)
{let value1 = 70;
const value2 = 80;}
TürkHackTeam.org

A'dan Z'ye Javascript 1 | TurkHackTeam

Recommended

Recommended

More Related Content

Similar to A'dan Z'ye Javascript 1 | TurkHackTeam

Similar to A'dan Z'ye Javascript 1 | TurkHackTeam (6)

More from TurkHackTeam EDU

More from TurkHackTeam EDU (6)

A'dan Z'ye Javascript 1 | TurkHackTeam