JavaScript Dersleri

JavaScript , web sayfalarını etkileşimli hale getirmek için kullanılan bir programlama dilidir. Bir sayfaya hayat veren şey, kullanıcıyı etkileyen interaktif öğeler ve animasyondur. Ana sayfanızda bir arama kutusu kullandıysanız, bir haber sitesinde canlı bir futbol maçı puanı kontrol ettiyseniz veya bir video izlediyseniz, JavaScript muhtemelen onun içinden geçiyor demektir.

JavaScript hakkında neyin çok özel olduğunu, neleri başarabileceğimizi ve başka hangi teknolojilerin onunla iyi oynadığını görelim.

Bu dilde programlar betik olarak adlandırılır. Bunlar doğrudan HTML’de yazılabilir ve sayfa yüklendikçe otomatik olarak yürütülebilir.

Komut dosyaları düz metin olarak sunulur ve yürütülür. Çalışmak için özel bir hazırlık ya da derleme gerekmiyor.

İstediğiniz konuyu okumak için sekme üzerinde tıklayın
JavaScript Dersleri

JavaScript Üzrine…

JavaScript Nedir

JavaScript, web sayfalarını etkileşimli hale getirmek için kullanılan bir programlama dilidir. Bir sayfaya hayat veren şey, kullanıcıyı etkileyen interaktif öğeler ve animasyondur. Ana sayfanızda bir arama kutusu kullandıysanız, bir haber sitesinde canlı bir futbol maçı puanı kontrol ettiyseniz veya bir video izlediyseniz, JavaScript muhtemelen onun içinden geçiyor demektir.

Netscape tarayıcılar için tarafından 1996 yılından verisyon 1.0 olarak duyrulan javaScript, 1998 yılında versiyon 1.3 sürümü ile ECMA-262 standartları ile EcmaScript 1.0 standart dili olarak onaylandı. 2010 yılından beri 1.8.5 sürümü olarak kullanılan javascript, ECMA-262 5. sürüm standartlarını desteklemektedir.

JavaScript ile Java Aynı Mı?

JavaScript’e yeni başlayanların, web ortamında sık karşılaştığı bir kavram da javascript için kısaca java ifadesi kullanılması sorunudur. Java ile javaScript dilleri bir birinden çok ama çok farklı kavramlardır.

Java, bir makine ortamında bağımsız olarak çalıştırabileceği anlamına gelen, nesne yönelimli bir programlama dilidir. Android cihazlar için uygulamalar, terminaller için yazılımlar ve sunucu taraflı web sayfaları hazırlamak için kullanılan güvenilir bir dildir. Java uygulamarı çalışabilmesi için derlenmesi gerekir.

JavaScript, diğer taraftan, web tabanlı bir uygulamanın parçası olarak çalıştırılacak olan metin tabanlı bir programlama dilidir. İlk geliştirildiğinde, Java için bir iltifat olması amaçlandı. Ancak JavaScript, web geliştirme alanındaki üç temelden biri olarak hayatına devam ediyor. Diğeri HTML ve CSS dilleridir. JavaScript uygulamaları çalışabilmesi için tarayıcılar tarafından yorumlanması gerekir.

JavaScript’e Giriş

JavaScript Nedir?

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir. JavaScript ile yazılan istemci tarafı betikler sayesinde tarayıcının kullanıcıyla etkileşimde bulunması, tarayıcının kontrol edilmesi, asenkron bir şekilde sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi işlevler sağlanır.(wikipedia)

Günümüzde node.js gibi platformlar ile sunucu tarafında da kullanılmaya başlanmıştır.

HTML içinde JavaScript Kullanımı

HTML5 standart tanımlaması ile javascript kodları sadece script etiketleri arasına yazılmaktadır. Eski tanımlamalarda type ve language niteliklerine ihtiyaç duymasına rağmen güncel kullanımda bu gereksinimler kaldırılmıştır.

Kullanım:


<script>
// script kodları
</script>

// script kodları

</script>

Harici JavaScript Dosyasını HTML Belgesine Bağlama

Dahili kullanımda olduğu gibi yine script etiketleri kullanılmaktadır. Burada dikkat edilmesi gerek kısım ise script etiketinin src niteliğine harici olarak yüklenmek istenen javascript dosyası yolu yazılmalıdır.

Not:Harici bir script dosyası çağrıldığında, harici script çalışacağı için script etiketleri arasına yazılacak kodlar çalışmayacaktır.

Kullanım:


<script src="ornek-dosya.js"><script>


<script src="ornek-dosya">
/*harici dosya çağrıldığı için bu arada yazılanlar çalışmaz*/
</script>

/*harici dosya çağrıldığı için bu arada yazılanlar çalışmaz*/

</script>

JavaScript’teYorum Satırı/Satırları

JavaScript programlama dilinde diğer C tabanlı dillerde olduğu gibi tek satırlık yorum yapılacaksa // işaretlerinden sonra tek satır yorum yapılabilir. Birden fazla satır yorum olarak yapılacaksa /* */ sembolleri arasında istenilen satır kadar yorum bırakılabilir.


// bu tek satırlık bir yorumdur.

// bu tek satırlık bir yorumdur.


/*
bu yorum birden fazla satırda yorumlanmıştır.
bu kısım sadece programcı için açıklama satırından ibarettir.
program tarafından çalıştırılmamaktadır.
*/

bu yorum birden fazla satırda yorumlanmıştır.

bu kısım sadece programcı için açıklama satırından ibarettir.

program tarafından çalıştırılmamaktadır.

JavaScript Dosyaları HTML içinde Nereye Yazılır?

Yaygın kullanım head etiketleri arasına yazılmasını önermesine rağmen, javascript kodları sayfanın yüklenmesini yavaşlatacağı için genellikle </body>(body kapanış) etiketinden hemen önce yazılması şiddetle tavsiye edilir. Eğer sayfa yüklenmeden önce yüklenmesi gereken script kodları mevcut ise tabiki head etiketleri arasına da yazılabilir.

Günümüzde yüklenme hatalarını önlemek için <script> etiketine async ve defer niteliklerini ekleyebilirsiniz.

async: sayfa yada istenilen script dosyası sonradan yüklenirse çalıştırılmasını sağlar.(harici dosyalar için geçerli)

defer: script head etiketi arasına yazılmasına rağmen sayfa yüklendikten sonra script dosyasının yüklenmesini sağlamak için kullanılır.(harici dosyalar için geçerli)

Kullanım:


......
......
<script src="ornek-dosya.js"><script>
</body>
</html>

......

</body>

</html>

async Kullanımı:


<script src="ornek-dosya.js" async><script>

defer Kullanımı:


<script src="ornek-dosya.js" defer><script>

JavaScript Temel Kavramlar

Değişkenler

Değişken Tanımı

Değişkenin tanımını yaparak konuya başlayalım. Değişken, programın çalışması için gerekli verilerin tanımlanarak, bellek üzerinde tutulduğu bölgelere verilen isimlerdir.

Bellek hücrelerini birerli yada bir kaçının bir araya gelerek oluşturdukları grupları kutuya benzetirsek kutunun üzerindeki değişken adı, kutunun içindeki de değişkenin içindeki değer olarak düşünebiliriz.

Yukarıdaki şekilde olduğu gibi kutu değişken adını, içerisindeki değer ise kutunun tuttuğu veriyi ifade etmektedir.

JavaScript Veri Tipleri

JavaScriptte 6 temel veri tipi vardır. JavaScript değişken tanımlama yapıldığında bu tiplerden biri olarak değişken tanımlanmış olur.

Boolean: Mantıksal varlığı ifade eder. İki tip değer içerebilir true ve false
Null: Tam olarak null değerini taşıyan veri türüdür.
Undefined: Değişken tanımlanmış ama değer atanmamış ise değişken içindeki değer undefined dir
Number: EcmaScript standartlarına göre 64bit işaretli tek sayı tipi vardır. Tam yada ondalıklı sayılar number tipi ile ifade edilmektedir. Ek olarak +Infinity, -Infinity, and NaN (not-a-number) olmak üzere 3 tane özel sembolik değer vardır.
String: JavaScript dizge üzerinde metinsel verileri temsil etmek için kullandığı veri tipidir. Dizgedeki her öğe 16 bitlik işaretsiz integer bir referansı vardır. Dizgedeki ilk elemanın index numarası 0 dır. Dizgedeki diğer değerler için index numarası 1 artarak devam eder. Özetle: Metinsel bir ifade karakterlerden oluşan bir dizi olarak nitelendirilir.
Symbol ( ECMAScript 6): EcmaScript 6 standartı ile tanımlanmış bir tipdir. Nesne değeri için benzersiz ve sabit bir değeri ifade eder.
Object: Bellekteki belirli bir nesnenin referansını(yolunu) tutmak için kullanılan tiptir. Dizi, Fonksiyon ve Nesneler bu tip ile ifade edilir.

JavaScript Değişken Tanımlama

JavaScript’te değişkenler var anahtar kelimesi ile tanımlanır. Tüm veri türleri için var ifadesi ile değişken tanımlaması yapılır. JavaScript ile değişken tanımlarken bilinmesi gereken bazı temel kurallar var.

Değişken kullanılmadan önce tanımlanmış olması gerekir.
Bir değişken bir kapsam içinde tanımlanmış ise sadece o kapsam içinde kullanılabilir. Tanımlandığı aralıkta kullanılabilir.
Bir değişken tanımlayıcı (var) kullanılmadan değer atanmış ise bu değişken global olarak tanımlanır ve her yerden ulaşılabilir.

Kural:


var degisken;
var degisken1="deneme";
var degisken2, degisken3, degisken4=15;

var degisken;

var degisken1="deneme";

var degisken2, degisken3, degisken4=15;

Değişken Tanımlama Kuralları

Değişken isimleri büyük-küçük harf duyarlıdır. Yani ad ile AD aynı değişkeni göstermez.
Değişken isimlerinde Türkçeye özgü karakterler kullanılmamalıdır.
Değişken isimleri ?,!,:,%,- gibi özel karakterler içeremez.(_ karakteri hariç)
Değişken ismi olarak JavaScript dilindeki özel kelimeler seçilemez.
Değişken isimlerinde zorunlu olmamasına karşın küçük harf kullanımı tercih edilir. Eğer değişken ismi iki ya da daha fazla kelimeden oluşuyorsa ilk kelime hariç diğer kelimelerin ilk harfi büyük yazılır. (sayi, maasMiktari, kitapSayisi v.b.)
Değişken isimleri sayı ile başlayamaz.

Örnek:


var sayi=5;
var x, y=8, z;
var aktif = true; 
var ondalikli= 5.4;
var deger="merhaba";

var sayi=5;

var x, y=8, z;

var aktif = true;

var ondalikli= 5.4;

var deger="merhaba";

JavaScript typeof Operatörünün Kullanımı

typeof operatörü belirtilen değişkenin yada değerin veri tipini dizge olarak döndürür. Aşağıdaki tabloda tiplerin typeof operatörü ile döndürdüğü sonuç görünmektedir.

Tip	Sonuç
Undefined	“undefined”
Null	“object”
Boolean	“boolean”
Number	“number”
String	“string”
Symbol	“symbol”
Function	“function”
Diğer Tüm Nesneler	“object”

Örnek:


//Sayılar
typeof 37 === 'number';
typeof 3.14 === 'number';
typeof(42) === 'number';
typeof Math.LN2 === 'number';
typeof Infinity === 'number';
typeof NaN === 'number'; // "Not-A-Number"
typeof Number(1) === 'number';
//String
typeof "" === 'string';
typeof "bla" === 'string';
typeof String("abc") === 'string';
//Boolean
typeof true === 'boolean';
typeof false === 'boolean';
typeof Boolean(true) === 'boolean';
//Semboller
typeof Symbol() === 'symbol'
typeof Symbol('foo') === 'symbol'
typeof Symbol.iterator === 'symbol'
// Undefined
typeof undefined === 'undefined';
typeof tanimlanmisKullanilmamisDegisken=== 'undefined';
typeof tanimlanmamisDegisken=== 'undefined';
//Nesneler
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object';
typeof new Date() === 'object';
typeof new Boolean(true) === 'object'; 
typeof new Number(1) === 'object'; 
typeof new String("abc") === 'object';
//Fonksiyonlar
typeof function(){} === 'function';
typeof class C {} === 'function';
typeof Math.sin === 'function';

//Sayılar

typeof 37 === 'number';

typeof 3.14 === 'number';

typeof(42) === 'number';

typeof Math.LN2 === 'number';

typeof Infinity === 'number';

typeof NaN === 'number'; // "Not-A-Number"

typeof Number(1) === 'number';

//String

typeof "" === 'string';

typeof "bla" === 'string';

typeof String("abc") === 'string';

//Boolean

typeof true === 'boolean';

typeof false === 'boolean';

typeof Boolean(true) === 'boolean';

//Semboller

typeof Symbol() === 'symbol'

typeof Symbol('foo') === 'symbol'

typeof Symbol.iterator === 'symbol'

// Undefined

typeof undefined === 'undefined';

typeof tanimlanmisKullanilmamisDegisken=== 'undefined';

typeof tanimlanmamisDegisken=== 'undefined';

//Nesneler

typeof {a:1} === 'object';

typeof [1, 2, 4] === 'object';

typeof new Date() === 'object';

typeof new Boolean(true) === 'object';

typeof new Number(1) === 'object';

typeof new String("abc") === 'object';

//Fonksiyonlar

typeof function(){} === 'function';

typeof class C {} === 'function';

typeof Math.sin === 'function';

Tür Dönüşümü

JavaScript ile bir değişken tipten bağımsız olarak tanımlanır. Fakat değer ataması yapılırken değerin türüne göre değişkenin tipi dinamik olarak belirlenir. Bu durum javascript dilinin değişken ile veri arasında gevşek bir bağa sahip olduğu anlamına gelir. İlk değer ataması yaparken, elle giriyorsak bu sorun oluşturmayacaktır. Ancak değer bir fonksiyon, json yada farklı bir nesneden geliyorsa bunu kontrol edip ona göre işlemden geçirmek büyük önem oluşturur.

Bu durumu bir örnekle belirtelim. JavaScript ile birleştirme ve toplama için + (artı) sembolü kullanılır. Eğer “5” +”10″ gibi bir işlemi matematiksel olarak yapmak istiyorsak değerleri string olmaktan çıkarıp number türüne dönüştürmek gerekir. Aksi durumda sonuç:15 yerine sonuç:510 şeklinde oluşacaktır.

Javascript değişkenler konusunu anlatırken, javascript dilinde kullanılan türlerin listesini açıklamaları ile belirtmiştim. Bu açıklamadan sonra javascript tür dönüşümünü sağlamak için aşağıdaki fonksiyonları kullanarak istediğimiz türlerde dönüşüm sağlayabiliriz.

String Türüne Dönüştürme

Bir değeri string türüne dönüştürmek için aşağıdaki iki fonksiyondan birini kullanabiliriz.

deger.toString()
String(deger)

Örn:


var sayi=125;              // typeof deger -> number
var metin=sayi.toString();  // typeof metin --> string
var durum=false;
var metin2 =String(durum);

var sayi=125; // typeof deger -> number

var metin=sayi.toString(); // typeof metin --> string

var durum=false;

var metin2 =String(durum);

Sayı Türüne Dönüştürme

Aşağıdaki metodlar ile sayı türüne dönüştürebiliriz. En sık kullanılan dönüşüm fonksiyonlarından biridir. json, input yada prompt nesnelerinden okunan değerler string türünde olduğu için sayısal işlem yapılacaksa aşağıdaki fonksiyonlar ile dönüşüm yapılması gerekiyor.

Not: Tür dönüşümü sırasında sayısal değere dönüştürülmeyen değerler için NaN özel sembolik değeri oluşturulur.

Örn: “10A” değeri sayısal değere dönüştürülmek istendiğinde NaN özel değeri oluşturulacaktır.

Number(deger)
parseInt(deger)
parseFloat(deger)

Örn: iki kenarı girilen dikdörtgenin çevresini hesaplama


<input type="text" id="kenar1" placeholder="Kısa kenar">
<input type="text" id="kenar2" placeholder="Uzun kenar">
<input type="button" value="Hesapla" id="hesapla">
<script>
function hesapla(){
var k1=document.getElementById("kenar1").value;
var k2=document.getElementById("kenar2").value;
k1=Number(k1);
k2=Number(k2);
var cevre=(k1+k2)*2;
alert("İki kenarı girilen dikdörtgenin çevresi:"+cevre);
}
//hesaplama yapması için hesap butonunu seçiyoruz.
var hesapBtn=document.getElementById("hesapla");
//fonksiyonu olaya bağlıyoruz.
hesapBtn.onclick=hesapla;
</script>

function hesapla(){

var k1=document.getElementById("kenar1").value;

var k2=document.getElementById("kenar2").value;

k1=Number(k1);

k2=Number(k2);

var cevre=(k1+k2)*2;

alert("İki kenarı girilen dikdörtgenin çevresi:"+cevre);

}

//hesaplama yapması için hesap butonunu seçiyoruz.

var hesapBtn=document.getElementById("hesapla");

//fonksiyonu olaya bağlıyoruz.

hesapBtn.onclick=hesapla;

</script>

Boolean Türüne Dönüştürme

Boolean fonsiyonu ile true/false değerlerine dönüşüm yapılabilir.

Boolean(deger)

Kapsam

Javascript ile nesnelere, fonksiyonlar ve değişkenlere nasıl ve nerelerden ulaşma yetkinizin olduğunu örneklerle açıklayalım.

Yerel JavaScript değişkenleri:Yerel olarak tanımlanmış javascript değişkeni sadece oluşturulduğu alanda tanınmaktadır.

Fonksiyon dışında bu isim değişkeni tanınmayacaktır.


function OrnekMetod(){
var isim="Algoritma";
}

function OrnekMetod(){

var isim="Algoritma";

}

Evrensel(Global) JavaScript değişkeni:Tüm script,fonksiyon ve web nesnelerinde ulaşılabilir.

Script içinde tanımlanmış olan isim değişkenine her yerden ulaşılabilir.


var isim="Algoritma";
function OrnekMetod(){
//örnek kodlar bu bölümde olabilir.
}

var isim="Algoritma";

function OrnekMetod(){

//örnek kodlar bu bölümde olabilir.

}

Otomatik Küresel değişken: Değişken evrensel olarak tanımlanmamıştır. Ancak fonksiyion yada nesne içinde sonradan tanımlandığında küresel olması için değişken adının yazılması yeterlidir.

Fonksiyon içinde tanımlanan isim tüm scriptler ve web içinde fonksyion kullanıldıktan sonra ulaşılabilir durumdadır.(Not: var ile bildirim yapılmadığına dikkat edilmeli)


function OrnekMetod(){
isim="Algoritma";
}

function OrnekMetod(){

isim="Algoritma";

}

Tanımlamalar ile ilgili örnekler

HTML örneklerinde açıklamalar yorum satırları içinde yapılmıştır. typeof metodu değişken tanımlanmışsa değişken tipini tanımlanmamışsa undefined tipini çevirmektedir.

Yerel JavaScript değişkeni örneği:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Kapsam</title>
</head>
<body>
<script>
function OrnekMetod(){
var isim="Algoritma";
//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.
alert("fonksiyon içi:" + typeof(isim) );
}
OrnekMetod();
//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.
alert("fonksiyon dışı:" + typeof(isim) );
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>JavaScript Kapsam</title>

</head>

<body>

function OrnekMetod(){

var isim="Algoritma";

//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.

alert("fonksiyon içi:" + typeof(isim) );

}

OrnekMetod();

//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.

alert("fonksiyon dışı:" + typeof(isim) );

</script>

</body>

</html>

Küresel JavaScript değişkeni örneği:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Kapsam</title>
</head>
<body>
<script>
var isim="Algoritma";
//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.
function OrnekMetod(){
alert("fonksiyon içi:" + typeof(isim) );
}
OrnekMetod();
//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.
alert("fonksiyon dışı:" + typeof(isim) );
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>JavaScript Kapsam</title>

</head>

<body>

var isim="Algoritma";

//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.

function OrnekMetod(){

alert("fonksiyon içi:" + typeof(isim) );

}

OrnekMetod();

//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.

alert("fonksiyon dışı:" + typeof(isim) );

</script>

</body>

</html>

Otomatik Küresel JavaScript değişkeni örneği:

isim değişkeni ilk kontrol edildiğinde tanımlanmadığı için undefined tipini döndürüyor. fonksyion kullanıldıktan sonra değişken fonksyion dışında tekrar çağrıldığında artık değişken global olarak tanımlanmış olduğu için string tipini getiriyor.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Kapsam</title>
</head>
<body>
<script>
alert("fonksiyon dışı 1:" + typeof(isim) );
function OrnekMetod(){
isim="Algoritma";
alert("fonksiyon içi:" + typeof(isim) );
}
OrnekMetod();
//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.
alert("fonksiyon dışı 2:" + typeof(isim) );
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>JavaScript Kapsam</title>

</head>

<body>

alert("fonksiyon dışı 1:" + typeof(isim) );

function OrnekMetod(){

isim="Algoritma";

alert("fonksiyon içi:" + typeof(isim) );

}

OrnekMetod();

//typeof metodu değişken tanımlamışsa tipini tanımlanmamışsa undefined değerini döndürür.

alert("fonksiyon dışı 2:" + typeof(isim) );

</script>

</body>

</html>

Aritmetik Operatörler

Aritmetik operatörler aldığı sayısal değeri operatör sembolüne göre işleyip geriye tek bir değer döndürürler. Standart aritmetik operatörler arttırma(+), eksiltme(-), çarpma(*), bölme(/) sembolleridir.

Standart aritmetik operatörlere (+, -, * /) ek olarak, JavaScript’te aşağıdaki tabloda listelenen aritmetik operatörlerde mevcuttur.

Aritmetik Operatörler

Operatör	Tanımı
Kalan(%)	İkili bölme işlemindeki tamsayılı bölmede kalan değeri getirir.
Arttırma(++)	Belirtilen değeri bir arttırmak için kullanılır.
Azaltma(–)	Belirtilen değeri bir azaltmak için kullanılır.
Toplama (+)	Belirtilen değerleri toplar. Farklı tipte değerler ise toplama için otomatik tür dönüşümü yapar.
Fark (-)	Önüne eklendiği sayısal değerin tersini alır. İki değeri bir birinden çıkarmak içinde bu operatör kullanılır.
*Çarpma ()**	Matematiksel çarpma işlemi yapar.
Bölme (/)	Matematiksel bölme işlemi yapar.
Üsalma ()**	Üsalma işlemi için tanımlanmış operatör. (Örn: 23** sonuç:8) EcmaScript 7’de stardart olacak

JavaScript Toplama Operatörü(+)

Kural:

x+y

x+y

Örnek


// Number + Number -> toplar
1 + 2 // 3
// Boolean + Number -> toplar
true + 1 // 2
// Boolean + Boolean -> toplar
false + false // 0
// Number + String -> birleştirir
5 + "foo" // "5foo"
// String + Boolean -> birleştirir
"foo" + false // "foofalse"
// String + String -> birleştirir
"foo" + "bar" // "foobar"

// Number + Number -> toplar

1 + 2 // 3

// Boolean + Number -> toplar

true + 1 // 2

// Boolean + Boolean -> toplar

false + false // 0

// Number + String -> birleştirir

5 + "foo" // "5foo"

// String + Boolean -> birleştirir

"foo" + false // "foofalse"

// String + String -> birleştirir

"foo" + "bar" // "foobar"

JavaScript Çıkarma Operatörü (-)

Kural:

x-y

x-y

Örnek:


5 - 3 // 2
3 - 5 // -2
"foo" - 3 // NaN

5 - 3 // 2

3 - 5 // -2

"foo" - 3 // NaN

JavaScript Bölme Operatörü (/)

Kural:

x/y

x/y

Örnek:


1 / 2 // 0.5
1.0 / 2.0 // 0.5
2.0 / 0 // Infinity
2.0 / 0.0 // Infinity
2.0 / -0.0 // -Infinity

1 / 2 // 0.5

1.0 / 2.0 // 0.5

2.0 / 0 // Infinity

2.0 / 0.0 // Infinity

2.0 / -0.0 // -Infinity

JavaScript Çarpma Operatörü (*)

Kural:

x*y

x*y

Örnek:


2 * 2 // 4
-2 * 2 // -4
Infinity * 0 // NaN
Infinity * Infinity // Infinity
"foo" * 2 // NaN

2 * 2 // 4

-2 * 2 // -4

Infinity * 0 // NaN

Infinity * Infinity // Infinity

"foo" * 2 // NaN

JavaScript Kalan Operatörü (%)

Kural:

x%y

x%y

Örnek:


12 % 5 // 2
-1 % 2 // -1
NaN % 2 // NaN
1 % 2 // 1
2 % 3 // 2
-4 % 2 // -0
5.5 % 2 // 1.5

12 % 5 // 2

-1 % 2 // -1

NaN % 2 // NaN

1 % 2 // 1

2 % 3 // 2

-4 % 2 // -0

5.5 % 2 // 1.5

JavaScript Artırma Operatörü (++)

Kural:


x++ yada ++x

x++ yada ++x

Örnek:


// Sonuna yazma 
var x = 3;
y = x++; // y = 3, x = 4
// Önüne yazma
var a = 2;
b = ++a; // a = 3, b = 3

// Sonuna yazma

var x = 3;

y = x++; // y = 3, x = 4

// Önüne yazma

var a = 2;

b = ++a; // a = 3, b = 3

JavaScript Azaltma Operatörü (–)

Kural:


x-- yada --x

x-- yada --x

Örnek:


// Sonuna yazma 
var x = 3;
y = x--; // y = 3, x = 2
// Önüne yazma
var a = 2;
b = --a; // a = 1, b = 1

// Sonuna yazma

var x = 3;

y = x--; // y = 3, x = 2

// Önüne yazma

var a = 2;

b = --a; // a = 1, b = 1

JavaScript Üsalma Operatörü (**)

Kural:


x**y

x**y

Örnek:


2 ** 3 // 8
3 ** 2 // 9
3 ** 2.5 // 15.588457268119896
10 ** -1 // 0.1
NaN ** 2 // NaN
2 ** 3 ** 2 // 512
2 ** (3 ** 2) // 512
(2 ** 3) ** 2 // 64

2 ** 3 // 8

3 ** 2 // 9

3 ** 2.5 // 15.588457268119896

10 ** -1 // 0.1

NaN ** 2 // NaN

2 ** 3 ** 2 // 512

2 ** (3 ** 2) // 512

(2 ** 3) ** 2 // 64

JavaScript Olumsuzlama Operatörü (-)

Kural:

-x

-x

Örnek:


var x = 3;
y = -x; // y = -3, x = 3

var x = 3;

y = -x; // y = -3, x = 3

JavaScript Tekil Artı Operatörü (+): bir değişkeni kolay yoldan sayısal değere dönüştürmek için kullanılır.

Kural:

+x

Örnek:


+3 // 3
+"3" // 3
+true // 1
+false // 0
+null // 0
+function(val){ return val } // NaN

+3 // 3

+"3" // 3

+true // 1

+false // 0

+null // 0

+function(val){ return val } // NaN

Kaynak:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation

Karşılaştırma Operatörleri

Karşılaştırma operatörleri, değişkenler veya değerler arasındaki eşitliği veya farkı saptamak için mantıksal işlemlerde kullanılır.

Eşitlik Operatörü(==)

JavaScript dilinin çalışma anında tür dönüşümü yapabilme özelliği vardır. Eşitlik operatörü ile eşitliğin iki tarafındaki değer türden bağımsız olarak aynı ise sonuç true değilse false olarak dönmektedir.


1 == 1 // true
"1" == 1 // true
1 == '1' // true
0 == false // true
0 == null // false

1 == 1 // true

"1" == 1 // true

1 == '1' // true

0 == false // true

0 == null // false

Örnek:


<script>
var a=3;
if(a==3){
alert("Sonuç Doğru");
}else{
alert("Sonuç Yanlış");
}
</script>

var a=3;

if(a==3){

alert("Sonuç Doğru");

}else{

alert("Sonuç Yanlış");

}

</script>

Örnek:


<script>
var a=3;
if(a=="3"){
alert("Sonuç Doğru");
}
<script>

var a=3;

if(a=="3"){

alert("Sonuç Doğru");

}

Örnek:


<script>
var a=3;
if(a==7){
alert("Sonuç Doğru");
}else{
alert("Sonuç Yanlış");
}
<script>

var a=3;

if(a==7){

alert("Sonuç Doğru");

}else{

alert("Sonuç Yanlış");

}

Eşitsizlik Operatörü(!=)

Karşılaştırması yapılan iki değer yada değişken arasında türden bağımsız olarak bir birinden farklı ise true değilse bir biri ile aynı ise false dönmektedir.


1 != 2 // true
1 != "1" // false
1 != '1' // false
1 != true // false
0 != false // false

1 != 2 // true

1 != "1" // false

1 != '1' // false

1 != true // false

0 != false // false

Örnek:


<script>
var a=3;
var b=5;
if(a!=7){
alert("a b değişkeninden farklıdır.");
}
<script>

var a=3;

var b=5;

if(a!=7){

alert("a b değişkeninden farklıdır.");

}

Tam Eşitlik Operatörü(===)

Karşılaştırması yapılan iki değer yada değişken hem tür hemde değer olarak bir biri ile aynı ise karşılaştırma sonucu true, tür yada değerlerden biri farklı ise false olarak dönmektedir.


3 === 3 // true
3 === '3' // false

3 === 3 // true

3 === '3' // false

Örnek:


<script>
var a=3;
var b="3";
if(a!=7){
alert("iki değişken tür ve değer olarak eşittir.");
}
else
{
alert("iki değişken tür ve değer olarak farklıdır.");
}
<script>

var a=3;

var b="3";

if(a!=7){

alert("iki değişken tür ve değer olarak eşittir.");

}

else

{

alert("iki değişken tür ve değer olarak farklıdır.");

}

Tam Eşitsizlik Operatörü (!==)

Karşılaştırılan veri hem tür hemde değer bakımından bir birinden farklı ise true, iki değerde hem tür hemde değer olarak eşitse false olarak dönmektedir.


3 !== '3' // true
4 !== 3 // true

3 !== '3' // true

4 !== 3 // true

Örnek:


<script>
var a=3;
var b=3;
if(a!=7){
alert("iki değişken tür ve değer olarak eşittir.");
}
else
{
alert("iki değişken tür ve değer olarak farklıdır.");
}
<script>

var a=3;

var b=3;

if(a!=7){

alert("iki değişken tür ve değer olarak eşittir.");

}

else

{

alert("iki değişken tür ve değer olarak farklıdır.");

}

Büyüktür Operatörü ( > )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden büyükse true, ikinci değer büyük yada eşitse false sonucunu üretmektedir.


4 > 3 // true

4 > 3 // true

Büyük Eşittir Operatörü ( >= )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden büyük yada eşitse true, ikinci değer büyükse false sonucunu üretmektedir.


4 >= 3 // true
3 >= 3 // true

4 >= 3 // true

3 >= 3 // true

Küçüktür Operatörü ( < )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden küçükse true, ikinci değer küçük yada eşitse false sonucunu üretmektedir.


3 < 4 // true

3 < 4 // true

Küçük Eşittir Operatörü ( <= )

Karşılaştırması yapılan iki değerden ilk değer ikinci değerden küçük yada eşitse true, ikinci değer küçükse false sonucunu üretmektedir.


3 <= 4 // true

3 <= 4 // true

Örnek Karşılaştırma Tablosu:

a=3 olduğunu varsayarak aşağıdaki karşılaştırma operatörleri ve karşılaştırma sonuçlarını gösterilmektedir.

==	Eşitlik	x == 8	false
x == 3	true
x == “3”	true
===	Tam eşitlik (değer ve tür eşitliği)	x === 3	true
x === “3”	false
!=	Eşitsizlik	x != 8	true
!==	Tam eşitsizlik (değer ve tür)	x !== 3	false
x !== “3”	true
x !== 8	true
>	Büyüktür	x > 10	false
<	Küçüktür	x < 10	true
>=	Büyük eşittir	x >= 10	false
<=	Küçük eşittir	x <= 10	true

Kaynak:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

http://www.w3schools.com/js/js_comparisons.asp

Mantıksal Operatörler

Mantıksal operatörler genellikle boolean değerleri ile kullanılır. Bu yüzden boolean türünde değer döndürür.

Operatör	Kullanımı	Tanımı
Lojik VE ( && )	ifade1 && ifade2	İfade1 true değerine döndürülebiliyorsa ifade1, değilse ifade2 değerini döndürür.
Lojik VEYA ( \|\| )	ifade1 \|\| ifade2	ifade1 true değerine çevrilebiliyorsa ifade1, değilse ifade1 değerini döndürür.
Lojik DEĞİL ( ! )	!ifade	ifade true ise false, false ise true değerini döndürür.

JavaScriptte bir değer true olarak dönüştürülebilirse mantıksal işlemlerde true olarak kullanılır.

Aşağıdaki ifadeler mantıksal olarak dönüştürülürken false olarak dönüştürülmektedir.

null;
NaN;
0;
empty string (“”);
undefined

JavaScript Mantıksal Ve Operatörü


a1 = true && true   // t && t dönen değer true
a2 = true && false  // t && f dönen değer false
a3 = false && true  // f && t dönen değer false
a4 = false && (3 == 4) // f && f dönen değer false
a5 = "Kedi" && "Köpek"    // t && t dönen değer "Köpek"
a6 = false && "Kedi"    // f && t dönen değer false
a7 = "Kedi" && false    // t && f dönen değer false
a8 = "" && false       // dönen değer ""

a1 = true && true // t && t dönen değer true

a2 = true && false // t && f dönen değer false

a3 = false && true // f && t dönen değer false

a4 = false && (3 == 4) // f && f dönen değer false

a5 = "Kedi" && "Köpek" // t && t dönen değer "Köpek"

a6 = false && "Kedi" // f && t dönen değer false

a7 = "Kedi" && false // t && f dönen değer false

a8 = "" && false // dönen değer ""

JavaScript Mantıksal Veya Operatörü


o1 = true || true // t || t dönen değer true
o2 = false || true // f || t dönen değer true
o3 = true || false // t || f dönen değer true
o4 = false || (3 == 4) // f || f dönen değer false
o5 = "Kedi" || "Köpek" // t || t dönen değer "Kedi"
o6 = false || "Kedi" // f || t dönen değer "Kedi"
o7 = "Kedi" || false // t || f dönen değer "Kedi"
o8 = "" || false // dönen değer false
o9 = false || "" // dönen değer ""

o1 = true || true // t || t dönen değer true

o2 = false || true // f || t dönen değer true

o3 = true || false // t || f dönen değer true

o4 = false || (3 == 4) // f || f dönen değer false

o5 = "Kedi" || "Köpek" // t || t dönen değer "Kedi"

o6 = false || "Kedi" // f || t dönen değer "Kedi"

o7 = "Kedi" || false // t || f dönen değer "Kedi"

o8 = "" || false // dönen değer false

o9 = false || "" // dönen değer ""

JavaScript Mantıksal Değil Operatörü


n1 = !true // !t  dönen değeri false
n2 = !false // !f dönen değer true
n3 = !"Kedi" // !t dönen değer false

n1 = !true // !t dönen değeri false

n2 = !false // !f dönen değer true

n3 = !"Kedi" // !t dönen değer false

İşlem Önceliği

JavaScript Operatörlerin işlem öncelik sırası aşağıdaki listede sıralandığı gibidir. Eşit önceliğe sahip operatörlerde işleme sırası, “işleme yönünde belirtilen şekildedir.

Öncelik	Operatör tipi	İşleme yönü	Operatör(ler)
1	üye elemanlara erişme	soldan sağa	`.`
`[]`
nesne oluşturma	sağdan sola	`new`
2	fonksiyon çağrısı	soldan sağa	`()`
3	bir arttırma	mümkün değil	`++`
bir azaltma	mümkün değil	`--`
4	mantıksal değil	sağdan sola	`!`
bitsel değil	sağdan sola	`~`
tek operandlı +	sağdan sola	`+`
işaret değiştirme	sağdan sola	`-`
typeof	sağdan sola	`typeof`
void	sağdan sola	`void`
delete	sağdan sola	`delete`
5	çarpma	soldan sağa	`*`
bölme	soldan sağa	`/`
mod alma	soldan sağa	`%`
6	toplama	soldan sağa	`+`
çıkarma	soldan sağa	`-`
7	bitsel kaydırma	soldan sağa	<<
`>>`
`>>>`
8	büyüklük-küçüklük karşılaştırması	soldan sağa	`<`
`<=`
`>`
`>=`
in	soldan sağa	`in`
instanceof	soldan sağa	`instanceof`
9	eşitlik karşılaştırması	soldan sağa	`==`
`!=`
`===`
`!==`
10	bitsel ve	soldan sağa	`&`
11	bitsel xor	soldan sağa	`^`
12	bitsel veya	soldan sağa	`\|`
13	mantıksal ve	soldan sağa	`&&`
14	mantıksal veya	soldan sağa	`\|\|`
15	koşul	sağdan sola	`?:`
16	atama	sağdan sola	`=`
`+=`
`-=`
`*=`
`/=`
`%=`
`<<=`
`>>=`
`>>>=`
`&=`
`^=`
`\|=`
17	virgül	soldan sağa	`,`

Kaynak:

https://tr.wikibooks.org/wiki/JavaScript/Operat%C3%B6rler

JavaScript Koşullar ve Döngüler

if else Kullanımı

Bütün programlama dillerinde olduğu gibi JavaScript dilinde de en çok kullanılan karar ifadelerinden biridir. if parantezi arasındaki koşul doğru ise ifade çalıştırılır. Koşul sağlamıyorsa else kısmı varsa bu kısımdaki ifade çalıştırılır.

Kullanımı 1:


if(şart)
{
//çalıştırılacak ifade;
}

if(şart)

{

//çalıştırılacak ifade;

}

Örnek:Yaşı 18den büyükse ehliyet alabilirsiniz yazdıran uygulamayı yapın.


var yas=20;
if(yas>=18)
{
alert("ehliyet alabilirsiniz");
}

var yas=20;

if(yas>=18)

{

alert("ehliyet alabilirsiniz");

}

Kullanım 2:


if(şart)
{
//şart doğru ise çalıştırılacak ifade;
}
else
{
//şart doğru değilse çalıştırılacak ifade;
}

if(şart)

{

//şart doğru ise çalıştırılacak ifade;

}

else

{

//şart doğru değilse çalıştırılacak ifade;

}

Örnek:Yaşı 18den büyükse ehliyet alabilirsiniz, değilse yaşınız ehliyet alamak için uygun değil ve kalan yılı yazdıran uygulamayı yapın.


var yas=10;
if(yas>=18)
{
alert("ehliyet alabilirsiniz");
}
else
{
alert(yaşınız ehliyet almak için uygun değil);
alert(18-yas+" kadar yıl sonra ehliyet alabilirsiniz");
}

var yas=10;

if(yas>=18)

{

alert("ehliyet alabilirsiniz");

}

else

{

alert(yaşınız ehliyet almak için uygun değil);

alert(18-yas+" kadar yıl sonra ehliyet alabilirsiniz");

}

Kullanım 3:


if(şart1)
{
//şart1 doğru ise çalıştırılacak ifade;
}
else if(şart2)
{
//şart2 doğru ise çalıştırılacak ifade;
}
else
{
//şart2 de doğru değilse çalıştırılacak ifade;
}

if(şart1)

{

//şart1 doğru ise çalıştırılacak ifade;

}

else if(şart2)

{

//şart2 doğru ise çalıştırılacak ifade;

}

else

{

//şart2 de doğru değilse çalıştırılacak ifade;

}

Örnek:Girilen değer 100,0 ve negatif aralığındaysa ayrı ayrı uyarı verdiren uygulamayı yapınız.


var x=5;
if (x > 100) {
alert("x değeri 100den büyüktür");
} else if (x > 0) {
alert("x değeri 0dan büyüktür.");
} else {
alert("x negatif bir sayıdır");
}

var x=5;

if (x > 100) {

alert("x değeri 100den büyüktür");

} else if (x > 0) {

alert("x değeri 0dan büyüktür.");

} else {

alert("x negatif bir sayıdır");

}

Kullanım 4:


if (şart1)
{
//ifade 1
}
else if (şart2)
{
//ifade 2
}
else if (şart3)
{
//ifade 3
}
...
else
{
//ifadeN
}

if (şart1)

{

//ifade 1

}

else if (şart2)

{

//ifade 2

}

else if (şart3)

{

//ifade 3

}

...

else

{

//ifadeN

}

Örnek: 100lük sistemdeki notu 5lik sisteme çeviren uygulamayı yapınız.

Ternary Operatör Kullanımı

Üç işlemli tek operatördür. Koşul deyiminin kısaltması olarak da kullanılır. JavaScript Ternary If deyiminin kısaltması olarak kullanılabilir.

Yazım Kuraluı:


Koşul ? ifade1 : ifade2

Koşul ? ifade1 : ifade2

Parametreler:

Koşul: true yada false olarak değerlendirilecek ifade

ifade1,ifade2: her hangi bir türde değer

Tanım:

Eğer koşul doğru ise operatör ifade1 değerini döndürür, aksi takdirde ifade2 değerini döndürür.

Ternary Operatör Örnekleri

Örnek 1: ternary operatör ile elde edilen sonucu bir değişkene aktarma


var degisken = Math.PI > 4 ? "Hımmm" : "Acaba";

var degisken = Math.PI > 4 ? "Hımmm" : "Acaba";

Örnek 2: ternary ile üretilen bir değeri doğrudan sonuç olarak kullanabilirsiniz. durum değişkenin değerine göre ödenecek tutarın değişmesi


"Toplam borcunuz:" + (durum ? "75₺" : "10₺")

"Toplam borcunuz:" + (durum ? "75₺" : "10₺")

Örnek 3: Ternary operatörü çoklu olarak kullanabilirsiniz.


var ilkKontrol= false, ikinciKontrol= false;
var girisBilgi = ilkKontrol? "Giriş Reddedildi" : ikinciKontrol? "Giriş Reddedildi" : "Giriş Yapıldı";
alert( girisBilgi ); //Giriş Yapıldı

var ilkKontrol= false, ikinciKontrol= false;

var girisBilgi = ilkKontrol? "Giriş Reddedildi" : ikinciKontrol? "Giriş Reddedildi" : "Giriş Yapıldı";

alert( girisBilgi ); //Giriş Yapıldı

Örnek 4: Her durum için parantez ve virgül ile birden fazla işlem yürütebilirsiniz.


var stop = false, yas= 23;
yas> 18 ? (
alert("Tebrikler Giriş Yapabilirsiniz"),
location.assign("islem.html")
) : (
stop = true,
alert("Üzgünüz!!! Giriş yapamazsınız.")
);

var stop = false, yas= 23;

yas> 18 ? (

alert("Tebrikler Giriş Yapabilirsiniz"),

location.assign("islem.html")

) : (

stop = true,

alert("Üzgünüz!!! Giriş yapamazsınız.")

);

Örnek 5: Farklı işlemler yapmak için yine ternary operatör kullanabilirsiniz.


var dur= false, yas= 16;
yas> 18 ? location.assign("devam.html") : dur= true;

var dur= false, yas= 16;

yas> 18 ? location.assign("devam.html") : dur= true;

Kaynak:

https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

switch Case Kullanımı

Switch ifadesi farklı koşullara bağlı olarak farklı eylemleri yürütmek için kullanılır. Switch kendine gelen ifadeyi değerlendirip, uygun olan case ile eşleştirir. Uygun olan case ile eşleşen ifade/ifadeler yürütülür.

Yazım Kuralı


switch (ifade) {
case deger1:
//ifade, deger1 ile eşleşirse yürütülecek olan kodlar.
case deger2:
//ifade, deger2 ile eşleşirse yürütülecek olan kodlar.
...
case degerN:
//ifade, degerN ile eşleşirse yürütülecek olan kodlar.
default:
//ifade, hiçbir değer ile eşleşmezse yürütülecek olan kodlar.
}

switch (ifade) {

case deger1:

//ifade, deger1 ile eşleşirse yürütülecek olan kodlar.

case deger2:

//ifade, deger2 ile eşleşirse yürütülecek olan kodlar.

...

case degerN:

//ifade, degerN ile eşleşirse yürütülecek olan kodlar.

default:

//ifade, hiçbir değer ile eşleşmezse yürütülecek olan kodlar.

}

ifade: case değerleri ile eşleştirilecek olan değer

case degerN: ifade ile eşleştirilecek olan kelime/değer

Tanım:
ifade, case değerleri ile eşleştirilecek olan durumu göstermektedir. Eğer ifade case değerlerinden biri ile eşleşirse, eşleşen değerden break; komutuna kadar olan tüm kodlar çalıştırılır.

Şartlardan sonra break komutu kullanılmazsa program aşağı doğru her case kodunu çalıştırır. Break kullanımı unutulmaması gerek önemli bir noktadır.

Örnek 1:new Date().getDay() metodu 0-6 arasında değer üretir. 0->pazar 6->cumartesi gününü göstermektedir.


switch (new Date().getDay()) {
case 0:
day = "PAZAR";
break;
case 1:
day = "PAZARTESİ";
break;
case 2:
day = "SALI";
break;
case 3:
day = "ÇARŞAMBA";
break;
case 4:
day = "PERŞEMBE";
break;
case 5:
day = "CUMA";
break;
case 6:
day = "CUMARTESİ";
}

switch (new Date().getDay()) {

case 0:

day = "PAZAR";

break;

case 1:

day = "PAZARTESİ";

break;

case 2:

day = "SALI";

break;

case 3:

day = "ÇARŞAMBA";

break;

case 4:

day = "PERŞEMBE";

break;

case 5:

day = "CUMA";

break;

case 6:

day = "CUMARTESİ";

}

Örnek 2:


<input id="bilgi" type="text" value="Karpuz">
<button onclick="kontrol()">Meyve Kontrol Et</button>
<p id="goster"></p>
<script>
function kontrol() {
var yazi;
var meyve = document.getElementById("bilgi").value;
switch(meyve) {
case "Karpuz"
yazi = "Karpuz Güzeldir!";
case "Armut"
yazi = "Armutu pek sevmem";
case "Kiraz"
yazi = "Mevsimi kısa ama tatlı bir meyvedir kiraz";
default
yazi = "Üzgünüm! Yazdığın meyveyi tanımıyorum";
}
document.getElementById("goster").innerHTML = yazi;
}
</script>

<button onclick="kontrol()">Meyve Kontrol Et</button>

function kontrol() {

var yazi;

var meyve = document.getElementById("bilgi").value;

switch(meyve) {

case "Karpuz"

yazi = "Karpuz Güzeldir!";

case "Armut"

yazi = "Armutu pek sevmem";

case "Kiraz"

yazi = "Mevsimi kısa ama tatlı bir meyvedir kiraz";

default

yazi = "Üzgünüm! Yazdığın meyveyi tanımıyorum";

}

document.getElementById("goster").innerHTML = yazi;

}

</script>

Örnek 3: break yazmayı unutunca oluşacak hata ile ilgili örnek


<script>
var deger = 0;
switch (deger) {
case -1:
alert("-1 negatiftir.")
break;
case 0: // deger 0 olduğu için bu bölüm çalışacaktır.
alert(0);
// NOT: break yazmayı unuttuk.
case 1: // break yazılmadığı için case 0 değeri için bu kısımda çalıştırılacaktır.
alert(1);
break; // break yazdıldığı için case 2 değeri çalıştırılmayacaktır.
case 2:
alert(2);
break;
default:
alert("default");
}
</script>

var deger = 0;

switch (deger) {

case -1:

alert("-1 negatiftir.")

break;

case 0: // deger 0 olduğu için bu bölüm çalışacaktır.

alert(0);

// NOT: break yazmayı unuttuk.

case 1: // break yazılmadığı için case 0 değeri için bu kısımda çalıştırılacaktır.

alert(1);

break; // break yazdıldığı için case 2 değeri çalıştırılmayacaktır.

case 2:

alert(2);

break;

default:

alert("default");

}

</script>

Örnek 4: Tek bir işlem için çoklu case kullanabilirsiniz.


<script>
var meyve = 'Kivi';
switch (meyve) {
case 'Elma':
case 'Ayva':
case 'Kivi':
case 'Karpuz':
alert("Evet bu yazdığını bir meyvedir.")
break;
case 'Domates':
default:
console.log('Hayır bu bir meyve olmaz');
}
</script>

var meyve = 'Kivi';

switch (meyve) {

case 'Elma':

case 'Ayva':

case 'Kivi':

case 'Karpuz':

alert("Evet bu yazdığını bir meyvedir.")

break;

case 'Domates':

default:

console.log('Hayır bu bir meyve olmaz');

}

</script>

for Döngüsü Kullanımı

Tüm C tabanlı programlama dillerinde olduğu gibi süreklilik arz eden komutlarınızı for döngüsü altında ele alabilirsiniz. JavaScript dilinde de bu yapının kullanımı aynı şekildedir. Bu yazıda javascript ile for döngüsü kullanımı hakkında bilgi bulabilir ve bir kaç tane javascript for döngüsü örneğini inceleyebilirsiniz.

JavaScript dilinde for döngüsü dışında şu döngüler de bulunmaktadır.

for – Belirli sayıda komutu bloklar arasında yürütmek için kullanılır.
for/in – dizi yada nesnelerin özelliklerini okumak için kullanılır(diğer dillerdeki foreach ile aynı)
while – şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.
do/while – en az bir kez olmak üzere şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.

Yazım Kuralı:

for (ifade1; ifade2; ifade3) {
çalıştırılacak olan kod bloğu
}

ifade1: Döngü başlamadan önce başlangıç değişkeninin tanımlanması(örn: i=0)

ifade2: Döngü çalışma koşulunu göstermektedir.(Örn: i<=100)

ifade3: Başlangıç değişkeninin değişimi(artış/azalış) (Örn: i++)

Örnek 1: 0-100 arasındaki sayıları yazdırmak için gerekli kodu yazınız.


<body>
<script>
for(var i=0;i<=100;i++){
document.write("Sayı"+i);
}
</script>
</body>

<body>

for(var i=0;i<=100;i++){

document.write("Sayı"+i);

}

</script>

</body>

Örnek 2: Döngü ve şartları bir arada kullanabilirsiniz. 0-100 arasındaki çift sayıları ekrana yazdıran programı yapınız.

Açıklama: i sayısının 2 ile bölümünden kalan 0 ise (i%2==0) sayı çifttir.


<body>
<script>
for(var i=0;i<=100;i++){
if(i%2==0)
{
document.write("Sayı"+i); 
}
}
</script>
</body>

<body>

for(var i=0;i<=100;i++){

if(i%2==0)

{

document.write("Sayı"+i);

}

</script>

</body>

Örnek 3:Dizi elemanlarını ekrana yazdırabilirsiniz. dizideki eleman sayısını öğrenmek için dizi.length özelliği ile dizideki eleman sayısını öğrenebiliriz. Aşağıdaki örnekte gunler adında bir dizi tanımlandı. gunler.length özelliği ile dizi sayısı öğrenilip döngüde dizinin her öğesi gunler[i] ile ekrana yazdırılmaktadır.


<body>
<script>
var gunler=["PAZARTESİ","SALI","ÇARŞAMBA","PERŞEMBE","CUMA","CUMARTESİ","PAZAR"];
for(var i=0;i<gunler.length;i++){ 
document.write("Sayı"+ gunler[i] +"<br>"); 
}
</script>
</body>

<body>

var gunler=["PAZARTESİ","SALI","ÇARŞAMBA","PERŞEMBE","CUMA","CUMARTESİ","PAZAR"];

for(var i=0;i<gunler.length;i++){

document.write("Sayı"+ gunler[i] +"<br>");

}

</script>

</body>

Örnek 4: Girilen mesajı ve tekrar sayısını kullanıcıdan alıp ekrana yazdıran javascript örneğini yazınız.


<script>
var mesaj = prompt("Yazdırılacak Mesajı Girin");
var sayi = prompt("Döngü Sayısı Girin");
for (var i = 0; i < parseInt(sayi); i++) {
document.write(mesaj + "<br/> ");
}
</script>

var mesaj = prompt("Yazdırılacak Mesajı Girin");

var sayi = prompt("Döngü Sayısı Girin");

for (var i = 0; i < parseInt(sayi); i++) {

document.write(mesaj + "<br/> ");

}

</script>

while Döngüsü Kullanımı

JavaScript while döngüsünde şart doğru olduğu sürece bloklar arasındaki kodlar yürütülür.

Yazım Kuralı:

while (şart) {
çalıştırılacak olan kodlar
}

şart: true(doğru) olduğu sürece döngüyü çalıştırır.

Örnek 1: 0’dan 9’a kadar olan sayıları yazdırmak için kullanılan örnek.

Açıklama: Döngüden önce var i=0; ile değişken tanımlanıp ilk değer ataması yapılır. i<10 olduğu sürece döngü çalıştırılacaktır. döngü içinde şartı bozmak için i++ ile i değişkeninde ki değer arttırılmıştır.


<script> 
var i=0; 
while (i < 10) {
document.write("Sayı= " + i);
i++;
}
</script>

var i=0;

while (i < 10) {

document.write("Sayı= " + i);

i++;

}

</script>

Örnek 2: Dizi elemanlarını while döngüsü ile ekrana yazdırma.

Açıklama: İlk üç satırda değişkenler tanımlanıp değer ataması yapılmıştır. while(meyveler[i]) ile döngü değeri dolu olduğu sürece true değeri üretilecek ve döngü içine girip yazi değişkenine dizi elemanları yazdırılacaktır. i++ değeri döngü 1 arttırılacak ve meyveler dizisindeki son index değerinden sonra tanımsız(undefined) değer için false değeri üretilecektir.


<script> 
var meyveler = ["Elma", "Armut", "Kiraz", "Karpuz"];
var i = 0;
var yazi = "";
while (meyveler[i]) {
yazi += meyveler[i] + "<br>";
i++;
}
document.write(meyveler);
</script>

var meyveler = ["Elma", "Armut", "Kiraz", "Karpuz"];

var i = 0;

var yazi = "";

while (meyveler[i]) {

yazi += meyveler[i] + "<br>";

i++;

}

document.write(meyveler);

</script>

Örnek 3: Döngüdeki en önemli kural; döngü sonsuz döngüye girmemelidir. Bunun için döngüden çıkma komutu(break) yada döngüdeki şartı bozacak değişim yazılmalıdır.


<script> 
while (true) {
document.write("merhaba dünya");
//DİKKAT:program sonsuz döngüye girecek ve sonlanmayacaktır.
} 
</script>

while (true) {

document.write("merhaba dünya");

//DİKKAT:program sonsuz döngüye girecek ve sonlanmayacaktır.

}

</script>

Örnek 3 düzeltme: Programı sonsuz döngüden çıkarmak için aşağıdaki gibi bir kod yazılabilir.


<script> 
var i=0;
while (true) {
document.write("merhaba dünya");
//DİKKAT:program sonsuz döngüye girecek ve sonlanmayacaktır.
} 
if(i>=10)break; //i 11 değerine ulaştığında döngüden çıkmacaktır.
</script>

var i=0;

while (true) {

document.write("merhaba dünya");

//DİKKAT:program sonsuz döngüye girecek ve sonlanmayacaktır.

}

if(i>=10)break; //i 11 değerine ulaştığında döngüden çıkmacaktır.

</script>

for-in Kullanımı

Kural:


for (degiskenadi in nesne){
//çalıştırılacak blok
}

for (degiskenadi in nesne){

//çalıştırılacak blok

}

Örnek:


<script>
var nesne = {ad:"Hayri", soyad:"KOÇ", yas:33};
for (var anahtar in nesne) {
 alert("Özellik: " + anahtar + " = " + nesne[anahtar]);
}
/*
ÇIKTI
Özellik: ad = Hayri
Özellik: soyad = KOÇ
Özellik: yas = 33
*/
</script>

var nesne = {ad:"Hayri", soyad:"KOÇ", yas:33};

for (var anahtar in nesne) {

alert("Özellik: " + anahtar + " = " + nesne[anahtar]);

}

ÇIKTI

Özellik: ad = Hayri

Özellik: soyad = KOÇ

Özellik: yas = 33

</script>

Örnek:


<script>
var nesne = ["İSTANBUL","ANKARA","İZMİR","EDİRNE"];
for (var index in nesne) {
alert("index : " + index + " = " + nesne[index]);
}
/*
ÇIKTI
index: 0 = İSTANBUL
index: 1 = ANKARA
index: 2= İZMİR
index: 3= EDİRNE
*/
</script>

var nesne = ["İSTANBUL","ANKARA","İZMİR","EDİRNE"];

for (var index in nesne) {

alert("index : " + index + " = " + nesne[index]);

}

ÇIKTI

index: 0 = İSTANBUL

index: 1 = ANKARA

index: 2= İZMİR

index: 3= EDİRNE

</script>

Yukarıdaki örnekte nesne yerine bir dizi olduğu dikkatinizi çekmiştir. JavaScriptte bütün diziler birer nesnedir. Bu yüzden dizi elemanı üzerinde okuma yaparken 0. özellik 1.özellik şeklinde son özelliğe(index) kadar devam etmektedir.

Örnek:


<script>
var yazi = "merhaba";
for (var index in yazi) {
alert( index + " = " + yazi[index]);
}
/*
ÇIKTI
m
e
r
h
a
b
a
*/
</script>

var yazi = "merhaba";

for (var index in yazi) {

alert( index + " = " + yazi[index]);

}

ÇIKTI

</script>

String katarları da birer karakter dizisidir.

Eğer nesneleri doğrudan okumak istiyorsanız. for…of deyimini kullanmanız gerekmektedir.

for-of deyimi örneği:


<script>
var dizi = [10, 20, 30];
for (var nesne of dizi) {
alert(nesne);
}
// 10
// 20
// 30
</script>

var dizi = [10, 20, 30];

for (var nesne of dizi) {

alert(nesne);

}

// 10

// 20

// 30

</script>

Örnek: pencere (window) özelliklerini öğrenmek için


<script>
for (ozellik in window) {
document.write(ozellik);
document.write("<br />");
}
</script>

for (ozellik in window) {

document.write(ozellik);

document.write("<br />");

}

</script>

Örnek: tarayıcı (navigator) özelliklerini öğrenmek için


<script>
for (ozellik in window.navigator) {
document.write(ozellik);
document.write("<br />");
}
</script>

for (ozellik in window.navigator) {

document.write(ozellik);

document.write("<br />");

}

</script>

for … of Kullanımı

for of deyimi tekrar eden (iterable) nesneler üzerinde hareket ederek nesnenin değerini okumak için kullanılan özel bir javascript deyimidir. Iterable nesneler (Array, Map, Set, String, TypedArray ve nesne içindeki yield ile oluşturulan değişkenker vb.) üzerinde okumak yapmak için kullanılır. For of ES6 ile javascript içine dahil olmuş bir deyimdir. For in deyiminden farklı olarak koleysiyonlar üzerinde sadece okuma yapmaktadır. C tabalı programlama dillerindeki foreach kavramı ile benzerlik göstermektedir. Yazıyı fazla uzatmadan örneklere geçelim.

Örnek: Dizi üzerinde okuma


<script> 
var sehirler=["İstanbul","Ankara","Adana","Antalya","Edirne","Tekirdağ"];
for(var nesne of sehirler)
{
console.log(nesne);
}
/*
Çıktı
İstanbul
Ankara
Adana
Antalya
Edirne
Tekirdağ
*/ 
</script>

var sehirler=["İstanbul","Ankara","Adana","Antalya","Edirne","Tekirdağ"];

for(var nesne of sehirler)

{

console.log(nesne);

}

Çıktı

İstanbul

Ankara

Adana

Antalya

Edirne

Tekirdağ

</script>

Örnek: String üzerinde okuma


<script> 
var degisken="Merhaba";
for(var harf of degisken)
{
console.log(harf);
}
/*
Çıktı
M
e
r
h
a
b
a
*/ 
</script>

var degisken="Merhaba";

for(var harf of degisken)

{

console.log(harf);

}

Çıktı

</script>

Örnek: Map nesnesi ile kullanım örneği


<script> 
var sehirler=new Map([[34,"İstanbul"],[06,"İstanbul"],[22,"Edirne"]]);
for(var [plaka,sehir] of sehirler)
{
console.log(plaka+"="+sehir);
}
/*
Çıktı
34=İstanbul
6=İstanbul
10 22=Edirne
*/ 
</script>

var sehirler=new Map([[34,"İstanbul"],[06,"İstanbul"],[22,"Edirne"]]);

for(var [plaka,sehir] of sehirler)

{

console.log(plaka+"="+sehir);

}

Çıktı

34=İstanbul

6=İstanbul

10 22=Edirne

</script>

Örnek Generatör foksiyon ile kullanım örneği


<script> 
function* nesne(){
let ad="Ali";
let soyad="Al";
yield sira1="İstanbul"
yield sira2="Ankara";
yield sira3="İzmir";
}
for(var sehir of nesne())
{
console.log(sehir);
}
/*
Çıktı
İstanbul
Ankara
İzmir
*/ 
</script>

function* nesne(){

let ad="Ali";

let soyad="Al";

yield sira1="İstanbul"

yield sira2="Ankara";

yield sira3="İzmir";

}

for(var sehir of nesne())

{

console.log(sehir);

}

Çıktı

İstanbul

Ankara

İzmir

</script>

Örnek: arguments nesnesi ile kullanım


<script> 
function ornek() {
for (let arg of arguments) {
console.log(arg);
}
};
ornek(1,3);
ornek(2,4,5);
/*
Çıktı
1
3
2
4
5
*/ 
</script>

function ornek() {

for (let arg of arguments) {

console.log(arg);

}

};

ornek(1,3);

ornek(2,4,5);

Çıktı

</script>

JavaScript Diziler

Dizi Oluşturma

Öncelikle “dizi nedir” sorusuna cevap vererek başlayalım. Dizi benzer ifadelerin bir araya getirildiği özel değişkendir.

Bir değişken içinde bir veri saklana bilirken, dizilerde birden fazla veri saklamak mümkündür. Aşağıdaki örnek kod parçasının ilk satırında diller adında bir dizi oluşturulmuştur. İkinci satırda da idsi örnek olan etiket seçilmiş ve dizi içindeki değerler yerleştirilmiştir.

Eğer dizi kullanmasaydık yukarıdaki değerleri şu şekilde yazmak zorunda kalacaktık.


var dil1="CSS";
var dil2="HTML";
var dil3="JavaScript";

var dil1="CSS";

var dil2="HTML";

var dil3="JavaScript";

Javascript ile Dizi Nasıl Oluşturulur?

JS dizi oluşturmanın kuralı şu şekildedir.


var diziadi=["değer1","değer2","değer3",...];

var diziadi=["değer1","değer2","değer3",...];

Örnek kodda şu şekilde olacaktır.


var donanim=["Harddisk","İşlemci","Ram","Anakart"];

var donanim=["Harddisk","İşlemci","Ram","Anakart"];

Ayrıca bilinmesi gereken bir konu da javascript ile veri tipleri dinamik olarak tanımlanır. Bu ifadeden yola çıkarak javascript dizisi içinde kullanılan verilerin tipleri bir birinden farklı olabilir. Şu şekilde dizi tanımlamakta mümkündür.


var ornek=["Ahmet",false,12,"Yazı",78.5];

var ornek=["Ahmet",false,12,"Yazı",78.5];

Not:Sadece bu şekilde değil iç içe dizi ve dizi içinde nesne(diziler de bir nesnedir bu arada) tanımlamak da mümkü[highlight][/highlight]ndür.

New Anahtar Kelimesi ile Dizi Oluşturma

new anahtar kelimesi ile dizi oluşturmak içinde içinde şu şekilde kod yazmak gerekecektir.


var isimler=new Array("Ali","Ahmet","Yusuf");

var isimler=new Array("Ali","Ahmet","Yusuf");

Dizi Nesnelerine Nasıl Ulaşılır?

Dizi içindeki her bir değerinin bir adresi vardır. Dizilerdeki bu adreslere programcı olarak index adını verilmektedir.

İlk değerin index(adresi) 0. index olarak ifade edilir ve yine köşeli parantezler içinde index numaraları yazılarak değere ulaşılır.


dizi[index];

dizi[index];

Örnek:


var diller= ["CSS", "HTML", "JavaScript"];
document.write( diller[0] );//ekrana CSS yazılacaktır.
document.write(diller[1]);//ekrana HTML yazılacaktır.

var diller= ["CSS", "HTML", "JavaScript"];

document.write( diller[0] );//ekrana CSS yazılacaktır.

document.write(diller[1]);//ekrana HTML yazılacaktır.

Dizi içindeki değer nasıl değiştirilir?

Dizi içindeki değeri değiştirmek içinde aynı yöntemle değer değiştirilir.


var diller= ["CSS", "HTML", "JavaScript"];
dizi[2]="Jquery";

var diller= ["CSS", "HTML", "JavaScript"];

dizi[2]="Jquery";

[highlight]Javascript değerini jquery olarak değiştirdi.[/highlight]

JavaScriptte diziler nesne olarak tanımlanmıştır. typeof metodu ile dizinin tipini öğrenmek mümkündür.

Dizi içinde Nesne(Object),fonksiyon, başka bir dizi de eklemek mümkündür.

Dizilerde kullanılan bazı metodlar ve özellikler

lenght özelliği: dizinin uzunluğunu öğrenmek için kullanılır.


var diller = ["CSS", "HTML", "JavaScript"];
diller.length;//3 değerini verecektir.

var diller = ["CSS", "HTML", "JavaScript"];

diller.length;//3 değerini verecektir.

Diziye nesne ekleme:


var diller = ["CSS", "HTML", "JavaScript"];
diller.push("Jquery");//diziye jquery değerini ekler.

var diller = ["CSS", "HTML", "JavaScript"];

diller.push("Jquery");//diziye jquery değerini ekler.

lenght özelliği ile diziye değer eklemek için;


var diller = ["CSS", "HTML", "JavaScript"];
diller[diller.length]="Jquery";//index numarası 3 olan elemana "Jquery" değeri eklendi.

var diller = ["CSS", "HTML", "JavaScript"];

diller[diller.length]="Jquery";//index numarası 3 olan elemana "Jquery" değeri eklendi.

Sırasız index numarası verip değer eklemek de mümkündür.


var diller = ["CSS", "HTML", "JavaScript"];
diller[15]="Jquery";

var diller = ["CSS", "HTML", "JavaScript"];

diller[15]="Jquery";

Dizi oluştururken dikkat edilmesi gerekenlar


var diller= new  Array("CSS","JS","HTML");
var diller = ["CSS", "HTML", "JavaScript"];//Daha hızlı çalışır.

var diller= new Array("CSS","JS","HTML");

var diller = ["CSS", "HTML", "JavaScript"];//Daha hızlı çalışır.

new anahtar kelimesi ile tek değer yazılarak bir dizi oluşturulursa, girilen değer dizi boyutu kabul edilir. Yazılan sayı kadar undefined tipinde değer oluşturulur. Aşağıdaki örnekte içinde değer girilmemiş 12 elemanlı bir dizi oluşturulmuştur.


var aylar= new Array(12);

var aylar= new Array(12);

Dizilerde Kullanılan Fonksiyonlar

JavaScript dilinde dizilerde kullanılan bazı metodları kullanım şekil tablo ve örneklerle açıklanmıştır.

Dizi oluşturma ve dizilerde kullanılan bazı metodları Dizi Oluşturma isimli makalede belirtmiştim. Bu makalede diziler üzerinde işlem yapan metodların nasıl kullanıldıkları örneklerle açıklanmıştır.

concat()	Çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.
every()	Dizideki tüm elemenları verilen fonksiyon ile test eder. Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
filter()	Kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.
forEach()	Dizinin her elemanı için belirtilen fonksiyonu çalıştırır.
indexOf()	Kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.
join()	Dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.
lastIndexOf()	Belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür. // aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı, //negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır. //değer bulmazsa -1 değerini döndürecektir.
map()	Dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.
pop()	Dizideki son değeri diziden atar.
push()	Belirtilen elemanları dizinin sonuna ekler.
reverse()	Diziyi ters çevirir.
shift()	Dizinin başındaki ilk elemanı çeker.
sort()	Diziyi sıralar.
some()	BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.
unshift()	Dizinin başına değer ekler.
toString()	Diziyi metinsel(string) ifadeye çevirir.

JavaScript Dizi Metod Örnekleri

concat()


<script>
//concat metodun çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.
// var yenidizi = eskidizi.concat(deger1[, deger2[, ...[, degerN]]])
var mevveler = ["Elma", "Muz"];
var sebzeler = ["Brokoli", "Lahana"];
var bitkiler=[];
bitkiler= sebzeler.concat(mevveler);
document.write(bitkiler); //ekran çıktısı: Brokoli,Lahana,Elma,Muz
</script>

//concat metodun çağrıldığı dizi ile metodaa gönderilen dizi yada değerleri ekleyip geriye dizi döndürür.

// var yenidizi = eskidizi.concat(deger1[, deger2[, ...[, degerN]]])

var mevveler = ["Elma", "Muz"];

var sebzeler = ["Brokoli", "Lahana"];

var bitkiler=[];

bitkiler= sebzeler.concat(mevveler);

document.write(bitkiler); //ekran çıktısı: Brokoli,Lahana,Elma,Muz

</script>

every()


<script>
// every dizideki tüm elemenları verilen fonksiyon ile test eder.
//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
function yasBuyukMu(eleman, index, dizi) {
return eleman >= 18;
}
var durum1= [20, 5, 8, 130, 44].every(yasBuyukMu); // false
var durum2= [18, 54, 18, 130, 44].every(yasBuyukMu); // true
</script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.

//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.

function yasBuyukMu(eleman, index, dizi) {

return eleman >= 18;

}

var durum1= [20, 5, 8, 130, 44].every(yasBuyukMu); // false

var durum2= [18, 54, 18, 130, 44].every(yasBuyukMu); // true

</script>


<script>
// every dizideki tüm elemenları verilen fonksiyon ile test eder.
//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.
function sayiKontrol(eleman, index, dizi) {
//Bilgi: NaN ->numaraya çevrilemezse üretilen bir değerdir. '1' -> 1 olurken 'a' - > sayı olmaz NaN olur.
if(isNaN(eleman))
return false;
else
return true;
}
var durum1= [5,"aaa",7,3].every(sayiKontrol); // false
var durum2= [18, 54, 18,152].every(sayiKontrol); // true
console.log(durum1);
console.log(durum2);
</script>

// every dizideki tüm elemenları verilen fonksiyon ile test eder.

//Geri dönüş değeri false bulana kadar tüm elemanları sırayla kontrol eder. Dönen tüm değerler true ise sonuç true döndürür.

function sayiKontrol(eleman, index, dizi) {

//Bilgi: NaN ->numaraya çevrilemezse üretilen bir değerdir. '1' -> 1 olurken 'a' - > sayı olmaz NaN olur.

if(isNaN(eleman))

return false;

else

return true;

}

var durum1= [5,"aaa",7,3].every(sayiKontrol); // false

var durum2= [18, 54, 18,152].every(sayiKontrol); // true

console.log(durum1);

console.log(durum2);

</script>

filter()


<script>
//filter metodu kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.
function buyukSayilar(deger) {
return deger >= 25;
}
var yeni_dizi = [12, 5, 8, 130, 44].filter(buyukSayilar);
// yeni_dizi degeri: [130, 44]
document.write(yeni_dizi);
</script>

//filter metodu kendisine gönderilen fonksiyondan geçen tüm elemanlardan yeni bir dizi oluşturur.

function buyukSayilar(deger) {

return deger >= 25;

}

var yeni_dizi = [12, 5, 8, 130, 44].filter(buyukSayilar);

// yeni_dizi degeri: [130, 44]

document.write(yeni_dizi);

</script>

forEach()


<script>
// forEach() metodu, dizinin her elemanı için belirtilen fonksiyonu çalıştırır.
function ornekFonk(deger) {
//dizinin her elemanını 5 ile çarpıp h3 etiketleri arasında ekrana yazar.
document.write("<h3>"+deger*5+"</h3>");
}
[34,11,02,4].filter(ornekFonk);
</script>

// forEach() metodu, dizinin her elemanı için belirtilen fonksiyonu çalıştırır.

function ornekFonk(deger) {

//dizinin her elemanını 5 ile çarpıp h3 etiketleri arasında ekrana yazar.

document.write("<h3>"+deger*5+"</h3>");

}

[34,11,02,4].filter(ornekFonk);

</script>

indexOf()


<script>
//indexOf() metodu kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.
var dizi = [2, 9, 9];
dizi.indexOf(2); // 0
dizi.indexOf(7); // -1
dizi.indexOf(9, 2); // 2
dizi.indexOf(2, -1); // -1
dizi.indexOf(2, -3); // 0
</script>

//indexOf() metodu kendisine gönderilen parametre ile dizide aramayapıp bulduğu ilk indexi döndürür. eğer dizide yoksa aranan değer -1 değerini çevirir.

var dizi = [2, 9, 9];

dizi.indexOf(2); // 0

dizi.indexOf(7); // -1

dizi.indexOf(9, 2); // 2

dizi.indexOf(2, -1); // -1

dizi.indexOf(2, -3); // 0

</script>

join()


<script>
//join() methodu dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
var dizi1 = meyveler.join(","); //Elma,Muz,Üzüm,Portakal
var dizi2 =meyveler.join("+"); //Elma+Muz+Üzüm+Portakal
</script>

//join() methodu dizideki tüm değerleri belirtilen yapıştırıyıcıya göre birleştirir.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var dizi1 = meyveler.join(","); //Elma,Muz,Üzüm,Portakal

var dizi2 =meyveler.join("+"); //Elma+Muz+Üzüm+Portakal

</script>

lastIndexOf()


<script>
//lastIndexOf() methodu belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür.
// aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı,
//negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır.
//değer bulmazsa -1 değerini döndürecektir.
var dizi = [2, 5, 9, 2];
dizi.lastIndexOf(2); // 3
dizi.lastIndexOf(7); // -1
dizi.lastIndexOf(9, 1); // -1
dizi.lastIndexOf(9, 2); // 2
dizi.lastIndexOf(9, -3); // -1
dizi.lastIndexOf(9, -1); // 2
</script>

//lastIndexOf() methodu belirtilen elemanın dizinin sonunda olup olmadığını kontrol eder. Dizinin sonunda bulamazsa -1 değerini döndürür.

// aranan değerin dışında isteğe bağlı ikinci bir değer daha verilebilir. Pozitif ise dizinin başından kaç değer içinde aranacağı,

//negatif ise dizinin sonunda kaç değerin aramadan çıkarılacağını ifade eder. Unutmayın aramaya eklenmese de dizinin başından aranacaktır.

//değer bulmazsa -1 değerini döndürecektir.

var dizi = [2, 5, 9, 2];

dizi.lastIndexOf(2); // 3

dizi.lastIndexOf(7); // -1

dizi.lastIndexOf(9, 1); // -1

dizi.lastIndexOf(9, 2); // 2

dizi.lastIndexOf(9, -3); // -1

dizi.lastIndexOf(9, -1); // 2

</script>

map()


<script>
//map() methodu dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.
var sayilar = [1, 4, 9];
var kok = sayilar.map(Math.sqrt);
// kok artık [1, 2, 3], sayılar dizisi hala [1, 4, 9]
var nesneDizi = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var yeniDizi = kvArray.map(function(gelen){
var yDizi = {};
yDizi[gelen.key] = gelen.value;
return yeniDizi;
});
// yeniDizinin : [{1:10}, {2:20}, {3:30}],
// nesneDizi'si hala [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]
</script>

//map() methodu dizi içindeki tüm elemanları belirtilen fonksiyondan geçirip yeni bir dizi oluşturur.

var sayilar = [1, 4, 9];

var kok = sayilar.map(Math.sqrt);

// kok artık [1, 2, 3], sayılar dizisi hala [1, 4, 9]

var nesneDizi = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];

var yeniDizi = kvArray.map(function(gelen){

var yDizi = {};

yDizi[gelen.key] = gelen.value;

return yeniDizi;

});

// yeniDizinin : [{1:10}, {2:20}, {3:30}],

// nesneDizi'si hala [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}]

</script>

pop()


<script>
//pop() methodu dizideki son değeri diziden atar.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
var son_meyve=mevveler.pop();
//meyveler yeni hali ["Elma", "Muz", "Üzüm"]
//son_meyve : "Portakal"
</script>

//pop() methodu dizideki son değeri diziden atar.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var son_meyve=mevveler.pop();

//meyveler yeni hali ["Elma", "Muz", "Üzüm"]

//son_meyve : "Portakal"

</script>

push()


<script>
// push() methodu belirtilen elemanları dizinin sonuna ekler.
var mevveler = ["Elma", "Muz"];
meyveler.push("Üzüm","Portakal");
//meyveler yeni hali : ["Elma", "Muz","Üzüm","Portakal"];
</script>

// push() methodu belirtilen elemanları dizinin sonuna ekler.

var mevveler = ["Elma", "Muz"];

meyveler.push("Üzüm","Portakal");

//meyveler yeni hali : ["Elma", "Muz","Üzüm","Portakal"];

</script>

reverse()


<script>
//reverse() methodu diziyi ters çevirir.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
meyveler.reverse();
//meyveler yeni hali: ["Portakal","Üzüm","Muz","Elma"]
</script>

//reverse() methodu diziyi ters çevirir.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

meyveler.reverse();

//meyveler yeni hali: ["Portakal","Üzüm","Muz","Elma"]

</script>

shift()


<script>
//shift() methodu dizinin başındaki ilk elemanı çeker.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
var ilk_eleman=meyveler.shift();
//meyveler yeni hali [ "Muz","Üzüm","Portakal"]
//ilk_elaman : "Elma"
</script>

//shift() methodu dizinin başındaki ilk elemanı çeker.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

var ilk_eleman=meyveler.shift();

//meyveler yeni hali [ "Muz","Üzüm","Portakal"]

//ilk_elaman : "Elma"

</script>

sort()


<script>
//sort() methodu diziyi sıralar.
var mevveler = ["Elma", "Muz","Ayva","Portakal"];
mevveler.sort();
//meyveler yeni hali ["Ayva", "Elma", "Muz", "Portakal"]
</script>

//sort() methodu diziyi sıralar.

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

mevveler.sort();

//meyveler yeni hali ["Ayva", "Elma", "Muz", "Portakal"]

</script>

some()


<script>
//some() methodu BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.
function karakterKontrol1(elaman, index, dizi){
//5 kareterden büyük olan var mı kontrolü yapıyor. varsa true
return eleman.length>5;
}
function karakterKontrol2(elaman, index, dizi){
//10 kareterden büyük olan var mı kontrolü yapıyor. varsa true
return eleman.length>10;
}
var mevveler = ["Elma", "Muz","Ayva","Portakal"];
meyveler.some(karakterKontrol1); //true portakal 5 karakterden büyük olduğu için true dönecektir.
meyveler.some(karakterKontrol2); //false 10 karakterden büyük değer olmadığı için sonuç false dönecektir.
</script>

//some() methodu BAZI elemanların belirtilen fonksiyon ile testi geçip geçmediğini kontrol eder.

function karakterKontrol1(elaman, index, dizi){

//5 kareterden büyük olan var mı kontrolü yapıyor. varsa true

return eleman.length>5;

}

function karakterKontrol2(elaman, index, dizi){

//10 kareterden büyük olan var mı kontrolü yapıyor. varsa true

return eleman.length>10;

}

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

meyveler.some(karakterKontrol1); //true portakal 5 karakterden büyük olduğu için true dönecektir.

meyveler.some(karakterKontrol2); //false 10 karakterden büyük değer olmadığı için sonuç false dönecektir.

</script>

unshift()


<script>
//unshift() methodu dizinin başına değer ekler.
var mevveler = ["Elma", "Muz","Üzüm","Portakal"];
meyveler.unshift("Ayva");
//meyveler dizisinin yeni hali :["Ayva","Elma", "Muz","Üzüm","Portakal"]
</script>

//unshift() methodu dizinin başına değer ekler.

var mevveler = ["Elma", "Muz","Üzüm","Portakal"];

meyveler.unshift("Ayva");

//meyveler dizisinin yeni hali :["Ayva","Elma", "Muz","Üzüm","Portakal"]

</script>

toString()


<script>
//toString() metodu diziyi metinsel(string) ifadeye çevirir.
var mevveler = ["Elma", "Muz","Ayva","Portakal"];
var yazi=meyveler.toString();
//yazi değişkeni : Elma, Muz,Ayva,Portakal
</script>

//toString() metodu diziyi metinsel(string) ifadeye çevirir.

var mevveler = ["Elma", "Muz","Ayva","Portakal"];

var yazi=meyveler.toString();

//yazi değişkeni : Elma, Muz,Ayva,Portakal

</script>

JavaScript Fonksiyonlar

Fonksiyon Tanımlama

Genellikle bir fonksiyon bir kodun yinelemeli olarak kullanılacağı durumda tanımlanır. Diğer programlama dillerinde de kullanılan fonksiyonlar “altprogram” olarak da ifade edilmektedir. Fonksiyon isim ve gövde olarak iki parçadan oluşur. isim kısmından fonksiyona parametre geçişi sağlanabilir. Gövde üzerinde de çalıştırılacak olan kodlar yürütülmektedir. Bir fonksiyona parametre geçişi olabildiği gibi fonksiyon isimleri üzerinden değer dönüşü de yapılabilmektedir.

Fonksiyon iki parçadan oluştuğunu yazmıştım. Fonksiyon gövdesi yürütülecek komutları barındırır. Fonksiyon ismi ile de fonksiyonu terkar tekrar kullanbiliriz.

Fonksiyonu çağırmak (çalıştırmak) için bilmemiz gerekenler, fonksiyon adı ve fonksiyonunun aldığı parametrelerdir.

Tanım:

Gelelim javascript ile fonksiyon nasıl tanımlandığına;

JavaScript dilinde her fonksiyon bir nesnedir.

Varsayılan değer dışında bir fonksiyondan bir değer döndürmek için return ifadesi kullanılmak zorundadır. return değeri olmayan bir fonksiyon varsayılan değeri döndürmektedir. Kurucu metod ile oluşturulan nesneler dışındaki tüm fonksiyonlardaki varsayılan değerler undefined türüdür.

Yazım Kuralı: