[A'dan Z'ye] JavaScript Öğreniyoruz #1

'Execution

Kıdemli Üye
13 Ocak 2018
3,227
29
[A'dan Z'ye] JavaScript Öğreniyoruz #1

Merhabalar,

A'dan Z'ye Javascript eğitimi 1. part ile karşınızdayım. Bu eğitim ile javascript programlama dilini kavramanızı sağlayacak ve uygulamalı olarak sizlere aktaracağım. Eğitimimiz 3 parttan oluşmaktadır. İlk partımızda javascripttin temellerini verecek ve böylece girişimizi yapmış olacağız. Ayrıca eğitim tamamınca "Visual Studio Code" editörünü kullanacağım. Siz dilediğiniz editörü kullanabilirsiniz. Visual Studio Code kullananlar için işinizi kolaylaştıracak birkaç eklentiyi kurarak eğitimimize başlayalım.


KODLAMA İÇİN GEREKLİ ORTAMIN HAZIRLANMASI

İlk olarak Visual Studio Code editörünü aşağıdaki resmi sitesinden indirip kurabilirsiniz.

Kod:
https://tik.lat/0V9gT

İ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;

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

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 ifadeleri çalıştırmak ve aynı satırda birden fazla ifade bulundurmak için her ifadenin sonuna noktalı virgül ( ; ) ekliyoruz. Örnek kullanımına bakabilirsiniz,

Kod:
var a = 10;
var b = 20;
var c = 30;

Şimdi bu değerleri console'a yansıtacak olan kodu giriyorum,

Kod:
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İ

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;

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

Kod:
var a = 10;

Bu değişkenimizin veri tipini öğrenebilmek için aşağıdaki kodu yazıyoruz,

Kod:
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,

Kod:
var a = "javascript";

Bunu aşağıdaki kodla console üzerine yazdırdığımızda,

Kod:
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,

Kod:
console.log(typeof a);

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;

Kod:
var a = true;

Şimdi bu değişkenimizin veri tipini öğrenelim;

Kod:
console.log(typeof a);

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;

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

Kod:
var a;

Üstteki kodu girdikten sonra aşağıdaki kod ile console ekranı üzerine yazdırmak istediğimizde

Kod:
console.log(a);

Tarayıcımızın console kısmında aşağıdaki gibi görünecektir,



REFERENCE VERİ TİPLERİ

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,

Kod:
var a = [1,2,3,4];

Şimdi bu değerleri aşağıdaki kodlarla console üzerine yansıtalım,

Kod:
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,

Kod:
console.log(typeof a);

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.

Kod:
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şılacağı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,

Kod:
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,

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

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

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

Kod:
a.push(6);

Yani kod öbeğimiz şu şekilde oluşuyor;

Kod:
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,

Kod:
let value ();
value = 10;

Ardından bu kod öbeğime aşağıdaki kodu da ekleyerek ekranıma yazdırıyorum,

Kod:
console.log(value);

Totalde aşağıdaki gibi bir kod öbeğim oluşmuş oldu,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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

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

Kod:
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;

Kod:
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şurduğ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;

Kod:
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,

Kod:
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,

Kod:
const a = "hello" + "10";

Yukarıdaki koduma aşağıdaki kodu ekleyerek veri tipine bakmak istiyorum,

Kod:
console.log(typeof a);

Totalde kod öbeğim aşağıdaki gibi olacak,

Kod:
const a = "hello" + "10";
console.log(typeof a);

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.

Kod:
 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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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ü,

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

Kod:
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,

Kod:
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,

Kod:
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

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
console.log(value);

Yani toplamda kodlarımız aşağıdaki gibi olacak,

Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1 + value2;
console.log(value);

Sonuçta console'daki görüntü aşağıdaki gibi görünecek;



Stringleri uç uça eklerken arada boşluk olmasını istiyorsak bu sefer de "value" değişkenine tanımladığımız kod öbeğini aşağıdaki gibi değiştireceğiz.

Kod:
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,

Kod:
let value;
const value1 = "Java";
const value2 = "script";
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,

Kod:
value = value + "ders";

Buna alternatif olarak aşağıdaki kod kullanılabilir.

Kod:
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,

Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1 + value2;
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 metodu "degiskenadi.length;" (degiskenadi yazan yere değişkenimizin adını yazıyoruz) Örnek kullanımı aşağıdaki gibi olacak,

Kod:
value = value1.length;

Toplamda aşağıdaki kod öbeğine sahip olacağız,

Kod:
let value;
const value1 = "Java";
const value2 = "script";
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ı,

Kod:
value = value1.concat(value2,"ders");

Toplamda aşağıdaki kod öbeğine sahip olacağız,

Kod:
let value;
const value1 = "Java";
const value2 = "script";
value = value1.concat(value2,"ders");
console.log(value);



Şimdi var olan stringimizdeki bütün karakterlerin küçük harfle yazılması için "degiskenadi.toLowerCase()" metodunu kullanacağız. Örnek kullanımı aşağıdaki gibidir,

Kod:
value = value1.toLowerCase();

Sahip olduğumuz toplam kod öbeği aşağıdaki gibi olacak,

Kod:
let value;
const value1 = "Java";
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,

Kod:
value = value1.toUpperCase();

Toplam kod öbeğimiz aşağıdaki gibi olacak,

Kod:
let value;
const value1 = "Java";
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,

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

Kod:
value = value1.charAt(1);

Toplamda kod öbeği aşağıdaki şekilde olmalıdır.

Kod:
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,

Kod:
value = value1[value1.length -2];

Toplamda kod öbeğimiz şu şekilde olacak,

Kod:
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,

Kod:
value = value1.indexOf("v");

Toplamda kod öbeğimiz aşağıdaki gibi olmalıdır,

Kod:
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,

Kod:
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,

Kod:
value = dil.split(",");

Toplam kod öbeğimiz aşağıdaki gibi olmalıdır,

Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
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,

Kod:
let value;
const dil = "ingilizce,almanca,fransızca";

Burada "almanca" yerine "Turkce" yazmak istediğimizde aşağıdaki gibi bir kod yazıyoruz,

Kod:
value = dil.replace("almanca","Turkce");

Toplamda kodlarımız aşağıdaki gibi olmalı,

Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
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,

Kod:
value = dil.includes("fransızca");

Toplamda kodlarımız şu şekilde olmalı,

Kod:
let value;
const dil = "ingilizce,almanca,fransızca";
value = dil.split(",");
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
numbers.pop()

Aynı zamanda arrayimizin başından "shift" metoduyla eleman çıkartabiliriz. Bunun için aşağıdaki kodu yazıyoruz,

Kod:
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,

Kod:
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,

Kod:
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,

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

Kod:
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,

Kod:
const programmer = { 
name : "Black",
Age : 30,
Mail : "[email protected]",
};

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.

Kod:
const programmer = {
Name : "black",
Age : 30,
mail : "[email protected]",
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,

Kod:
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,

Kod:
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,

Kod:
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,

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

Kod:
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,

Kod:
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,

Kod:
value = birthday.getDay();

getHours metodu ile objemizin saat bilgisini elde edeceğiz. Kodumuz aşağıdaki gibi olacak,

Kod:
value = birthday.getHours();

getMinutes metodu ile objemizin dakika bilgisini elde edeceğiz. Kodumuz aşağıdaki gibidir,

Kod:
value = birthday.getMinutes();

getSeconds metodu ile objemize ait saniye bilgisini görebileceğiz. Kodumuzu aşağıdaki gibi yazıyoruz,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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,

Kod:
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

Kod:
value = birthday.setSeconds(0);

 
Son düzenleme:

'Execution

Kıdemli Üye
13 Ocak 2018
3,227
29
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.

Kod:
console.log(2 == 2);

Kod:
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;

Kod:
console.log("2" === "2");

Kod:
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,

Kod:
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;

Kod:
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;

Kod:
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ü kullananacağız. Aşağıdaki iki örnekte de "true" dönütünü alacağız;

Kod:
console.log(2 >= 2);
Kod:
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,

Kod:
console.log(2 <= 2);
Kod:
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ıı 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;

Kod:
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,

Kod:
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;

Kod:
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;

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

Kod:
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 koulunu 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;

Kod:
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;

Kod:
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;

Kod:
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

Kod:
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,

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

Kod:
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,

Kod:
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

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

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

Kod:
(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.

Kod:
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;

Kod:
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

Kod:
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,

Kod:
if (i == 5){break;}

Bu kodu önceki örneğimizde kullandığımız kodla aşağıdaki gibi birleştirirsek,

Kod:
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,

Kod:
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

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

Kod:
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

Kod:
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;

Kod:
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,

Kod:
alert("Javascript");



Şimdi popup penceremizde confirm metodunu kullanarak soru soralım. Kodumuzu aşağıdaki gibi yazabiliriz,

Kod:
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

Kod:
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,

Kod:
console.log(window);

Ben burada "locatıon" 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 locatıon özelliğimize erişelim, ("locatıon" kelimesi forum filtresine takılmasından ötürü "i" harfi "ı" harfine çevrilmiştir. Kodunuzu yazarken kelimedeki "ı" harfini "i" olarak değiştiriniz.)

Kod:
let value;
value = window;
value = window.locatıon;
console.log(value);



Örneğin locatıon özelliğindeki "host" bilgisini ekrana yazdıralım. Bunun için aşağıdaki kodu yazıyoruz,

Kod:
let value;
value = windows.locatıon.host;
console.log(value);

Gördüğünüz gibi host bilgisi konsolumuza aşağıdaki gibi yansıdı



Şimdi windows objemizin locatıon özelliğindeki reload metodunu ( window.locatıon.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,

Kod:
if (confirm("Sayfa Yenilensin Mi?")) {window.locatıon.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,

Kod:
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

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

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

Kod:
if (true)
{let value1 = 70;
const value2 = 80;}

A'dan Z'ye JavaScript Eğitimimizin 1. Partına burada nokta koyuyorum. Eğitimin İkinci Partında görüşmek dileğiyle...

- 'blackcoder -


[A'dan Z'ye] Javascript Öğreniyoruz #2 Konusuna Gitmek İçin;

https://www.turkhackteam.org/javascript/1909434-adan-zye-javascript-ogreniyoruz-2-a.html

[A'dan Z'ye] Javascript Öğreniyoruz #3 Konusuna Gitmek İçin;

https://www.turkhackteam.org/javascript/1915486-adan-zye-javascript-ogreniyoruz-3-a.html#post9078751

 
Son düzenleme:

P4RS

Özel Üye
8 Ocak 2017
5,156
58
Ankara
Ellerine sağlık black ilk part gayet güzel. İkincisi de aynı şekilde olacağına eminim :))
 

ARSEF7

Katılımcı Üye
29 Şub 2020
875
206
ARS3F
Eline sağlık uzun zamandır böyle bi anlatıcı arıyorum lütfen devamı gelsin
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.