Kategoriler
Javascript

Javascript (JS) Hızlı Başlangıç Rehberi

Tek başlıkta sıfırdan ileri seviye Javascript programlama ve Javascript yapılarını öğren. 🙂 Javascript öğrenmeye başlamak isteyenler için Javascript Hızlı Başlangıç Rehberi.

Javascript, internet sitelerinin ve internet tabanlı uygulamaların daha işlevsel olmasını sağlayan bir yazılım dilidir.

Javascript ile yazılan komut ve programlar, sunucu üzerinde değil kullanıcının cihazı üzerinde çalıştırılır. Yani yazılan javascript kodları kullanıcının cihazına gönderilir ve çalıştırılır. Yine de daha sonradan çıkan Node.js, React gibi frameworkler sayesinde javascripti sunucu tarafında çalıştırmak mümkün hale gelmiştir.

Söz dizimi ve yapısı C programlama diline benzemektedir.

Javascript ile ilgili olarak önemli bir başka husus da; Java ile Javascript arasında hiçbir ilişki ya da benzerlik yoktur.

Javascript hakkındaki önemli bilgileri hızlıca verdikten sonra kısaca Hızlı Başlangıç Rehberi konseptime değinmek istiyorum. Bu ve bunun gibi hazırladığım Hızlı Başlangıç Rehberilerinde temel yazılım bilgisine sahip ve en az bir programlama diline orta seviyede bildiğinizi varsayarak hazırlıyorum. Bu konuyu da netleştirdiğimize göre hemen başlayabiliriz.

Dahil Etme

Javascript kodlarının doğru çalışabilmesi için HTML dökümanı içerisine doğru şekilde dahil edilmesi gerekir. Bir HTML dökümanı içerisine doğrudan ya da uzak dosyadan çağırma yoluyla Javascript kodları dahil edilebilir.

Doğrudan dahil etmek için Javascript kodları sayfa içerisinde <script> etiketi içerisinde yazılır.

<script>
    //Javascript Kodları
</script>

Uzak Javascript (.js) dosyasını sayfa içerisinde <script> etiketine src belirteci ile dahil edebilirsiniz.

<script src="http://example.com/javascript-dosyam.js"></script>

Açıklama/Yorum Satırı

Javascript için kullanabileceğiniz iki açıklama satırı ekleme yöntemi vardır.

// Tekli yorum satırı

/*
Çoklu yorum satırı
Buradaki kodlar çalıştırılmaz.
*/

Değişken Tanımlama

Javascript dilinde değişken tanımlamak için var anahtar sözcüğü kullanılır.

var degiskenAdi = 15;

Değer tanımlandıktan sonra da değer atama işlemi yapılabilir.

var degiskenAdi;
degiskenAdi = 15;

Çoklu değişken tanımlama işlemi de yapılabilir.

var x = 5, y = 8, z = 9;

Javascript dünyasına ES6 (EcmaScript6) ile birlikte yeni bir değişken tanımlama anahtar ifadesi daha eklendi. let anahtar ifadesi ile oluşturulan değişkenler biraz kafa karışıklığına sebep olsa da var ile let arasında bazı farklılıklar bulunuyor.

  1. var ile aynı isimde değişkeni birden fazla kez tanımlamam mümkün, ancak let ile aynı isimde sadece bir kez değişkeni tanımlayabilirsiniz. (Elbette her ikisinin de değerini daha sonradan değiştirebilirsiniz.)
  2. let ile oluşturulan değişkenler kapsama alanı konusunda son derece katıdır. Örneğin bir if bloğu içerisinde let ile oluşturduğunuz değişkene if bloğunun dışından erişemezsiniz.

Not : let duyurulduğu günden beri geliştiricilerin sıklıkla kullandığı ifade olsa da bu içerikte eski usul var ifadesi ile değişkenleri tanımlamayı tercih ettim.


Sabit Tanımlama

Javascript de sabitler const anahtar ifadesi ile tanımlanır.

const URL_ADRESI = 'https//www.muhammetsafak.com.tr';

Veri Türleri

Javascript temel veri türlerini desteklemektedir.

var tamSayi = 15; // Number
var pi = 3.14; // Number
var adiniz = "Muhammet"; // String
var dizeSayi = "15"; // String
var merhaba = 'Hello'; // String
var mantiksal = true; // Boolean
var dizi = ["İstanbul", "Ankara"]; // Object
var nesne = {anahtar: "Değer", key: "Value"} // Object
var date = new Date(); // Object
var data = null; // Object
function(){} // Function

Javascript de string türündeki değerler " ya da ' arasında yazılır. Sayısal değerlerde " ya da ' arasında yazılırsa bir metin/dize olarak algılanır.

Bir verinin türünü öğrenme işlemi typeof anahtar ifadesi ile yapılır.

var data = "selam";
console.log(typeof data); // string
var tamSayi = 15;
console.log(typeof tamSayi); // number

Verinin türünü sınamak için instanceof anahtar ifadesi kullanılır.

var data = "Selam";
var veri = new String("Selam");

console.log(data instanceof String); //false
console.log(veri instanceof String); //true

constructor

Javascript de her veri türü için bir kurucu yöntem vardır. Bu kurucu yöntemleri öğrenmek için constructor özelliği kullanılabilir.

console.log("Muhammet".constructor); // function String() { [native code] }
console.log((3.14).constructor); // function Number() { [native code] }
console.log(false.constructor); // function Boolean() { [native code] }
console.log([1,2,3].constructor); // function Array() { [native code] }
console.log({name: 'Muhammet', age: 28}.constructor); // function Object() { [native code] }
console.log(new Date().constructor); // function Date() { [native code] }
console.log(function(){}.constructor); // function Function() { [native code] }

Veri Türü Dönüşümü

toString()

Sayısal bir değeri dizeye dönüştürür.

var sayi = 45;
var stringSayi = sayi.toString();

console.log(typeof stringSayi); // string
console.log(typeof sayi); // number

String()

Sayısal bir değeri String() fonksiyonuna vererek türünü dizeye çevirebilirsiniz.

var sayi = 45;
var stringSayi = String(sayi);

console.log(typeof stringSayi); // string
console.log(typeof sayi); // number

Number()

Dize veri türündeki değeri sayısal değere dönüştürmeyi dener.

var sayi = "45";
var numberSayi = Number(sayi);

console.log(typeof sayi); // string
console.log(typeof numberSayi); // number

parseInt() ve parseFloat()

parseInt() verilen değeri bir tam sayıya, parseFloat() ise verilen değeri bir kayar noktalı sayıya dönüştürmeyi dener. Başarısız olursa her iki fonksiyon da NaN döndürür.

console.log(parseInt("5")); // 5
console.log(parseInt("5.15")); // 5
console.log(parseInt("5 10")); // 5
console.log(parseInt("5 sene")); // 5
console.log(parseInt("sene 5")); // NaN

console.log(parseFloat("5")); // 5
console.log(parseFloat("5.15")); // 5.15
console.log(parseFloat("5 10")); // 5
console.log(parseFloat("5 sene")); // 5
console.log(parseFloat("sene 5")); // NaN

Kullanıcıdan Değer Alma

Bir değişkene atanacak değeri kullanıcıdan almak için prompt() metodu ile alınabilir.

var adiniz = prompt("Lütfen adınızı girin!");

prompt() metodu kendisine verilen mesajı kullanıcıya ileterek küçük bir uyarı ekranı açar ve kullanıcının bir değer girmesini bekler.

Not: Kullanıcının girdiği değerin türü dize (string) olarak kabul edilir.

Not : Javascript de kullanıcıdan veri almanın farklı yolları da vardır. Genellikle kullanıcıdan veri girdisi alma işlemi kullanıcı hareketlerini dinleme yöntemiyle yapılır.


Kullanıcıya Değer Döndürme
alert() ve console.log()

Javascript ile bir veriyi kullanıcıya iletmenin oldukça çeşitli yolları vardır. Ancak geliştirme süreçlerinde ekrandan bir veri göstermek için en sık ve yoğun olarak kullanacağımız iki yöntem vardır.

alert()

Kullanıcının tarayıcısında küçük bir bildirim ekranı açar.

alert("Bu alana bildiriminizi yazın!");

console.log()

Kullanıcının tarayıcısındaki geliştirici konsoluna bir ileti çıktılar. Genellikle hata ayıklama sürecinde kullanılır.

console.log("Bu alana iletinizi yazın!");

Not : Buradaki mesaj kullanıcının ekranında doğrudan görünmez. İlgili sayfada her hangi bir yere sağ tıklayın açılan menüden İncele seçeneğini seçin daha sonra açılan bölümden Console sekmesine tıklayarak geliştirici konsol ekranına ulaşabilirsiniz. Ya da F12 🙂


Operatörler

Not : Javascript Bitsel İşlemlerde kullanılan operatörler de dahil çeşitli operatörlere sahiptir. Ancak burada en sık kullanılan ve operatörlere değiniyorum.

Atama Operatörü

Atama operatörü solundaki operanda, sağındaki operandın değerini atama yapar.

var degisken = 25;

Yukarıdaki örnekte = sembolü atama operatörüdür. Yukarıdaki örneğin okunuşu “degisken eşittir 25” değil, “degisken’in değeri 25” şeklindedir.

Matematiksel İşlem ve Operatörler

Matematiksel operatörler 4 işlem gibi basit matematik işlemlerini yapmayı sağlar.

+ Toplama ya da Birleştirme Operatörü

+ operatörü sağındaki ve solundaki operandların her ikisinin de sayısal değer olması durumunda matematiksel toplama, aksi halde birleştirme işlemi yapar.

var x = 10;
var y = 20;
var sonuc = x + y; // 30

var a = "10";
var b = 20;
var abSonuc = a + b; // 1020

var adi = "Muhammet";
var yas = 28;
var kisi = adi + " " + yas; // Muhammet 28

- Çıkarma Operatörü

var x = 20;
var y = 10;

var sonuc = x - y; // 10

/ Bölme Operatörü

var bolunen = 20;
var bolen = 4;

var sonuc = bolunen / bolen; // 5

* Çarpma Operatörü

var sayi = 4;
var carpan = 5;

var sonuc = sayi * carpan; // 20

Mod Alma (%) ve Üssü (**) Operatörleri

var x = 5;
var y = 2;

/*
Mod Alma
x değerinin y değerine bölümünden kalanı hesapla
*/
var modHesapla = x % y; // 1

/*
Üssü Hesaplama
x üssü y hesaplama
*/
var ussuHesapla = x ** y; // 25

İşlem Önceliği

Matematiksel operatörlerde işlem önceliği genel matematik kuralında olduğu gibidir. Yani önce çarpma ve bölme yapılır ardından toplama ve çıkarma işlemleri yapılır. Önceliği değiştirmek için “()” kullanılabilir.

var x = 3;
var y = 5;
var z = 20;

var sonucBir = x * y + z; // 35
var sonucIki = x * (y + z); // 75

Arttırma (++) ve Eksiltme (--) Operatörleri

var x = 4;
x++; // x'in değeri artık 5'dir.

var y = 8;
y--; // y'nin değeri artık 7'dir.

Karşılaştırma Operatörleri

Karşılaştırma operatörleri sağındaki operand ile solundaki operandı karşılaştırır ve mantıksal bir ifade (true ya da false) döndürür.

OperatörTanımÖrnek
<Küçüktür mü?
Solundaki operandın sağındaki operanddan küçük olması durumunu karşılaştırır.
x<y
>Büyüktür mü?
Solundaki operandın sağındaki operanddan büyük olması durumunu karşılaştırır.
x>y
<=Küçük ya da eşit mi?
Solundaki operandın sağındaki operanddan küçük ya da eşit olması durumunu karşılaştırır.
x<=y
>=Büyük ya da eşit mi?
Solundaki operandın sağındaki operanddan büyük ya da eşit olması durumunu karşılaştırır.
x>=y
==Eşit mi?
Solundaki operand ile sağındaki operandın eşitlik durumunu karşılaştırır.
x==y
===Denk mi?
Solundaki operand ile sağındaki operandın denklik durumunu karşılaştırır.
x===y
!=Eşit değil mi?
Solundaki operand ile sağındaki operandın eşit olmama durumunu karşılaştırır.
x!=y
!==Denk değil mi?
Solundaki operand ile sağındaki operandın denk olmama durumunu karşılaştırır.
x!==y

Mantıksal Operatörler

İki ya da daha fazla mantıksal ifade kullanılarak bir mantıksal ifade elde etmek için kullanılır.

VE (&&) Mantıksal Operatörü

Operandların tümünün true olması durumunda true, aksi durumda false döndürür.

a1 = true  && true       // true
a2 = true  && false      // false
a3 = false && true       // false
a4 = false && (3 == 4)   // false
a5 = 'Cat' && 'Dog'      // "Dog"
a6 = false && 'Cat'      // false
a7 = 'Cat' && false      // false
a8 = ''    && false      // ""
a9 = false && ''         // false

VEYA (||) Mantıksal Operatörü

Operandların en az bir tanesinin true olması durumunda true, aksi durumda false döndürür.

o1 = true  || true       // true
o2 = false || true       // true
o3 = true  || false      // true
o4 = false || (3 == 4)   // false
o5 = 'Cat' || 'Dog'      // "Cat"
o6 = false || 'Cat'      // "Cat"
o7 = 'Cat' || false      // "Cat"
o8 = ''    || false      // false
o9 = false || ''         // ""

DEĞİL (!) Mantıksal Operatörü

Sağındaki operandın mantıksal ifadesini tersine çevirir.

n1 = !true; // false
n2 = !false; // true
n3 = !"Cat"; // false

Koşullu İfadeler (if/else – switch/case)

İf/Else Söz Dizimi

if(koşul){
    // Koşulun doğru olduğunda çalışacak kod bloğu
}else{
    // Koşul doğru olmadığında çalışacak kod bloğu
}

İf Kullanımı

var x = 3;
var y = 5;

if(x <= y){
    console.log(x + " " + y + "'den küçük ya da eşittir.");
}

İf / Else Kullanımı

var x = 5;
var y = 4;
if(x < y){
    console.log(x + " " + y + "'den küçüktür.");
}else{
    console.log(x + " " + y + "'den küçük değildir.");
}

İf / Else İf / Else Kullanımı

var x = 10;
var y = 15;

if (x < y) {
    console.log(x + " " + y + "'den küçüktür.");
} else if(x == y){
    console.log(x + " ve " + y + " eşittir.");
} else {
    console.log(x + " " + y + "'den büyüktür.");
}

Switch/Case Söz Dizimi

switch(kontrolEdilecekDeger){
    case 'deger1' : 
        // kontrolEdilecekDeger deger1 dir.
    break;
    case 'deger2' : 
        // kontrolEdilecekDeger deger2 dir.
    break;
    default : 
        // Hiçbir durum eşleşmediğinde çalışacak kod bloğu
}

Switch/Case Kullanımı

var x = "5";

switch(x){
    case '5' : 
        console.log("x değişkeninin değeri 5'dir.");
    break;
    case '6' : 
        console.log("x değişkeninin değeri 6'dir.");
    break;
    default : 
        console.log("x değişkeninin değeri geçersizdir.");
}

Üçlü (Ternary) Operatör İle Koşullu İfade

Ternary operatörün söz dizimi aşağıdaki gibidir.

degisken = (koşul) ? kosulDogruDegeri : kosulYanlisDegeri;

Örnek;

var yas = 21;
var resit_mi = yas >= 18 ? 'Evet' : 'Hayır';

yukarıdaki örnekte yas değişkeninin değeri 18’den büyük ya da eşitse resit_mi degiskeninin değeri “Evet“, 18 yaşından küçükse “Hayır” olacaktır.


Döngüler

While Döngüsü

While döngüsünün söz dizimini aşağıda görebilirsiniz.

while(koşul){
    //döngüye girecek kod bloğu
}

While döngüsü kullanılarak konsola örneğin 1’den 10’a kadar yazdırmak istersek;

var i = 1;

while(i <= 10){
    console.log("Döngü " + i + ". kez çalıştı.");
    i++;
}

Do-While Döngüsü

Do While döngüsü diğer döngülerden biraz daha farklıdır. Söz dizimi aşağıdaki gibidir.

do{
    //döngüye girecek kodlar
}while(koşul);

Do while döngüsünde döngü içerisindeki kodlar bir kez çalışır ve daha sonra döngü koşulu kontrol edilerek döngüye devam edilir ya da döngüden çıkılır.

var i = 0;
do{
    i++;
    console.log(i + ". kez döngü çalıştı.");
}while(i < 1);

For Döngüsü

For döngüsünün söz dizimini aşağıda görebilirsiniz.

for(tanım; döngüKoşulu; herDöngüdeYapılacakİşlem){
    // Döngüye girecek kod bloğu
}

For döngüsü kullanılarak konsola örneğin 1’den 10’a kadar yazdırmak istersek;

for(var i = 1; i <= 10; i++){
    console.log("Döngü " + i + ". kez döndü.");
}

Dizilerde For Döngüsü

var sehirler = ["İstanbul", "Ankara", "İzmir"];

for(var i = 0; i < sehirler.length; i++){
    console.log(sehirler[i]);
}

Dizi ve Nesnelerde For In Döngüsü

Eleman sayısı bilinmeyen dizi ve nesnelerde for in döngüsü kullanmak da mümkündür.

var liste = ["Elma", "Armut", "Muz"];

for(i in liste){
    console.log(liste[i]);
}

var nesne = {marka: "Ford", renk : "Gümüş", yil : 2020};

for(i in nesne){
    console.log(nesne[i]);
}

Dizilerde For Of Döngüsü

İndis anahtarlarıyla dizi elemanlarına ulaşmak zahmetli olabilir. Bu yüzden dizilerde for of döngüsünü kullanmak daha işlevsel olacaktır.

var dizi = ["Ahmet", "Mehmet", "Selim"];

for(var eleman of dizi){
    console.log(eleman);
}

continue Devam İfadesi

Döngü içerisinde kendisinden sonra gelen kodları atlayarak döngüye devam eder.

var i = 0;

while(i <= 9){
    i++;
    if(i == 5){
        continue;
    }
    console.log("Döngü " + i + ". kez çalıştı.");
}

Yukarıdaki örnekte i‘nin değeri 5 olduğunda continue ifadesi çalışacağından sonrasındaki kodlar dikkate alınmayarak döngü başına dönülerek devam edilir.

break Kaçış İfadesi

Döngü içerisinde döngüyü sonlandırmak/bitirmek ya da döngüden çıkmak için kullanılır.

var i = 0;

while(true){
    i++;
    if(i == 5){
        break;
    }
    console.log("Döngü " + i + ". kez çalıştı.");
}

Yukarıdaki döngü örneği normalde sonsuz döngüye girecekken i‘nin değeri 5 olduğunda break ifadesi ile döngü sonlandırılır.


Diziler (Arrays)

Javascriptte bir dizi oluşturmak için iki farklı yöntem vardır.

var ArabaMarkalari = ["Opel", "Renault", "Ford", "BMW"];

var TelefonMarkalari = new Array("Samsung", "Apple", "Nokia");

Dizi içerisindeki bir elamana ulaşmak için ilgili elemanın indis (index) anahtarı ile kullanabilirsiniz.

ArabaMarkalari[0]; // Opel
TelefonMarkalari[1]; // Apple

Dizi içerisindeki bir elemanın değerini değiştirmek için yine ilgili elamanın indis (index) anahtarını kullanarak yeni bir atama işlemi yapabilirsiniz.

ArabaMarkalari[0] = "Audi";

Dizi Metotları

Dizileri kullanırken Javascript tarafından kullanıma sunulmuş metotları kullanarak dizileri kolayca yönetebilirsiniz.

Diziye Eleman Ekleme

lenght

Dizinin eleman sayısını verir.

ArabaMarkalari.lenght

push()

Dizi sonuna yeni bir eleman eklemek için push() metodu kullanılır. Bu metot değer olarak yeni dizinin uzunluğunu (eleman sayısını) döndürür.

ArabaMarkalari.push("Mazda");

unshift()

Dizi başına yeni bir eleman eklemek için unshift() metodu kullanılır. Bu metot değer olarak yeni dizi uzunluğunu (eleman sayısını) döndürür.

ArabaMarkalari.unshift("Tesla");

splice()

Dizinin başına ya da sonuna değil de ortasına eleman eklemek isterseniz splice() metodunu kullanabilirsiniz.

var liste = ["Muz", "Kiwi", "Şeftali"];

console.log(liste);
// ['Muz', 'Kiwi', 'Şeftali']

liste.splice(1, 0, "Elma", "Armut");
console.log(liste);
// ['Muz', 'Elma', 'Armut', 'Kiwi', 'Şeftali']

liste.splice(3, 1, "Karpuz", "Kiraz");
console.log(liste);
// ['Muz', 'Elma', 'Armut', 'Karpuz', 'Kiraz', 'Şeftali']

splice() parametreleri :
İlk parametre dizinin başından kaç eleman atlanacağını bildirir.
İkinci parametre ilgili konumdan sonra kaç elemanın silineceğini bildirir.
Sonraki parametreler ilgili konuma eklenecek elemanlardır.

Diziden Eleman Silme

pop()

Dizi sonundaki elemanı silmek için pop() metodu kullanılır. Bu metot değer olarak sildiği elemanı döndürür.

ArabaMarkalari.pop();

shift()

Dizi başındaki elemanı silmek için shift() metodu kullanılır. Bu metot değer olarak sildiği elemanı döndürür.

ArabaMarkalari.shift();

Silmek istediğiniz eleman dizinin başında ya da sonunda değilse; silmek istediğiniz elemanın indis anahtarı kullanılarak delete anahtar ifadesini kullanabilirsiniz.

delete ArabaMarkalari[3];

Not : delete anahtar ifade dizi elemanını siler ancak bir kaydırma yapmaz. Yani dizi içerisinde değeri olmayan eleman kalmaya devam eder.

Dizi İçinde Arama Yapma

indexOf()

Dizi içerisindeki elemanlarda arama yapmak ya da elamanın indisini bulmak için indexOf() metodu kullanılır.

if(ArabaMarkalari.indexOf("BMW") !== -1){
    console.log(ArabaMarkalari[ArabaMarkalari.indexOf("BMW")]);
}

forEach() Döngüsü

Dizi elemanlarına while ya da for döngüsü kullanarak ulaşabilirsiniz. Bir başka yöntemde forEach() metodudur. Javascriptte foreach kullanımı diğer programlama dillerinden farklıdır.

ArabaMarkalari.forEach(function(elaman){
    console.log(eleman);
});

Diziyi Sınama

Dizi türündeki bir veriyi sınamak için Array.isArray() kullanılır.

var liste = ["Ahmet", "Mehmet"];

if(Array.isArray(liste)){
    console.log("Bu bir dizidir.");
}else{
    console.log("Bu bir dizi değildir.");
}

Diziyi Dizeye Çevirme

Bir dizi elemanlarını belli bir karakter ile birleştirmek için join() ya da elemanları virgül (,) ile birleştirerek bir dize elde etmek için toString() metodu kullanılır.

var liste = ["Ahmet", "Mehmet"];

console.log(liste.toString()); // "Ahmet,Mehmet"
console.log(liste.join(", ")); // "Ahmet, Mehmet"
console.log(liste.join(" / ")); // "Ahmet / Mehmet"

Dizileri Birleştirme

Bir veya daha fazla diziyi birleştirerek yeni bir dizi oluşturmak için concat() metodu kullanılır.

var meyve = ["Elma", "Armut"];
var sebze = ["Salatalık", "Domates"];
var yesillik = ["Maydanoz", "Kıvırcık"];

var manav = meyve.concat(sebze, yesillik);
console.log(manav);
// ['Elma', 'Armut', 'Salatalık', 'Domates', 'Maydanoz', 'Kıvırcık']

Dizide Kırpma

Dizi içerisinde belli elemanları alarak yeni bir dizi oluşturmak için slice() metodu kullanılır.

slice() metodu iki parametre alır.
İlk parametre dizinin başından kaç elemanın atlanacağını bildirir.
İkinci parametre dizinin kaçıncı elemanına kadar alınacağını bildirir. İkinci parametre belirtilmezse dizinin kalan tüm elemanlarını alır.

var meyve = ["Elma", "Armut", "Portakal", "Şeftali", "Limon"];

console.log(meyve.slice(2));
// ["Portakal", "Şeftali", "Limon"]

console.log(meyve.slice(2, 4));
// ["Portakal", "Şeftali"]

console.log(meyve.slice(-1));
// ["Limon"]

Dizilerde Sıralama Metotları

sort()

Dizi elemanlarını alfabetik olarak sıralar.

var meyve = ["Portakal", "Elma", "Şeftali", "Üzüm"];
meyve.sort();
console.log(meyve);
// ['Elma', 'Portakal', 'Üzüm', 'Şeftali']

sort() metodu alfabetik olarak sıralama yaptığından sayısal elemanları sıralarken sayısal değerleri de dize türünde karşılaştıracaktır. Bu durumda örneğin 10 değeri 100 değerinden büyük kabul edilecek ve haliyle istenilen sonuç elde edilemeyecektir. Bu durumu önlemek için bir karşılaştırma fonksiyonu yazmanız gerekir.

Büyükten Küçüğe Sıralama

var sayilar = [5, 7, 2, 4, 8, 16];

sayilar.sort(function(x,y){ return y - x;});

console.log(sayilar);
// [16, 8, 7, 5, 4, 2]

Küçükten Büyüğe Sıralama

var sayilar = [5, 7, 2, 4, 8, 16];
sayilar.sort(function(x,y){ return x - y;});
console.log(sayilar);
// [2, 4, 5, 7, 8, 16]

reverse()

Dizi elemanlarını tersten sıralar.

var meyve = ["Portakal", "Elma", "Şeftali", "Üzüm"];
meyve.reverse();
console.log(meyve);
// ['Üzüm', 'Şeftali', 'Elma', 'Portakal']

localeCompare()

Javascript de sıralama işlemi sırasında ASCII karakterleri dışındaki karakterler göz ardı edilir. Bu durumu önlemek ve örneğin Türkçe karakterleri de sıralamaya doğru şekilde dahil etmek için localeCompare() metodu kullanılabilir.

var dizi = ["Şafak", "Çağrı", "Yavuz"];

dizi.sort();
console.log(dizi);
// ['Yavuz', 'Çağrı', 'Şafak']

dizi.sort(function(x,y){ return x.localeCompare(y);});
console.log(dizi);
// ['Çağrı', 'Şafak', 'Yavuz']

Nesne (Object)

Not : Javascriptte Nesne (Object) denildiğinde aklınıza nesne yönelimli programlama dillerinde olan sınıf nesneleri gelmesin. Javascriptte nesne yapısı daha çok PHP’deki ilişkisel dizilere daha çok benzer.

var nesneAdi = {
    isim : "Muhammet Şafak",
    yas : 28
}

Yukarıdaki örnekteki örneğin isim anahtarının değerine;

nesneAdi.isim;
// ya da
nesneAdi[isim];

şeklinde ulaşabilirim.

Nesneye yeni bir eleman (özellik) eklemek ya da düzenlemek istediniz de erişir gibi tanımlama yapabilirsiniz.

Örneğin yaş elemanının değerini değiştirip, sehir anahtarı ile yeni bir eleman ekleme işlemi yapalım;

nesneAdi.yas = 29;
nesneAdi.sehir = "İstanbul";

Nesne içerisindeki bir elemanı/özelliği kaldırmak ya da silmek için delete anahtar ifadesi kullanılır.

delete nesneAdi.yas;

Fonksiyon

Javascript de fonksiyon tanımlamak için function anahtar ifadesi kullanılır. Söz dizimi aşağıdaki gibidir.

function islevAdi(...parametreler){
    // fonksiyonun yapacağı işlemler
}

Aldığı iki parametreyi toplayan basit bir fonksiyonun yazımı aşağıdaki gibidir.

function topla(x, y){
    return x + y;
}

topla(5, 10); // 15

Varsayılan olarak fonksiyon için tanımladığınız parametrelere varsayılan değerler atamak mümkündür. Böylece o parametre verilmeden fonksiyon çağırılmak istendiğinde hatasız çalışması sağlanır.

function ussu(x, y = 2){
    return x ** y;
}

console.log(ussu(4)); // 16

console.log(ussu(3, 3)) // 27

Anonim Fonksiyon

Kısa ve basit fonksiyonların yazımında kullanabileceğiniz yapısı ile anonim fonksiyonlar sıklıkla karşınıza çıkacaktır.

Farklı söz dizimi olan yapılardır. Bir kaç örneği aşağıda bulabilirsiniz.

var carpma = (x, y) => { return x * y; };

console.log(carpma(5, 4)); // 20
var kareHesapla = x => { return x ** 2; };

console.log(kareHesapla(5)); // 25

Dizi Elemanlarını Parametre Olarak Gönderme

function topla(x, y, z){
    return x + y + z;
}

var dizi = [3, 5, 7];

console.log(topla(...dizi)); // 15

Nesne İçerisinde Fonksiyon

Nesne içerisinde fonksiyonlar tanımlamak ve bunları kullanmak mümkündür.

Örnek 1;

var nesneAdi = {
    isim : "Muhammet",
    yas : 28,
    tanitKendini : function(){
        return "Adım " + this.isim + " " + this.yas + " yaşındayım.";
    }
}
console.log(nesneAdi.tanitKendini());

Örnek 2;

var matematik = {
    toplama : function(x, y){
        return x + y;
    },
    cikarma : function(x, y){
        return x - y;
    },
    bolme : function(x, y){
        return x / y;
    },
    carpma : function(x, y){
        return x * y;
    }
}

console.log(matematik.toplama(16, 4));
console.log(matematik.cikarma(16, 4));
console.log(matematik.bolme(16, 4));
console.log(matematik.carpma(16, 4));

Değişkenlerde Kapsama Alanı

Javascript de fonksiyon içerisinde oluşturulan değişkene fonksiyon dışından ulaşılamaz. Ancak fonksiyon dışında genel alanda oluşturulan değişkenlere fonksiyon içerisinden ulaşılabilir.

Yani fonksiyon içerisinde tanımladığınız değişkenler yerel, fonksiyon dışında tanımladığınız değişkenler global’dir.

var adiniz = "Muhammet";

function tanit(){
    var soyadiniz = "ŞAFAK";

    console.log(adiniz + " " + soyadiniz);
}

tanit(); // Muhammet ŞAFAK
console.log("adiniz : " + adiniz); // Muhammet
console.log("soyadiniz : " + soyadiniz); // Undefined Error

Javascript ve Matematik

Javascript her ne kadar hassas matematik işlemleri için tercih edilmiyor olsa da kullanabileceğiniz bazı kullanışlı metotlara sahiptir.

Not : Javascript hassas aritmetik işlemlerde tercih ve tavsiye edilmez. Javascript, aritmetik işlemlerin sonucunun doğruluğunu %100 teyit etmemektedir. Özellikle kayar noktalı aritmetik hesaplamalarda sapma oluşabilir.

Yuvarlama Metotları

Math.round()

Kayar noktalı sayıyı en yakın tam sayıya yuvarlamak için kullanılır.

console.log(Math.round(4.4)); // 4 
console.log(Math.round(4.7)); // 5 

Math.ceil()

Kayar noktalı yukarı yönlü tam sayıya yuvarlamak için kullanılır.

console.log(Math.ceil(4.2)); // 5 
console.log(Math.ceil(4.7)); // 5 

Math.floor()

Kayar noktalı sayıyı aşağı yönlü tam sayıya yuvarlamak için kullanılır.

console.log(Math.floor(4.3)); // 4 
console.log(Math.ceil(4.8)); // 4

Minimum ve Maksimum Değeri Bulma

Math.min()

Verilen değerlerden en küçüğünü bularak döndürür.

console.log(Math.min(0, 30, 359, -49, 100, -1, -20)); // -49 

Math.max()

Verilen değerlerden en büyüğünü bularak döndürür.

console.log(Math.max(0, 30, 259, -49, 100, -1, -20)); // 259 

Karekök, Mutlak ve Üssü Hesaplama

Math.pow()

Bir sayının üssünü hesaplamak için kullanılır.

/*
4 üssü 2
4 * 4
4 ** 2
*/
console.log(Math.pow(4, 2)); // 16

Math.abs()

Bir sayının mutlak değerini hesaplamak için kulanılır.

console.log(Math.pow(-2.45)); // 2.45

Math.sqrt()

Bir sayının karekökünü hesaplamak için kullanılır.

console.log(Math.sqrt(256)); // 16

Ondalık Basamak Sayısını Belirleme

Kayar noktalı sayılarda nokta (ya da virgül) sonrasında kaç basamak olacağı belirtmek için kullanılan metotlar vardır.

var pi = 3.14;

// toExponential() : Bilimsel Yazım
console.log(pi.toExponential(1)); // 3.1e+0
console.log(pi.toExponential(3)); // 3.140e+0

// toFixed() : Noktadan Sonraki Basamak
console.log(pi.toFixed(0)); // 3
console.log(pi.toFixed(2)); // 3.14
console.log(pi.toFixed(4)); // 3.1400

// toPrecision() : Gösterilecek Rakam Miktarı
console.log(pi.toPrecision()); // 3.14
console.log(pi.toPrecision(2)); // 3.1
console.log(pi.toPrecision(4)); // 3.140

Javascript ve Zaman

Javascript de zaman yani tarih ve saat işlemleri Date nesnesi üzerinden yapılır.

console.log(Date());
// Output : Sat Oct 23 2021 12:59:44 GMT+0300 (GMT+03:00)

Bir zaman nesnesi oluşturmak için farklı şekillerde tanımlamalar yapmak mümkündür. Örneğin bir tarih nesnesi oluştururken hiçbir parametre vermezseniz çalışma zamanı için bir nesne oluşur. Ya da bir tam sayı olarak milisaniye cinsinden bir değer verebilirsiniz. Ya da tarih nesnesi için bir tarih bilgisini parametre olarak gönderebilirsiniz. Ya da tarih bilgisini tek tek parametreler olarak gönderebilirsiniz.

/*
Şimdiki zaman için bir tarih nesnesi
*/
var nowDate = new Date();
console.log(nowDate);
// Output : Sat Oct 23 2021 13:11:51 GMT+0300 (GMT+03:00)

/*
Milisaniye verilerek oluşturulmuş tarih nesnesi
*/
var mSecondDate = new Date(86400000);
console.log(mSecondDate);
// Output : Fri Jan 02 1970 02:00:00 GMT+0200 (GMT+03:00)

/*
Belli bir tarih verilerek oluşturulmuş tarih nesnesi
*/
var dateDate = new Date("Jan 01, 2021 09:30:00");
console.log(dateDate);
// Output : Fri Jan 01 2021 09:30:00 GMT+0300 (GMT+03:00)

/*
Bilgiler parametre olarak verilmesiyle oluşturulmuş tarih nesnesi
Parametreler Sırasıyla : 
Yıl, Ay, Gün, Saat, Dakika, Saniye, Milisaniye
*/
var dateDate = new Date(2021, 10, 24, 10, 45, 30, 0);
console.log(dateDate);
// Output : Wed Nov 24 2021 10:45:30 GMT+0300 (GMT+03:00)

Tarih Nesnesi Metotları

MetotAçıklamaDeğer
toUTCString()Tarih’i UTC standartlarında formatlar.
toDateString()Tarihi formatlar.
toLocaleDateString()Tarihe yerelleştirme uygulayarak formatlar.
toISOString()Tarihi ISO standartlarında formatlar.
getTime()1 Ocak 1970 tarihinden beri geçen milisaniyeyi verir.
getDate()Ayın gün bilgisini verir.1 – 31
getDay()Haftanın gününü verir.
(Pazar = 0)
0 – 6
getMonth()Ay bilgisini verir.
(Ocak = 0)
0 – 11
getFullYear()4 haneli yıl bilgisini verir.2011, 2022, …
getHours()Saat bilgisini verir.0 – 23
getMinutes()Dakika bilgisini verir.0 – 59
getSeconds()Saniye bilgisini verir.0 – 59
getMilliseconds()Milisaniye bilgisini verir.0 – 999
setFullYear()Tarih nesnesine yıl bilgisini tanımlar.
(İsteğe bağlı olarak ay ve gün bilgisini de tanımlayabilir.)
setMonth()Tarih nesnesine ay bilgisine tanımlar.
(Ocak = 0)
0 – 11
setDate()Tarih nesnesine ayın günü bilgisini tanımlar.1 – 31
setHours()Tarih nesnesine saat bilgisini tanımlar.0 – 59
setMinutes()Tarih nesnesine dakika bilgisini tanımlar.0 – 59
setSeconds()Tarih nesnesine saniye bilgisini tanımlar.0 – 59
setMilliseconds()Tarih nesnesine milisaniye bilgisini tanımlar.0- 999
setTime()Tarih nesnesine 1 Ocak 1970’den itibaren geçen milisaniye bilgisini tanımlar.

toUTCString()

Tarih nesnesini daha okunaklı hale getirmek için eşgüdümlü evrensel zaman standartlarına uygun biçimlendirerek döndürür.

var now = new Date();
console.log(now.toUTCString());
// Output : Sat, 23 Oct 2021 10:17:42 GMT

toDateString() ve toLocaleDateString()

Tarih nesnesini formatlamak için kullanılır.

var now = new Date();
console.log(now.toDateString());
// Output : Sat Oct 23 2021

console.log(now.toLocaleDateString());
// Output : 23.10.2021

toISOString()

Tarih nesnesini ISO standartlarında formatlayarak verir.

var now = new Date();
console.log(now.toISOString());
// Output : 2021-10-23T10:22:17.121Z

getTime()

1 Ocak 1970’den itibaren tarih nesnesinin tuttuğu zamana kadar geçen milisaniyeyi döndürür.

var now = new Date();
console.log(now.getTime()); // 1634984630956

getDate()

Tarih nesnesinin gün bilgisini döndürür.

var now = new Date();
console.log(now.getDate()); // 23

getDay()

Tarih nesnesinin haftanın kaçıncı günü olduğu bilgisini döndürür.

var now = new Date();
console.log(now.getDay()); // 6

Pazar : 0

Cumartesi : 6

getMonth()

Tarih nesnesinin ay bilgisini döndürür.

var now = new Date();
console.log(now.getMonth()); // 9

Ocak : 0

Aralık : 11

getFullYear()

Tarih nesnesinin yıl bilgisini döndürür.

var now = new Date();
console.log(now.getFullYear()); // 2021

getHours()

Tarih nesnesinin saat bilgisini döndürür.

var now = new Date();
console.log(now.getHours()); // 13

getMinutes()

Tarih nesnesinin dakika bilgisini döndürür.

var now = new Date();
console.log(now.getMinutes()); // 45

getSeconds()

Tarih nesnesinin saniye bilgisini döndürür.

var now = new Date();
console.log(now.getMinutes()); // 45

getMilliseconds();

Tarih nesnesinin milisaniye bilgisini döndürür.

var now = new Date();
console.log(now.getMilliseconds()); // 675

setFullYear()

Tarih nesnesinin yıl bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
now.setFullYear(2000);
console.log(now.toDateString()); // Mon Oct 23 2000

İstenirse ikinci parametreye ay, üçüncü parametreye gün bilgisi tanımlanarak bunlarda bu metotla değiştirilebilir.

var now = new Date();
now.setFullYear(2000, 3, 30);
console.log(now.toDateString()); // Sun Apr 30 2000

setMonth()

Tarih nesnesinin ay bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
now.setMonth(5);
console.log(now.toDateString()); // Wed Jun 23 2021

setDate()

Tarih nesnesinin gün bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
now.setDate(5);
console.log(now.toDateString()); // Tue Oct 05 2021

setHours()

Tarih nesnesinin saat bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
now.setHours(5);
console.log(now); // Sat Oct 23 2021 05:12:12 GMT+0300 (GMT+03:00)

setMinutes()

Tarih nesnesinin dakika bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
now.setMinutes(5);
console.log(now); // Sat Oct 23 2021 14:05:39 GMT+0300 (GMT+03:00)

setSeconds()

Tarih nesnesinin saniye bilgisini tanımlamak/değiştirmek için kullanılır.

var now = new Date();
now.setSeconds(5);
console.log(now); // Sat Oct 23 2021 14:13:05 GMT+0300 (GMT+03:00)

setMilliseconds()

Tarih nesnesinin milisaniye bilgisini değiştirmek/tanımlamak için kullanılır.

var now = new Date();
console.log(now.getMilliseconds()); // 722
now.setMilliseconds(230);
console.log(now.getMilliseconds()); // 230

setTime()

Tarih nesnesinin tuttuğu tarihi 1 Ocak 1970 tarihinden itibaren geçen milisaniye ile yeniden tanımlamak için kullanılır.

var now = new Date();
console.log(now); // Sat Oct 23 2021 14:15:36 GMT+0300 (GMT+03:00)
now.setTime(1624947699714);
console.log(now); // Tue Jun 29 2021 09:21:39 GMT+0300 (GMT+03:00)

Dize (String) Metotları

Uzunluğu Öğrenme

Bir dizenin toplam karakter sayısını length ile öğrenebilirsiniz.

var dize = "Muhammet";

console.log(dize.length); // 8

Arama

Bir dize içerisinde arama yapmak için indexOf() ve lastIndexOf() metotları kullanılır.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

var search = "Muhammet";

if(dize.indexOf(search) !== -1){
    console.log(search + " bulundu!");
}else{
    console.log(search + " bulunamadı!");
}

if(dize.lastIndexOf(search) !== -1){
    console.log(search + " bulundu!");
}else{
    console.log(search + " bulunamadı!");
}

indexOf() metodu baştan başlayarak, lastIndexOf() metodu ise sondan başlayarak arama yapar ve bulduğunda indis bilgisini döndürür. Hiçbir şey bulamazsa her ikisi de -1 döndürür.

Ayrıca düzenli ifadeler ile arama yapmayı sağlayan search() metodu da vardır.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

var pattern = "/Muhammet/gi";

if(dize.search(pattern) !== -1){
    console.log("bulundu!");
}else{
    console.log("bulunamadı!");
}

Düzenli İfadeler hakkında daha fazla ayrıntıyı Regular Expression (Düzenli İfadeler) başlıklı paylaşımımda bulabilirsiniz.

Dize Parçalama

slice() dize içerisinde kırpma işlemi yapar.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

console.log(dize.slice(10, 18)); // nim adım
console.log(dize.slice(-24, -6)); // bilgisayar program
console.log(dize.slice(-13)); // programcıyım.

İlk parametre başlangıç, ikinci parametre bitiş karakter sayısını belirtir.

Tek parametre verilirse, ikinci parametre dizenin toplam karakter sayısı kabul edilir. Yani başlangıçtan kesme yapar ve sonuna kadar kalan karakterleri alır.

Negatif değerler vermekte mümkündür ancak bazı tarayıcılarda bu soruna neden olabilir.

substring() dize içerisinde kırpma işlemi yapar.

slice() metodu ile aynı işlemi yapar ancak substring() metodu negatif parametre kabul etmez.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

console.log(dize.substring(8, 13)); // benim

substr() dize içerisinde kırpma işlemi yapar.

slice() metodu ile aynı işlemi yapar ancak substr() metodu ikinci parametre olarak alınacak karakter sayısını alır.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

console.log(dize.slice(8, 13)); // benim

console.log(dize.substr(8, 5)); // benim

Değiştirme

Dize içerisinde bir yeri değiştirmek için replace() metodu kullanılır. Dize içerisinde istenilen yeri değiştirir ve yeni bir dize üreterek döndürür. Dizeyi değiştirmez.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

console.log(dize.replace("Merhaba", "Selam"));
console.log(dize);

Not: replace() metodu düzenli ifadeler ile kulanılabilir.

Büyük-Küçük Harf Dönüşümü

Bir dize içerisindeki harfleri büyük harfe çevirmek için toUpperCase() metodu, küçük harfe çevirmek için ise toLowerCase() metodu kullanılır.

Not: Dize değiştirilmez.

var dize = "Merhaba benim adım Muhammet, bilgisayar programcıyım.";

console.log(dize.toUpperCase());
console.log(dize);
console.log(dize.toLowerCase());
console.log(dize);

Dize İçerisinde Karakter Alma

Dize içerisinden belli bir karakteri almak için charAt() metodu, bir karakterin kodunu almak için charCodeAt() metodu kullanılır.

var dize = "Muhammet ŞAFAK";

console.log(dize.charAt(9)); // Ş
console.log(dize.charCodeAt(9)); // 350

Dizeyi Diziye Çevirme (Parçalama)

Bir dizeyi diziye çevirmek için split() metodu kullanılır. split() metodu dizeyi belirtilen karakterden parçalara ayırarak bir dizi oluşturarak oluşturduğu diziyi döndürür.

var dize = "Muhammet ŞAFAK";

console.log(dize.split(" ")); // ["Muhammet", "ŞAFAK"]

Not : Bir karakter belirtilmezse her karakteri bir dizi elemanı olacak şekilde parçalar.

var dize = "Selam";

console.log(dize.split("")); // ["S", "e", "l", "a", "m"]

Diziyi Dizeye Çevirme (Birleştirme)

Bir dizinin elemanlarını belli bir ayraç kullanarak birleştirip bir dize haline getirmek için join() metodu kullanılır.

var dizi = ["Muhammet", "ŞAFAK"];

console.log(dizi.join(" ")); // Muhammet ŞAFAK

Dizeyi Kırpma

Bir dizenin önündeki ve sonundaki boşlukları yok etmek için trim() metodu kullanılır.

var data = "    Hello World       ";

console.log(data);
console.log(data.trim());

Dizeye Dolgu Yapma

Bir dizenin önüne ya da ardına dolgu yapmak için padStart() ve padEnd() metotları kullanılır.

var veri = "5";

console.log(veri.padStart(4, 0)); // 0005
console.log(veri.padStart(3, "x")); // xx5

console.log(veri.padEnd(3, 0)); // 500
console.log(veri.padEnd(2, "y")); // 5y

Javascript Düzenli İfadeler

Düzenli ifadeler belli bir yapı ya da desen ile işlemler yapmanızı sağlayan ifadelerdir. Düzenli ifadelerin genel kuralları için buradaki içeriğime göz gezdirebilirsiniz.

Pattern Yapısı

/desen/nitelik

Javascript Düzenli İfade Nitelikleri

NitelikAçıklama
iKüçük büyük harf duyarsız olmasını sağlar.
gDize veri türünde verinin tümünde işlem yapmayı sağlar. İlk eşleşmeden sonra işlem durdurmaz.
mBirden fazla satır içinde işlem yapmayı sağlar.

test()

Bir deseni verilen dize içerisinde arar. Eşleşme bulunursa true, eşleşmezse false döndürür.

var dize = "Merhaba, ben Muhammet. Bilgisayar programcısıyım.";
var desen = /muhammet/i;

if(desen.test(dize)){
    console.log("aranan içerik bulundu.");
}else{
    console.log("aranan içerik bulunamadı.");
}

exec()

Bir desen ile verilen dize içerisine eşleşme arar. Eşleşme bulunursa eşleşen veriyi, eşleşme yoksa null döndürür.

var dize = "Merhaba, ben Muhammet. Bilgisayar programcısıyım.";
var desen = /muhammet/i;

var sonuc = desen.exec(dize);

console.log(sonuc);

Javascript Hata Yönetimi

Hata yakalama ve hata yönetimi için try, catch, finally, throw, finally anahtar ifadeleri ile yapılır.

Söz dizimi

try {
    // Hata oluşabilecek kodlar bloğu
} catch (msg) {

    //hata oluşursa çalışacak kod bloğu
    console.log(msg);    
} finally{
    //Hata oluşsun oluşmasın çalışacak kod bloğu
}

try kod bloğu içerisinde hata oluşması muhtemel kodlar yazılır. Buradaki kodlar içerisinde bir hata oluşursa yakalanır ve catch kod bloğu çalışır.

finally kod bloğu isteğe bağlıdır. Hata oluşsa da oluşmasa da çalışır.

try{
    bolme(5, 6);
}catch(hata){
    console.log("Hata oluştu : " + hata);
}

Yukarıdaki örnekte bolme isimli bir fonksiyon olmadığı için bir hata mesajı yazacaktır.

Javascript hataları name ve message özelliklerine sahip bir nesne olarak gönderir.

ÖzellikAçıklama
nameHata adını tutar.
messageHata mesajını tutar.

Javascript farklı hata tipleri vardır.

Hata AdıAçıklama
RangeErrorSayı limit/sınır hata türüdür.
ReferenceErrorReferans hata türüdür.
SyntaxErrorSözdizimi hata türüdür.
TypeErrorTür hata türüdür.
URIErrorencodeURI() işlev hatasıdır.

throw

Bir hata fırlatmak için throw anahtar ifadesi kullanılır.

Örneğin bölme işlemi için bir fonksiyon yazalım ve bölen değer sıfır ise bir hata fırlatalım.

function bolme(bolunen, bolen){
    if(bolen == 0){
        throw "Sıfır'a bölünemez.";
    }else{
        return bolunen / bolen;
    }
}

try{
    bolme(5, 0);
}catch(hata){
    console.log("Hata oluştu : " + hata);
}finally{
    console.log("Finally kod bloğu çalıştı.");
}

Sert / Katı Çalıştır

Javascript kodlarınızın katı kurallar ile çalıştırılmasını sağlamak için javascript dökümanının üstüne

"use strict";

yazmanız yeterli olur.

Örneğin;

"use strict";
a = 2;
b = 5;
c = a * b;
console.log(c);

yukarıdaki örnekte normalde hatasız çalışacakken katı kurallar uyguladığımız için tanımlanmayan değişkene değer atama işlemi yüzünden ReferenceError türünde hata oluşturur.

Sadece fonksiyon içerisinde katı kurallar uygulamak için fonksiyon kod bloğu içerisinde use strict belirtilebilir.

x = 15;
console.log(x);
pi();

function pi(){
    "use strict";
    pi = 3.14;
    return pi;
}

use strict Niçin Kullanılır?

Katı kural tanımı güvenli kod yazmak için kullanılır. Daha doğru bir ifadeyle geliştiriciyi hatasız ve daha stabil kod yazmaya zorlar.


Bazı Javascript Fonksiyonları

setInterval()

Belirtilen milisaniye ile belli bir fonksiyonu çalıştırmak için kullanılır.

setInterval(function(){
    console.log(new Date());
}, 3000);

Yukarıdaki örnek her 3 saniyede bir geliştirici konsoluna tarih nesnesini oluşturup yazdıracaktır. Burada 3000 milisaniye 3 saniye anlamına gelir.

Fonksiyonu dışarıda tanımlayarak çalıştırmakta mümkündür.

setInterval(myTimer, 1000);

function myTimer() {
    var tarih = new Date();
    var saat = tarih.toLocaleTimeString();
    console.log(saat);
}

Bu fonksiyona dışarıdan parametreler göndermek de mümkündür.

setInterval(islev, 1000, "Merhaba");

function islev(msg) {
    console.log(msg + " " + new Date());
}


DOM (Document Object Model)

Dökümanlara erişmek için kullanılan W3C standardıdır.

Not : Burada hızlıca metotlardan ve nasıl kullanıldığından bahsedeceğim. Zira tüm metotlarını burada açıklamam mümkün değil.

document.getElementById()

HTML dökümanı içerisinde belirtilen id bilgisine sahip elemanı seçer.

<div id="secilecek"></div>

<script>
    document.getElementById("secilecek");
</script>

document.getElementsByClassName()

HTML dökümanı içerisinde belirtilen class bilgisine sahip elemanı seçer.

<div class="secilecek"></div>

<script>
    document.getElementsByClassName("secilecek");
</script>

document.getElementsByTagName()

HTML dökümanı içerisinde belirtilen etikette sahip elamanı seçer.

<div class="kutu"></div>
<div class="koli"></div>
<div class="box"></div>

<script>
    document.getElementsByTagName("div");
</script>

document.querySelector()

HTML dökümanı içerisinde belirtilen elemanı seçer.

<div class="kutu"></div>
<div class="koli"></div>
<div class="box"></div>
<div id="maske"></div>

<script>
    // Class adı ile seçme
    document.querySelector(".kutu");

    // Id adı ile seçme
    document.querySelector("#maske");

    // Etiket ile seçme
    document.querySelector("div");
</script>

Eğer döküman içerisinde seçilecek birden fazla eleman varsa istenilen özelliğe sahip tüm elemanları seçmek için document.querySelectorAll() metodu kullanılır.

style Nesnesi

Seçilen bir HTML öğesinin stil değerlerini değiştirmeye ya da tanımlamak için kullanılır.

<style>
    .kutu{
        width: 200px;
        height: 200px;
        background-color: blue;
        display: block;
    }
</style>

<div class="kutu"></div>

<script>
    var kutu = document.querySelector(".kutu");
    kutu.style.backgroundColor = 'red';
</script>

Yukarıdaki örnekte “kutu” seçilmiş ve arka plan stili değiştirilerek kırmızı yapılmıştır.

Style nesnesinin kullanılabilir tüm özellik ve metotları için; https://www.w3schools.com/jsref/dom_obj_style.asp adresini ziyaret edebilirsiniz.

classList Nesnesi

classList nesnesi seçilen eleman için class etiketini yönetmeyi sağlar. Javascript DOM classList nesnesinin tüm özellik ve metotları için https://www.w3schools.com/jsref/prop_element_classlist.asp adresini ziyaret edebilirsiniz.

var kutu = document.querySelector("#kutu");

// seçilen etiketin class isimlerinin listesini alalım.
console.log(kutu.classList);

// seçilen elamana yeni bir class atayalım
kutu.classList.add("yeniClass");

// seçilen elemanın bir class değerini kaldıralım
kutu.classList.remove("eskiClass");

// seçilen elemana class varsa kaldır yoksa ekle
kutu.classList.toggle("toggleClass");

textContent Özelliği

Seçilen elemanın metin içeriğini döndürür. HTML etiketleri döndürülmez.

var paragraf = document.querySelector("p");

console.log(paragraf.textContent);

paragraf.textContent = 'İçeriği bu şekilde değiştirebilirim.';

innerHTML Özelliği

textContent özelliğine benzer şekilde çalışır ancak HTML etiketilerini döndürür ve kabul eder.

var paragraf = document.querySelector("p");

paragraf.innerHTML = 'İçeriği bu <strong>şekilde</strong> değiştirebilirim.';

Attributes

Javascript ile HTML dökümanı içerisinde seçilen bir HTML etiketine ait attribute değerlerini değiştirebilirsiniz.

Örneğin bir “a” etiketinin “href” attribute değerini değiştirelim.

<a href="https://www.google.com" class="link">google.com</a>

<script>

var link = document.querySelector(".link");

// attribute değerini öğrenme
console.log(link.getAttribute("href"));

//attribute değerini değiştirme
link.setAttribute("href", "https://www.muhammetsafak.com.tr");
    
</script>

Javascript Events (Olaylar)

Buraya kadar anlatılan her şey sayfanın yüklenmesi ile çalışan yapılardı. Ancak Javascripti kullanışlı yapan temel kullanım şekli olaylar. Örneğin kullanıcı bir yere tıkladığında ya da klavyeden bir tuşa bastığında tetiklenen yapılar kurmak için olaylar kullanılır.

Javascript HTML Olayları

OlayAçıklama
onclickKullanıcı HTML nesnesine tıkladığında tetiklenir.
onchangeHTML öğesi değiştirildiğinde tetiklenir.
onkeydownKlavyede tuşa basıldığında tetiklenir.
onmouseoverMouse HTML öğesinin üzerine geldiğinde tetiklenir.
onmouseoutMouse HTML öğesinin üzerinden ayrıldığında tetiklenir.
onloadSayfa yüklemesi tamamlandığında tetiklenir.

Şimdi basit bir kullanım örneği vereyim.

<button onclick="karesi(4)">4'ün karesi</button>

<script>
    function karesi(x){
        alert(x ** 2);
    }
</script>

DOM ve Olaylar

addEventListener()

Bu metot seçilen HTML öğesi için bir olay oluşturur.


<p>Hello World!</p>
<br />
<button class="tr">Türkçe</button>
<button class="en">İngilizce</button>
<button class="fr">Fransızca</button>

<script>
    var btn_tr = document.querySelector(".tr");
    var btn_en = document.querySelector(".en");
    var btn_fr = document.querySelector(".fr");
    var p = document.querySelector("p");
    
    btn_tr.addEventListener('click', function(){
        p.innerHTML = "Merhaba Dünya";
    });

    btn_en.addEventListener('click', function(){
        p.innerHTML = "Hello World";
    });

    btn_fr.addEventListener('click', fr_hello);

    function fr_hello(){
        p.innerHTML = 'Bonjour le Monde';
    }
</script>

Bu noktada en azından bir JS dökümanını açtığınızda işlemleri az çok anlayabilecek seviyeye geleceğinizi umuyorum. Javascript de farklı yapılar örneğin Modül yapısı (ES6’dan beri) da vardır ancak bunlar tarayıcılar üzerinde çalışmadığından onlara hiç değinmedim.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s