Java Script
Uploaded by
eylemedmJava Script
Uploaded by
eylemedmJavaScript Nedir?
JavaScript popüler bir programlama dilidir. HTML dili ile birlikte kullanılır. İnternette,
bilgisayarlarda, tabletlerde ve telefonlarda çalışır. Günümüzde JavaScript desteklemeyen bir
tarayıcı kalmamıştır.
Bu sayfada yer alan bilgiler, JavaScript HTML üzerinde neler yapar sorusunun yanıtıdır.
Javascript HTML Elementlerini Değiştirir
HTML DOM, W3C uyumlu bir HTML elementleri erişim sistemidir. JavaScript HTML ile
uyumlu olarak DOM'u değiştirir.
Örneğin aşağıdaki örnek id="demo" olan elementin içeriğini (innerHTML) değiştirmeye
yarıyor:
JavaScript Kodu
[Link]("demo").innerHTML = "Merhaba JavaScript";
Yukarıdaki [Link](), JavaScript'te kullanılan yüzlerce yöntemden biridir.
JavaScript kullanarak şunları yapabilirsiniz;
● HTML nesnelerini değiştirmek
● HTML nesnelerini silmek
● Yeni HTML nesneleri eklemek
● HTML nesnelerini kopyalamak
● Ve daha fazlası...
Makalenin devamı JavaScript ile yapabileceklerinize örnekler içeriyor.
JavaScript, HTML Nesnelerinde Değişiklik Yapar
JavaScript, HTML Stillerini (CSS) Değiştirir
JavaScript kullanarak stillerinizde değişiklik yapabilirsiniz.
JavaScript, Form Verilerini Kontrol Etmenizi Sağlar
Bir sayı yazın:
Veri girişi doğru!
JavaScript Kod Yapısı
NOT:
JavaScript kullanabilmek için öncelikle
HTML Dili
bilmeniz gereklidir!
JavaScript kodları HTML belgesi içerisinde kullanılır. Kod yazımına başlamadan önce
<script> /script>
nesnesi eklenir ve kod yazma işlemi bittikten sonra < yazılarak element
kapatılır.
JavaScript Kodu
<script>
alert('Hoş geldiniz!');
</script>
Javascript HTML Belgesinin Neresinde Kullanılır?
head>
Bir JavaScript kodu için oluşturacağınız <script></script> nesnesini < bölümünde ya
da <body> bölümünde kullanabilirsiniz.
NOT:
BODY elementi içerisinde kullanmak sayfa yüklenme hızını arttıracaktır.
Aşağıdaki örnek HEAD bölümünde JavaScript kullanılarak yapılmıştır;
JavaScript Kodu
<!DOCTYPE html>
<html>
<head>
<script>
function fonksiyonum() {
[Link]("demo").innerHTML = "Paragraf değişti!";
}
</script>
</head>
<body>
<h1>Web Sayfam</h1>
<p id="demo">Bir paragraf</p>
<button type="button" onclick="fonksiyonum()">Butona Bas!</button>
</body>
</html>
Aşağıdaki örnek ise JavaScript kodunun BODY içerisinde kullanılmasıyla oluşturulmuştur:
JavaScript Kodu
<!DOCTYPE html>
<html>
<body>
<h1>Web Sayfam</h1>
<p id="demo">Bir paragraf</p>
<button type="button" onclick="fonksiyonum()">Butona Bas!</button>
<script>
function fonksiyonum() {
[Link]("demo").innerHTML = "Paragraf değiştirildi.";
}
</script>
</body>
</html>
JavaScript Kodlarını Dosyadan Kullanma
İsterseniz bir javascript dosyası oluşturarak ve bunu HTML belgenizden çağırarak
kullanabilirsiniz. Bu kullanım şekli kaynak kodlarınızın sade olmasını sağlayacaktır.
Bunun için <script> kodunuza src="" özelliği ekleyip dosya adını ana dizine göre belirtin.
Örneğin script dosyamızın adı "[Link]" ise;
JavaScript Kodu
<script src="[Link]"></script>
NOT:
Script dosyası içerisinde <script> ve </script> elementi kullanılmaz.
JavaScript'i Test Etmek
JavaScript'in yazdırma ya da çıktı verme gibi bir özelliği yoktur. JavaScript, sadece HTML
Belgesinde yer alan nesneleri değiştirmek için kullanılır.
getElementById() Fonksiyonu
HTML nesnelerine erişmek için JavaScript'in id
getElementById( )
kodunu kullanırız.
Yukarıdaki kodda parantez içinde yer alan i
d
, HTML nesnesini tanımlayan bir id özelliğidir.
Aşağıdaki örnekte innerHTML ise tanımlanan nesnenin içeriğidir. Aşağıdaki kodu yazarak bir
HTML nesnesinin içeriğini değiştirebildik:
JavaScript Kodu
<!DOCTYPE html>
<html>
<body>
<h1>Web Sayfam</h1>
<p id="para">İlk Paragraf</p>
<script>
[Link]("para").innerHTML = "Paragraf değişti.";
</script>
</body>
</html>
Yukarıdaki JavaScript kodu (<script> içindeki) web tarayıcısı tarafından çalıştırılır.
[Link]("para")
bir javascript kodudur ve id="para" olan HTML
nesnesini seçmemize yarar.
innerHTML = "Paragraf değişti";
kodu ise HTML içeriğini değiştirmeye yarar.
HTML Belgesine Yazdırmak
Sadece test amaçlı olarak HTML belgesine yazı yazdırmak için
[Link]()
kodunu
kullanabilirsiniz.
JavaScript Kodu
<!DOCTYPE html>
<html>
<body>
<h1>Web Sayfam</h1>
<p>İlk paragraf</p>
<script>
[Link](Date());
</script>
</body>
</html>
NOT:[Link] sadece test amaçlıdır.
Yüklemesi tamamlanmış bir HTML belgesinde kullanırsanız tüm elementler sıfırlanır.
Konsola Yazdırmak
Eğer tarayıcınız hata ayıklama özelliğine sahipse, [Link]() kodunu kullanarak
JavaScript değerlerini tarayıcınızın konsol bölümünde görebilirsiniz.
Konsol bölümüne erişmek ve hata ayıklamayı başlatmak için tarayıcınızda F12'ye
basmalısınız.
JavaScript Kodu
<!DOCTYPE html>
<html>
<body>
<h1>Benim İlk Web Sayfam</h1>
<script>
a = 5;
b = 6;
c = a + b;
[Link](c);
</script>
</body>
</html>
NOT: Hata ayıklama, bilgisayar programlama dillerindeki hataları fark etmek ve azaltmak için
kullanılır.
JavaScript İfadeleri
JavaScript ile kodlama yaparken JavaScript ifadelerinden faydalanılırız. Bu kodlar yazılırken
ifadeler
noktalı virgül (;)
ile biter.
JavaScript Kodu
a = 5;
b = 6;
c = a + b;
JavaScript ifadelerinin tamamı noktalı virgül ile bitmez. IF, FUNCTION, FOR, DO gibi bazı
ifadeler, ifade grupları oluşturmaya yarar. Bu tarz ifade grupları oluştururken kıvrımlı
parantez kullanılır.
JavaScript Kodu
function fonksiyonum() {
[Link]("link1").innerHTML = "Bağlantı 1";
[Link]("link2").innerHTML = "Bağlantı 2";
}
Bazen kodlama yaparken hatırlatma ya da bilgilendirme amaçlı yazılar yazmamız
gerekebilir. JavaScript buna izin verir. Bunun için tek satırlık ifadelerde // birden fazla satırlı
ifadelerde ise /* ... */ kullanılır. Örneği inceleyin;
JavaScript Kodu
<div id="sonuc"></div>
<script>
// a'nın değerini 5 yaparız.
var a = 5;
// b'nin değerini ise 6 yaparız.
var b = 6;
/*
a ve b değişkenlerini toplarsak
5 + 6 = 11 eder. Bunu paragrafa
yazdıralım.
*/
var c = a + b;
[Link]("sonuc").innerHTML = c;
</script>
JavaScript ifadelerini yazarken ifade, değişken ve değerler arası boşluk bırakabilir ya da
bunları bitişik yazabiliriz. Aşağıdaki örnekte belirtilen her iki ifade de aynıdır.
JavaScript Kodu
kisi = "Murat";
kisi="Murat";
JavaScript Değişkenleri
JavaScript'te değişkenler verilerin saklandığı kelimelerdir. Bu kelimeler "var" ifadesi
kullanılarak tanımlanır.
Değişken Tanımlamak
Yeni bir değişken tanımlarken "var"komutundan faydalanırız. Örneğin sayısal bir ifade
olarak 5 (beş) verisi içeren x adında bir değişken oluşturmak için;
JavaScript Kodu
var x = 5;
Yukarıda tanımladığımız x bir değişkendir ve değeri 5'dir.
Tek bir "var" kullanarak birden fazla değişken oluşturabiliriz, bunun için tanımlanan
değişkenler arasında virgül (,) konulur:
JavaScript Kodu
var x = 1, y = 2, c = 3;
Değişkenleri İsimlendirirken Dikkat Edilecekler:
● Değişken adları mutlaka AZ ya da az aralığında bir harf ile başlar, sayı ile
başlayamaz.
● Değişkenler bazı durumlarda $ ya da _ ile de başlayabilir.
● Değişken adları büyük küçük harf duyarlıdır. Yani var x = 5 ile var X = 5 farklı
değişkenlerdir.
Değişken Veri Türleri
Değişkenler birçok veri türü saklayabilmektedir. Bunların başlıcaları; metin, sayısal,
mantıksal, dize ve objelerdir.
Yazı Verisi (String)
String veriler söz dizelerini depolar. Bu tarz verilerin değerlerini girerken tırnak (") ya da
kesme işareti (') kullanılır.
JavaScript Kodu
var adi = "Murat"; // tırnak kullandık
var soyadi = 'Elicaliskan'; // kesme işareti kullandık
Sayısal Veri (Numbers)
Sayısal bir değeri olan değişkenler oluştururken sadece sayılardan faydalanırız. Ayrıca nokta
(.) kullanarak ondalıklı sayı girişi yapabiliriz.
JavaScript Kodu
var pi = 3.14; // Ondalıklı
var r = 5; // Tam Sayı
Mantıksal Veri (Boolean)
Bazı değişkenler sadece iki veri içerebilir. İfade ya doğrudur (true) ya da yanlış (false).
JavaScript Kodu
var x = true;
var y = false;
Mantıksal veriler genellikle koşul gerektiren ifadeler için kullanılır.
Dize Verisi (Array)
Dize, bir veri türünde birden fazla veri içeren değişken topluluğudur. Dize oluştururken köşeli
parantez kullanır ve değerleri virgül ile ayırırız.
JavaScript Kodu
var arabalar = [ "Toros", "Broadway", "Megan" ]; // Yazı dizesi
var fiyatlar = [ 5000, 10000, 15000 ]; // Sayısal dize
Nesneler Veri İkilileri (Object)
Nesneler, alt değişkenler ve bunların değerlerini barındıran veri türüdür. Bu alt değişkenler
sıralanırken kıvrım parantezler kullanılır; isim:deger şeklinde ve virgüllerle ayrılarak yazılır.
JavaScript Kodu
var kullanici = { adi:"Murat", soyadi:"Elicaliskan" };
Boş ve Tanımsız Veriler (Undefined & Null)
Bazı değişkenlerin herhangi bir değeri yoktur, veri içermezler. Bir veri içermeyen değişken
oluştururken
var degisken; şeklinde yazılır. Yani eşittir (=) operatörü ile bir veri girişi
yapılmaz.
ull
Bazen bir değişkenin sahip olduğu veriyi silmek gerekebilir. Bunun içinse n kullanılır.
JavaScript Kodu
var isim; // isim değişkeni veri içermez.
kullanici = null; // kullanici değişkeninin verisi silinir.
Veri Türünü Tespit Etmek (typeof)
typeof operatörünü kullanarak bir değişkenin türünü sorgulayabilirsiniz.
JavaScript Kodu
typeof "Murat" // string
typeof 3.14 // number
typeof false // boolean
typeof [1,2,3,4] // object
typeof {name:'Murat', age:34} // object
Değişkenin Veri Türünü Değiştirmek
JavaScript'in değişkenleri dinamiktir. Yani veri türleri yeni değerler atanarak kolaylıkla
değiştirilebilir. Aşağıdaki örnekte x değişkeni sırasıyla tanımlanmış sonra x değişkenine
sayısal veri girilmiş ve metin verisi girilmiştir;
JavaScript Kodu
var x; // x'in veri türü tanımsız
var x = 100; // x, sayısal bir ifade oldu
var x = "Murat"; // şimdi x, metin ifade ediyor
JavaScript Metin Veriler
JavaScript'te bazı değişkenler çeşitli karakterlerin birleşmesinden oluşan verileri saklarlar.
Bu karakterler; harfler, sayılar, noktalama işaretleri ya da özel işaretler olabilir. İngilizce'de
string
olarak geçen bu veri türüne biz makalemizde metin veriler dedik.
JavaScript Metin Veri Türü
Bazı değişkenler "Okul", "Ağaç", "Türkiye'nin başkenti Ankara'dır." gibi metinleri içerir.
JavaScript'te metin değişkenleri kesme işareti ya da tırnak arasına alınarak işlenir.
JavaScript Kodu
var bilgi = "Türkiye'nin başkenti Ankara'dır.";
Metin verisi içerisindeki her bir karaktere, karakter sırasının bir eksiğini değişkenin sağında
köşeli parantezde yazarak ulaşabilirsiniz. Örneğin "Ankara" değişkeninin ilk harfi olan A'ya
ulaşmak için [0] yazmalıyız.
JavaScript Kodu
var kelime = "Ankara";
var harf = kelime[0]; // "A" karakteri
Eğer veri içerisinde tırnak kullanacaksak değişkeni kesme işareti ile tanımlayabilir, kesme
işareti kullanacaksak ise tırnak işareti ile tanımlayabiliriz. Örneğe bakınız:
JavaScript Kodu
var bilgi = "Türkiye'nin başkenti Ankara'dır.";
var bilgi = 'Yaşadığım yer "Ankara" dır.';
Yukarıdaki örnekteki işlemi hiç yapmayıp onun yerine bu karakterden önce kaçış karakteri
olan ters bölü (\) işareti kullanılabiliriz.
JavaScript Kodu
var bilgi = 'Türkiye\'nin başkenti Ankara\'dır.';
Tırnak ve kesme işareti kullanımında yukarıda belirtilen şekilde davranılmazsa JavaScript
kodunuz hata verir ve çalışmaz.
NOT:Makalenin devamı metin değişkenler ile ilgili kapsamlı bilgi içermektedir. Eğer
JavaScript'i ilk kez öğreniyorsanız bir sonraki dersten devam etmeniz faydanıza olacaktır.
Karakter uzunluğu length
Kelime Bulmak indexOf() lastIndexOf() search()
Yazıyı Değiştirmek replace()
Harfleri Büyültmek toUpperCase()
Harfleri Küçültmek toLowerCase()
Metni Dizeye Dönüştürmek split()
Metnin Belirli Bir Kısmını Elde Etmek substring()
Özel Karakterler
Karakter Uzunluğu
Eğer değişken türü metinse değişkenden sonra .
length
yazarak karakter uzunluğunu
bulabiliriz.
JavaScript Kodu
var kelime = "Ankara";
var uzunluk = [Link]; // uzunluk değişkeninin değeri 6 dır
Değişken İçerisinde Kelime Bulmak
indexOf()
yöntemi ile bir cümle içerisinde geçen bir yazının ilk bulunduğu yer elde edilir.
JavaScript Kodu
var metin = "Cümlede ilk bul geçen yeri bul bakalım.";
var konum = [Link]("bul"); // konumun değeri 12 olur.
Son benzer kelimeyi bulmak içinse bu kez l astIndexOf() yöntemini kullanırız. Yukarıdaki
örnekte indexOf() olan yeri lastIndexOf() olarak değiştirdiğinizde 12 değil 27 değeri aldığını
göreceksiniz.
search() yöntemi de metin içerisinde arama yapmanızı sağlar ve IndexOf() gibi ilk bulduğu
kelimeyi gösterir. Ancak sonraki konularda değineceğimiz düzenli ifadeler kullanımına olanak
sağlaması yönüyle indexOf()'tan ayrılır.
Yazıyı Değiştirmek
replace()yöntemi değişkende yer alan bir kelimeyi başkasıyla değiştirmenizi sağlar.
Parantez içinde ilk olarak bulmasını istediğimiz kelimeye yer veririz. Ardından virgül ile
ayırarak yerine koyulacak kelimeyi yazarız.
JavaScript Kodu
var kelime = "Türkiye'nin başkenti Antalya'dır.";
kelime = [Link]("Antalya","Ankara");
replace()
yönteminde de düzenli ifadeler (regular expressions) kullanılabilir.
Küçük Harfleri Büyük Harfe Dönüştürmek
toUpperCase()
yöntemi, bir metin türü değişkendeki tüm harfleri büyük yapmamızı sağlar.
JavaScript Kodu
var metin1 = "merhaba dünya!";
var metin2 = [Link](); // "MERHABA DÜNYA" olur.
Büyük Harfleri Küçük Harfe Dönüştürmek
toLowerCase()
yöntemi, bir metin türü değişkendeki tüm harfleri küçültür.
JavaScript Kodu
var metin1 = "MERHABA DÜNYA!";
var metin2 = [Link](); // "merhaba dünya" olur.
Metni Dizeye Dönüştürmek
Bir metni dizeye dönüştürürken split()
yöntemini kullanırız. Bu yöntemle metinde geçen özel
bir karakter dizeyi oluşturan değişkenler için sınırları belirler. Bu karakteri split() yönteminde
parantez arasında yazarız.
JavaScript Kodu
var metin = "a,b,c,d,e";
var harfler = [Link](",");
Yukarıdaki örnekte oluşturduğumuz harfler değişkeni bir dizedir ve 0 => "a", 1 => "b", 2 =>
"c", 3 => "d", 4 => "e" şeklinde metin türü alt değişkenlere sahiptir.
Metinden Belli Bir Kısmı Almak
Varsayalım "Ankara başkenttir." cümlesindeki ilk altı karakteri yani "Ankara" olan kısmı
almak istiyoruz. Bunun için substring()
yöntemini kullanabiliriz. Bu kodu kullanırken
parantez içine iki sayı yazılır. Yöntem belirtilen bu iki sayı ve arasındaki karakterleri getirir.
JavaScript Kodu
var metin = "Ankara başkenttir.";
var kelime = [Link](0, 6); // Ankara elde ederiz
JavaScript Özel Karakterleri
Yukarıda bahsettiğimiz gibi metin türü değişkenlerin değerlerini yazarken tırnak ve kesme
işareti kullanırız. Ancak değerde de bu karakterler geçiyorsa karışıklık ortaya çıkar.
JavaScript Kodu
"Bizler "Anadolu Kaplanları" olarak bilinirdik."
"Bizler "
Yukarıdaki cümle JavaScript tarafından olarak algılanır ve devamı hataya sebep
olur.
Bu problemi çözmek için ters bölü işareti (\) ya da diğer adıyla kaçış işareti kullanırız.
Aşağıdaki ifade olması gerekendir;
JavaScript Kodu
"Bizler \"Anadolu Kaplanları\" olarak bilinirdik."
Kaçış işareti ayrıca bu işareti kullanmak istediğimizde ve aşağıda sayılan bazı durumlarda
da kullanılabilir.
Karakter Anlamı
\\ \ işaretini kullanmak için
\n Yeni satır
\r Satırbaşı
\t Paragraf boşluğu (tab)
JavaScript Sayısal Veriler
JavaScript'te sayılar tam sayı ya da ondalıklı olarak yazılabilir.
JavaScript Kodu
var sayi1 = 3.14;
var sayi2 = 34;
Ayrıca sayıları ifade ederken üslü sayı da kullanabilirsiniz. Bunun için üs miktarını başında e
olacak şeklinde yazmalısınız.
JavaScript Kodu
var x = 123e5; // 12300000
var y = 123e5; // 0.00123
NOT: Makalenin devamı konuyla ilgili ayrıntılı bilgi içermektedir. JavaScript'i ilk kez
öğreniyorsanız bir sonraki konudan devam ediniz.
Sayıları ayrıca on altılık sistemde de yazabiliriz. Örneğin 0xFF onluk sistemde 255
etmektedir. toString() yöntemini değişken üzerinde kullanarak sayıyı farklı sayı sistemlerinde
de yazabiliriz. Örneğin [Link](2), ikilik sistemde değişkenin değerini verir.
Sayı içeren bir değişkenin sonsuzda olduğunu I nfinity aN
ya da bir sayı olmadığını N özel
karakterleri gösterir. Örneğin 1000'i sıfıra böldüğünüzde tanımsız yani sonuç NaN olacaktır.
1000'i sürekli kendisiyle çarparsak ise belli bir süre sonra değişkenimiz
Infinity
değerini
alacaktır.
Bir sayısal değişkenin sayı içerip içermediğini test etmek için i
sNaN()
mantıksal değerini
kullanabiliriz. Örneği inceleyin;
JavaScript Kodu
var x = 100 / "Elma"; // Sonuç NaN çıkacaktır
var y = 100 / "10"; // Sonuç 10 çıkacaktır
var z = isNaN( 1000 / 0 ); // Sonuç yanlış (false) çıkacaktır.
JavaScript Operatörleri
JavaScript'te değişkenler arası işlemleri operatörler yani bazı özel işaretler yoluyla yaparız.
Eşittir (=) İşareti
Bir değişkene değer atamak için eşittir kullanırız. Örneğin x değişkeninin değerinin 5
olmasını istiyorsak;
x = 5;
yazarız.
Eşittir sadece değer atamak için değil, aynı zamanda yapılan işlemlerin sonucunu elde
etmek için de kullanılır. Örneğin
x = y + z;
kodunda x'in değeri y ile z'nin toplamı olacaktır.
Aritmetik İşaretleri
Sayısal veri içeren değişkenler arasında matematiksel işlemler yapmak için kullanmamız
gereken işaretler aşağıdaki tabloda gösterilmiştir;
İşaret Anlamı Örnek Sonuç
+ Toplama x = 1 + 2; 3
Çıkarma x = 5 2; 3
* Çarpma x = 2 * 2; 4
/ Bölme x = 10 / 2; 5
% Bölümünden kalan (mod) x = 5 % 4; 1
++ Sayıyı bir arttırmak x = 5; x++; 6
Sayıyı bir azaltmak x = 5; x; 4
Sayısal Değişkene Değer Atamak
Yukarıda anlatıldığı gibi bunun için eşittir (=) kullanırız. Ancak eşittirin solunda yer
vereceğimiz matematiksel bir işaret yoluyla da değer atayabiliriz. Burada atanan değişken
"kendisiyle topla", "kendisiyle çarp" gibi bir anlam kazanır.
NOT:
Aşağıdaki tabloda x = 10, y = 5 alınacaktır!
İşaret Anlamı Örnek Sonuç
+= Kendisiyle topla x += y; x = 15
= Kendisinden çıkar x = y; x=5
*= Kendisiyle çarp x *= y; x = 50
*= Kendisine böl x /= y; x=2
%= Kendisine böl, kalanı yaz x %= y; x=0
Metin Değişkenlerde İşlem Yapmak
İki metinsel veriyi birleştirmek için artı (+) işareti kullanılır.
JavaScript Kodu
var ad = "Murat";
var soyad = "Elicaliskan";
var ad_soyad = ad + " " + soyad;
Sayısal ve Metin Değişkenlerle İşlem Yapmak
Sayı içeren bir değişkeni metin içeren bir değişkenle toplarken; her iki değişken de sayıyla
ifade edilebiliyorsa sonuç sayısal bir değer olur, bunun dışında ise metinsel bir değer elde
edilir.
JavaScript Kodu
x = 5 + 5; // Sonuç 10, veri türü: sayısal
y = "5" + 5; // Sonuç 10, veri türü: sayısal
z = "Murat" + 5; // Sonuç "Murat5", veri türü: metin
JavaScript Dizeler
Dize (Array) bir
değişkenler topluluğudur . Birden fazla değişkeni barındıran dizeler
tanımlanırken köşeli parantez irgüllerle
kullanılır. Dizenin üyeleri v ayrılır.
Aşağıdaki örnekte iki adet dize tanımlanmıştır;
JavaScript Kodu
var numaralar = [ 12, 16, 30 ];
var isimler = [ "Ali", "Hasan", "Ayşe" ];
numaralar ismini verdiğimiz dize sayı türünden değişkenleri depolamaktadır. isimler dizesi
ise metin türü değişkenleri barındırmaktadır.
Dize oluştururken karışıklığı önlemek için satır da atlayabiliriz;
JavaScript Kodu
var arabalar = [
"Renault",
"Mercedes",
"BMW",
"Audi"
];
Dize Değerlerine Erişmek
Bir dizenin üyesi olan verilere ulaşmak için verinin sıra numarasını dizenin sağında bitişik bir
şekilde köşeli parantez içinde yazmalıyız.
JavaScript Kodu
var meyveler = ["Elma","Armut","Çilek","Muz"];
var meyve = meyveler[0];
Yukarıda meyve değişkeni dizenin ilk nesnesi olan "Elma" verisine sahip olacaktır.
NOT:Dizenin ilk nesnesi her zaman 0 (sıfır) dır. Yani degisken[1] yazarsanız aslında ikinci
nesneyi seçmiş olursunuz! İlk nesne için mutlaka sıfır yazın.
Dizedeki Nesne Sayısını Elde Etmek
Dizenin kaç elemandan oluştuğunu bulmak için
length
özelliğinden faydalanırız.
JavaScript Kodu
var renkler = ["Mavi","Kırmızı","Yeşil","Sarı"];
var renksayisi = [Link]; // Sonuç: 4;
Dizeye Değer Eklemek
Dizeye değer eklemek için boş bir dize sırasına değer girmeniz yeterlidir. Bunun için iki farklı
yol kullanabilirsiniz.
JavaScript Kodu
var nesneler = ["Top", "Gözlük", "Saat"];
// 1. Yöntem
nesneler[[Link]] = "Çanta";
// 2. Yöntem
nesneler[10] = "Şapka";
Yukarıdaki örnekte birinci yöntemde [Link]'in değeri 3'tür. nesneler[3] boş olduğu
için buraya nesneyi ekledik. İkinci yöntemde ise 10 sayısı keyfi belirtilmiştir ve boş olduğu
bilindiği için 10. nesne olarak "Şapka" eklemesini sağladık.
Dizelerle İlgili Fonksiyonlar
Yöntem Açıklama
valueOf() Dize verilerini yazdırmak
toString()
karakter
join( ) Dize verilerini yazdırmak, parantez içinde
belirttiğiniz karakter, dize verilerinin aralarına
konulur.
pop() Dizedeki son nesneyi siler
veri
push( ) Dize sonuna belirtilen veriyi ekler
shift() Dizedeki ilk değeri silerek diğerlerini başa kaydırır
veri
unshift( ) Dizedeki tüm verileri bir kaydırırarak en başa
belirtilen veriyi ekler
sort() Dizedeki verileri alfabetik olarak sıralar
reverse() Dizedeki verileri ters çevirir
JavaScript Nesneler
JavaScript'te tüm veri türleri aynı zamanda bir
nesnedir. Nesneler özellik ve yöntemler eklediğimiz
verilerdir.
Nesne Yapısı
Dize, metin, mantıksal ya da sayısal veriler.
Bunların tamamı birer nesnedir. Ayrıca biz de yeni
nesneler oluşturabiliriz. Örneğin kişi bilgileri içeren
"kimlik" nesnesi oluşturduğumuz aşağıdaki örneği
inceleyelim;
var kimlik = { ad:"Murat", soyad:"Elicaliskan",
yas:"30" };
Yukarıda nesne oluştururken k ıvrımlı parantezle
başlanmış olduğunu, ozellik:deger formatında
yazılmış olduğunu ve virgüllerle ayrılmış olduğunu
görüyoruz. Aşağıda aynı kodun daha anlaşılır bir
şekilde ifadesine yer verilmiştir;
JavaScript Kodu
var kimlik = {
ad:"Murat",
soyad:"Elicaliskan",
yas:"30"
};
Nesne Özelliklerine Erişmek
Nesne verilerine iki şekilde erişebilirsiniz. Örnekte
her iki yöntem de gösterilmiştir;
JavaScript Kodu
var isim = [Link];
var soyad = kimlik["soyad"];
Ya noktadan sonra özellik yazılır ya da köşeli
parantez ve tırnak işareti içinde özellik adına yer
verilir.
Nesne Yöntemi Oluşturmak
Nesneler yöntemler oluşturularak işlevsel hale
getirilebilir. İşlevler birer fonksiyondur ve parantezli
bir şekilde kullanılır.
JavaScript Kodu
var kimlik = {
ad : "Murat",
soyad : "Elicaliskan",
yas : 30,
isim : function (){ return [Link] + " " + [Link]
}
};
var isim = [Link]();
Yukarıdaki örnekte isim()
bir yöntem olup
çalıştırıldığı zaman nesnedeki ad ve soyad
özelliklerini birleştirmektedir.
JavaScript Koşul
İfadeleri
Farklı durumlarda farklı işlemler yapmak gerekebilir.
Bu durumların tespit edilmesi için koşul ifadeleri bize
yardımcı olur.
Şartların sağlanıp sağlanılmadığını tespit ederken
standart üç ifade kullanılır. Bunlar if, else if ve
else'dir. Örneği inceleyelim;
JavaScript Kodu
var mesaj = "";
var saat = 5;
if ( saat < 10 )
{
mesaj = "İyi sabahlar";
}
else if ( saat < 20 )
{
mesaj = "İyi günler";
}
else
{
mesaj = "İyi akşamlar";
}
Örnekte saat değişkeni 5 olarak belirtilmiştir. Bu
değişkenin sayısal değerine göre mesaj
değişkeninin şekillenmesi isteniyor. Eğer saat
10'dan küçükse "İyi sabahlar", eğer 20'den küçükse
"İyi günler", hiçbiri değilse "İyi akşamlar" demesi
sağlanıyor. Dikkatli incelendiğinde parantez
içerisinde koşullara yer veriliyor.
● if ( koşul sağlanıyorsa ) { şunları yap }
● else if ( koşul sağlanıyorsa ) { şunları yap }
● else { şunları yap }
Koşul oluştururken mutlaka IF ile başlanır. Parantez
içinde koşul belirtilir ve yapılacaklar kıvrımlı
parantez içinde yazılır.
ELSE IF kullanmak için öncelikle IF kullanmış olmak
gereklidir. Yani IF kullanmadan ELSE IF ile bir
kontrol yapılamaz. "O olmadı bari bunu dene"
anlamı taşır.
ELSE kullanırken parantez açılmaz ve koşul
yazılmaz. ELSE, diğer tüm if ve else ifler
çalışmadıysa, yani hiçbir koşul sağlanılamadıysa
yapılacak şeyi belirtir.
Koşul Operatörleri
Koşul ifadeleri mantıksal değerlerdir. Doğru (true) ya
da yanlış (false) olabilirler. İki eşittir (==) bir koşul
ifadesidir ve iki değişken ya da değerin denkliğini
doğrulamayı sağlar. Örneğin;
JavaScript Kodu
var x = 5;
var y = 6;
var sonuc = "";
if ( x
==
y)
{
sonuc = "Birbirine eşit";
}
Şimdi bu koşul ifadelerini ve anlamlarını listeleyelim:
Karşılaştırmalar
NOT:
Aşağıdaki örneklerde x'in değeri 5 alınacaktır!
İşaret Anlamı Koşul İfadesi
== Birbirine eşitse x == 8
x == 5
!= Eşit değilse x != 8
=== Türleri eşitse x === "5"
x === 5
!== Türleri eşit değilse x !== "5"
> Büyükse x>8
< Küçükse x<8
>= Büyük veya eşitse x >= 8
<= Küçük veya eşitse x <= 8
Mantıksal İfadeler
NOT: Aşağıdaki örneklerde x = 6 ve y = 3
alınacaktır!
İşaret Anlamı Koşul İfadesi
&& ve x < 10 && y > 1
|| veya x == 5 || y == 5
! değilse !(x == y)
Mantıksal ifadelerden
ve (&&) bağlacında her iki
durum da doğru ise koşul sağlanır. Eğer v eya (||)
bağlacı kullanılmışsa belirtilen koşullardan sadece
biri doğru olsa da önerme doğrudur.
Koşul İfadelerini Tek Satırda
Kullanmak
JavaScriptte koşul ifadelerinde if kullanmak yerine
tek satırda
( koşul ) ? doğruysa : yanlışsa;
yapısını da kullanabiliriz. Aşağıdaki iki kullanım da
aynı işi görecektir;
JavaScript Kodu
var mesaj = "Yaşınız 18'den ";
if ( yas >= 18 )
{
mesaj += "büyük!";
}
else
{
mesaj += "küçük!";
}
JavaScript Kodu
var yas = 19;
var mesaj = "Yaşınız 18'den ";
mesaj += ( yas >= 18 ) ? "büyük!" : "küçük";
JavaScript Switch
JavaScript'teki Switch kodu bir ifadeden çıkan
sonuca göre işlem yapmamızı sağlar.
Bu kodun temel yapısı aşağıdaki şekildedir;
JavaScript Kodu
var x = 1;
var mesaj = "";
switch( x )
{
case 2:
mesaj = "Sayı: 2";
break;
case 1:
mesaj = "Sayı: 1";
break;
default:
mesaj = "Sayım 1 ya da 2 değil!";
}
switch( ifade )kodunda ifadede elde edilen sonuç
case deger: reak;
ile eşit ise, o kodlar çalıştırılır. b
kodların sonuna eklenir ve switch'ten çık anlamına
gelir.
Eğer elde edilen sonuç case ile belirtilenlerin
hiçbirine uymuyorsa default: kullanılan kısmın
çalıştırılmasını sağlayabiliriz.
JavaScript Kodu
switch (new Date().getDay())
{
case 6:
text = "Bugün Cumartesi";
break;
case 0:
text = "Bugün Pazar";
break;
default:
text = "Hafta içindesin!";
}
Farklı sonuçlarda da aynı kodların çalıştırılmasını
case değer: kodunu farklı değerler için alt alta
tekrarlayarak sağlayabiliriz.
JavaScript Kodu
var meyve = "Çilek";
switch( meyve )
{
case "Kiraz":
case "Çilek":
mesaj = " kırmızıdır";
break;
case "Portakal":
mesaj = " turuncudur";
break;
case "Limon":
case "Ananas":
mesaj = " sarıdır";
break;
}
while( koşul ) { kodlar }
şeklinde kullanımı olan bu
döngü koşul sağlandığı sürece tekrar edecektir.
Örneğe bakalım;
JavaScript Kodu
var mesaj = "";
var i = 0;
while( i < 10 )
{
mesaj = "Benim sayım " + i + "<br />";
i++;
}
Koşul i'nin 10'dan küçük olması. WHILE'ın
çalıştırdığı kodlara bakarsanız
i++yani i'nin bir
arttırılması istenmiş. Bu sayede i = 0, i = 1 ... i = 9
olur ancak i = 10 olmaz. Çünkü koşul i'nin 10'dan
küçük olması şartını koymuş.
DO/WHILE Döngüsü
WHILE koduna benzer şekilde çalışır. Fakat bu kez
koşulun kontrol edildiği yer döngünün başında değil
sonundadır.
JavaScript Kodu
do {
mesaj += "Benim sayım " + i + "<br />";
i++;
}
while (i < 10);
Döngüyü Sonlandırmak (break)
JavaScript'te çalışmakta olan bir döngü break
komutuyla durdurulabilir. Aşağıdaki örnekte 10'dan
küçükse çalıştır anlamı içerse de i = 3 olduğunda
döngü sonlandırılacaktır. Çünkü break kodu
kullanıldı.
JavaScript Kodu
for (i = 0; i < 10; i++)
{
if (i == 3)
{
break;
}
text += "Benim sayım " + i + "<br />";
}
Sonraki Tekrara Geçmek
(continue)
Döngü tekrarlardan oluşur. Bazı tekrarları hızlı
geçmek ve sonraki tekrardan devam etmek
isteyebilirsiniz. Bu durum için kullanacağınız kod
continue .
JavaScript Kodu
var ileti = "";
for (i = 0; i <= 10; i++)
{
if (i == 3)
continue;
ileti += "Benim sayım " + i + "<br />";
}
Yukarıdaki kod çalıştırıldığında "Benim sayım 3"
ifadesinin atlandığını göreceksiniz.
IF, ELSE IF, ELSE, FOR, WHILE gibi kod blokları
içeren komutlar kullanırken eğer yazacağımız kod
tek satırsa kıvrımlı parantez {} kullanmadan alt
satıra kodu yazabiliriz. Örneğin;
for ( i = 0; i < 5; i++ )
mesaj += "Benim sayım " + i + " <br />";
JavaScript
Fonksiyonlar
Fonksiyonlar, çağırıldıklarında belli işlemleri yapan
kod gruplarıdır. Bunlar script içerisinde yer alır
ancak kullanılmadıkları sürece çalıştırılmaz.
Fonksiyon Yapısı
Bir fonksiyon oluşturulurken aşağıdaki formatta kod
yazılır:
JavaScript Kodu
function fonksiyonAdı ( varsa parametreler )
{
çalıştırılacak kodlar
}
● fonksiyonAdı Fonksiyonuna bir isim verin.
Çalıştırırken bunu kullanacaksınız.
● parametre Fonksiyonun çalışırken ihtiyaç
duyacağı ya da işleyeceği değişkenlerdir.
Hiç kullanmayabilirsiniz. Birden fazla ise
aralarına virgül koymalısınız.
Bir Fonksiyonu Çalıştırmak
Bir fonksiyon;
● Bir olay gerçekleştiğinde (örneğin butona
basılması vs.)
● JavaScript kodları yardımıyla çağırılırsa
● Kendiliğinden (kendi içerisinde çağırır)
durumlarında çalışır.
Fonksiyonu çalıştırırken fonksiyon adı yazılır,
parantez açılıp parametre varsa yazılır ve parantez
kapatılır. Parametreler, fonksiyonda belirtildiği
sırada olmalıdır.
JavaScript Kodu
// Fonksiyonu oluştururken;
function fonksiyonum(parametre1, parametre2)
{
// kodlar buraya gelecek
}
// Fonksiyonu çağırırken;
fonksiyonum(parametre1, parametre2);
Fonksiyondan Veri Elde Etmek
(return)
Fonksiyonlar sadece kod parçalarını çalıştırmaz.
Ayrıca çıkardıkları sonuçları da iletirler. Bunun için
returnkodu kullanılır.
Örneğin bir fonksiyon yazalım, kendisine verilen iki
sayıyı çarpıp sonucu yine bize iletsin.
JavaScript Kodu
var x = Carp(4, 3);
function Carp(a, b)
{
return a * b;
}
x'in değeri 12 olacaktır.
Ayrıca return sadece veri getirmek için değil,
fonksiyonu sonlandırmak için de iyi bir yoldur.
Çünkü return;kullanıldığı yerden itibaren
fonksiyonun diğer kodları çalıştırılmayacaktır.
JavaScript Matematik
ath
Sayılarla ilgili işlem yaparken M nesnesi bize
yardımcı olur.
[Link]() Rastgele Sayı
Oluşturmak
0 ile 1 arasında rastgele sayı üretir.
JavaScript Kodu
<button onclick="rastgele()">Sayı Üret</button>
<div id="sayi"></div>
<script>
function rastgele() {
[Link]("sayi").innerHTML =
[Link]();
}
</script>
Görünümü
[Link]() Verilen Dizede En
Küçük Sayıyı Bulmak
JavaScript Kodu
[Link](0, 150, 30, 20, 8); // 8 çıkar
[Link]() Verilen Dizede En
Büyük Sayıyı Bulmak
JavaScript Kodu
[Link](0, 150, 30, 20, 8); // 150 çıkar
[Link]() Tam Sayıya
Yuvarlamak
JavaScript Kodu
[Link](4.7); // 5 eder
[Link](4.4); // 4 eder
[Link]() Bir Üst Tam Sayıya
Tamamlamak
JavaScript Kodu
[Link](4.4); // 5 eder
[Link]() Bir Alt Tam
Sayıya Tamamlamak
JavaScript Kodu
[Link](4.7); // 4 eder
JavaScript Tarih ve
Saat
JavaScript'te tarih ve saat işlemlerini
Date()
nesnesi
ile yaparız.
new Date() Bugünün Tarih ve
Saati
JavaScript Kodu
<div id="ts1"></div>
<script>
[Link]("ts1").innerHTML =
Date();
</script>
Görünümü
Tue Dec 22 2015 21:34:26 GMT+0200 (GTB
Standart Saati)
Date() Nesnesinin Yöntemleri
Yöntem İşlevi Sonuç
getTime() 1.1.1970'den bugüne 1450812873106
geçen zamanı milisaniye
olarak yazar
toUTCString() UTC formatıyla yazar Tue, 22 Dec 2015 19:34:33
GMT
getDay() Haftanın gününü 0 6 2
arasında bir rakam olarak
belirtir. 0 = Pazar kabul
edilir.
getFullYear() Yılı yazar 2015
getDate() Günü yazar (1 31 22
arasında)
getMonth() Ayı yazar (1 12 11
arasında)
getHours() Saati yazar 21
getMinutes() Dakikayı yazar 34
getSeconds() Saniyeyi yazar 33
Farklı Bir Tarih Belirlemek
Date() nesnesi bu şekliyle şu andaki tarihi ve saati
verir. Ancak bazen kendimiz bir tarih belirlemek
isteyebiliriz. Bunun için parantez arasında tarihe yer
verebiliriz.
new Date(yıl, ay, gün, saat, dakika, saniye,
milisaniye);
Örneğin 22 Şubat 1984'ten günümüze kadar geçen
süreyi hesap etmek istersek;
JavaScript Kodu
Toplam <span id="ts2"></span> gündür yaşıyorsun!
<script>
var simdi = new Date();
var tarih = new Date(1984, 2, 22, 14, 0, 0, 0);
var gecen = new Date(simdi tarih);
var saniye = [Link]((simdi tarih)/1000);
var dakika = [Link](saniye/60);
var saat = [Link](dakika/60);
var gunler = [Link](saat/24);
[Link]("ts2").innerHTML =
gunler;
</script>
Görünümü
Toplam 11597 gündür yaşıyorsun!
Yaşlanmış mıyız neyiz? :)
JavaScript Olaylar
HTML belgeleri birçok nesne içerir. Bu nesneler
bazı etkilere maruz kalır. Örneğin bir buton
tıklanmak içindir ve nesne için tıklanmış olmak bir
olaydır.
JavaScript, bu olaylara tepki verebilir. Bu da
kullanıcı ile tarayıcı arasında birçok işlem
yapabilmemizi sağlar.
HTML Olaylarına Örnekler
Bazı olaylar tarayıcı tarafından olurken bazıları
kullanıcı etkinliği sonucu meydana gelir.
Örneğin web sayfasının yüklenmiş olması bir olaydır
ve tarayıcı tarafından JavaScript'e bildirilir.
Bir formdaki butona tıklanması ise kullanıcının
meydana getirdiği bir değişimdir.
İşte bu tarz olaylar için JavaScript'te kodlar
yazılabilir. Örneğin web sayfası yüklendikten sonra
neler yapılacağı kodlara dökülebilir.
HTML Nesne Olaylarına
JavaScript Kodu Eklemek
Bunun için HTML elementlerinde bazı özelliklere yer
veririz.
JavaScript Kodu
<button>Buraya Tıklayın</button>
Görünümü
Yukarıdaki butonun tıklanması bir olaydır. Ancak
JavaScript ile bağlanmadığı için bir tepki
vermemektedir.
Şimdi butona tıklandığında bize "Merhaba!"
demesini JavaScript yoluyla sağlayalım. Bunun için
aşağıdaki kodu inceleyin.
JavaScript Kodu
<button
onclick="alert('Merhaba')"
>Buraya
Tıklayın</button>
Görünümü
Burada onclick="" ya da onclick='' şeklinde
kullanabildiğimiz HTML özelliği sayesinde butona
tıklandığında JavaScript'te yazdığımız kodların
çalışmasını sağladık.
Önemli HTML Olayları
Olay Gerçekleşme Zamanı
onclick HTML nesnesine tıklanırsa
onchange HTML nesnesi değişirse
onmouseover Fare imleci, nesne üzerine gelirse
onmouseout Fare imleci, nesne üzerinden çekilirse
onkeydown Klavyeden bir tuşa basılırsa
onload Tarayıcı sayfayı yüklemeyi bitirirse
BİLGİ KAYNAĞI: [Link]
You might also like
- İstemci Taraflı Programlama: Javascript: Javascript'In Kodlama ÖzellikleriNo ratings yetİstemci Taraflı Programlama: Javascript: Javascript'In Kodlama Özellikleri30 pages
- Web Uygulama Sızma Testi (Pentest) Eğitimi Sunumu100% (1)Web Uygulama Sızma Testi (Pentest) Eğitimi Sunumu466 pages
- Javascript Programlama: İbrahim ÇelikbilekNo ratings yetJavascript Programlama: İbrahim Çelikbilek18 pages
- Sınıf Bilişim Teknolojileri Deers NotlarıNo ratings yetSınıf Bilişim Teknolojileri Deers Notları4 pages
- İbrahim Çelikbilek (Kodlab) - JavaScript50% (2)İbrahim Çelikbilek (Kodlab) - JavaScript337 pages
- Express Middleware Ve Body-Parser DERS 5No ratings yetExpress Middleware Ve Body-Parser DERS 525 pages