V
vBasic
Misafir
Herkese merhaba, bu dersimizde en çok karşılaşacağımız konulardan birisi olan değişken oluşturma ve kullanma üzerine yoğunlaşacağız. Bol örneklerle bilgilerimizi pekiştirip devam etmek istiyorum, dilerseniz temel bilgilere göz atarak devam edelim.
Değişken Nedir?
Değişkenler, girilen veya alınan değerin geçici olarak tutulduğu yerdir. Kullanılacak değer için sürekli kod oluşturmaktansa değişken kullanarak bu alanlardan tasarruf edebiliriz. Diğer programlama dillerinde değişkenler veri türüne göre farklılıklar gösterebilirken Javascript'te standart şekilde oluşturulabilir. Yine diğer programlama dillerinde geçerli olan temel kurallar JS içinde geçerlidir.
BURAYA DİKKAT var: Variable sözlüğünün kısaltmasıdır, Türkçe'de değişken anlamına gelmektedir. Javascript'te değişken oluştururken kullanılan anahtar kelime var'dır. Değişken ismi önüne eklemezseniz Javascript bu kodun değişken olduğunu algılayamaz.
Örneklerle Değişken İsimleri
Değişkenlerin nasıl oluşturulacağını ve hangi amaçla kullanıldıklarını anladığımıza göre devam edelim. Öncelikle temel HTML sayfamızı tekrar oluşturalım:
Şimdi bir örnek oluşturalım, örneğin çok basit sınıf otomasyonu oluşturalım, otomasyonda bulunan butona her tıklandığında öğrenci sayısı bir bir artsın. Basit bir örnekle başlayacağımız için formumuzun body alanına bir tane H1 etiketi ve buton ekleyelim.
Yukarıdaki kodu incelediğinizde h1 etiketi içerisine eklenmiş span etiketi göreceksiniz. Biz burada butonumuza her tıklandığında otomasyona 1 öğrenci eklenmesini isteyeceğiz, bu sayım işleminide span ektiketi üzerinden yapacağız. Şimdi Javascript fonksiyonumuzu oluşturmaya adım adım başlayalım:
Bu sayede otomasyonumuz da bulunan butona tıklandığı zaman
- Otomasyona 1 öğrenci kayıt edildi.
- Otomasyona 2 öğrenci kayıt edildi.
- Otomasyona 3 öğrenci kayıt edildi.
şeklinde devam edecektir. Kodumuza genel olarak göz atmamız gerekirse,
Değişkenlerde Matematiksel İşlemler
Örneklerimize iki sayanın toplamasını yapacak şekilde devam edelim. Burada parametreler işin içine dahil olmakta, parametreler ise fonksiyon da bulunan parantez içerisine eklenmektedir. Örneklerle daha da net anlayacaksınız, ilk olarak fonksiyonumu oluşturuyorum
Gördüğünüz gibi Topla adında bir fonksiyon oluşturdum daha sonra sayi1 ve sayi2 adında iki farklı parametre ekledim. Sonuç adında bir değişken oluşturarak bu değişkenin değerine sayi1 ve sayi2'nin toplamını atamasını istedim, çıkan sonucu da ekrana yazdırdım.
Sıra geldi bu fonksiyonumu çağırmaya, bunun içince tekrar Jquery yardımıyla
Topla fonksiyonunu sayfa tamamen yüklendikten sonra ekrana yazdırmasını istedim. Burada bulunan 8 rakamı sayi1'in değeri, 12 rakamı ise sayi2'nin değeridir. İşlemin sonucu olarak kod çalıştığında ekrana 20 yazdıracaktır.
Genel kod yapımız şu şekilde oldu
Javascript ile Matematiksel İşlemler
Fark ettim ki bu zamana kadar Jquery'yi işin içine biraz fazla dahil ettim, hatamı şuan telifi etmek ve Jquery ile Javascript derslerini ayırma kararı aldım. Jquery her ne kadar işlemleri pratikleştirse de yeni başlayan arkadaşlarımızın bir karışık gözükecektir bu nedenle Javascript derslerimizde bundan sonra standart JS kodlarıyla devam edeceğiz.
Bu zaman kadar yaptığımız örnekler anlaşıldıysa devam edelim ve yeni bir örnek oluşturalım. Örneğimiz yüzde hesaplaması üzerine olsun, girilen bir sayının %40'ını almak istiyoruz ve kodumuzu oluşturmadan önce matematiksel olarak düşünüyoruz. Bir sayının yüzde 40'ını almak için farklı yollar var. Benim aklıma gelen ilk yöntem sayıyı 0,4 ile çarpmak oldu, işlemi halettiğime kodumu oluşturuyorum
Gördüğünüz gibi sayı adında bir değişken oluşturdum, değerini 230 olarak atadım daha sonra Javascript'in temel yazdırma kodu olan document.write ile ekrana sayı değerinin yüzde kırkını yazdırmasını istedim. Buna göre ekran çıktım 92 olmuş oldu. Bu değerimi 510 ile değiştirecek olursam ekran çıktım da 204 olarak değişecektir.
Orta Düzey Toplama İşlemi
Son örneğimizi bir adım daha zorlaştırmak istedim, bu sefer oluşturulan değişkenin değerini kendisiyle çarparak üzerine 50 ekleyen bir program yapmak istiyorum ve kodlarımı oluşturuyorum
Sayı adında bir değişken oluşturdum değerini 5 olarak atadım. Daha sonra sayıyı kendisiyle çarparak tekrar kendisine atadım yani 5 ile 5 çarpıldı sayı değişkenimizin değeri 25 oldu. Son adım olan ekrana yazdırma kısmında ise şuan ki değere 50 daha ekledim 25 + 50 yani ekrana 75 sonucunu yazdırmış oldu.
Bu dersimizin de sonuna geldik, kendi örneklerinizi oluşturarak pratik yapmayı unutmayın, takıldığınız yerleri muhakkak sorun hepinize iyi çalışmalar diliyorum.
Değişken Nedir?
Değişkenler, girilen veya alınan değerin geçici olarak tutulduğu yerdir. Kullanılacak değer için sürekli kod oluşturmaktansa değişken kullanarak bu alanlardan tasarruf edebiliriz. Diğer programlama dillerinde değişkenler veri türüne göre farklılıklar gösterebilirken Javascript'te standart şekilde oluşturulabilir. Yine diğer programlama dillerinde geçerli olan temel kurallar JS içinde geçerlidir.
Temel Değişken Oluşturma Kuralları
- Oluşturulan değişkene bir değer ataması yapılmalıdır, boş bırakılmamalıdır.
- Büyük / küçük harflere dikkat edilmesi gerekir.
- Değişken isimleri / adları rakamlarla başlayamaz.
- Standart JS, HTML vb. etiketler değişken ismi olarak kullanılamaz.
- Değişken isimlerinde özel karakter ve boşluk kullanılamaz.
- Değişken isimlerini oluştururken kesinlikle, Türkçe karakter kullanımında kaçının.
- Oluşturulan değişkene bir değer ataması yapılmalıdır, boş bırakılmamalıdır.
- Büyük / küçük harflere dikkat edilmesi gerekir.
- Değişken isimleri / adları rakamlarla başlayamaz.
- Standart JS, HTML vb. etiketler değişken ismi olarak kullanılamaz.
- Değişken isimlerinde özel karakter ve boşluk kullanılamaz.
- Değişken isimlerini oluştururken kesinlikle, Türkçe karakter kullanımında kaçının.
BURAYA DİKKAT var: Variable sözlüğünün kısaltmasıdır, Türkçe'de değişken anlamına gelmektedir. Javascript'te değişken oluştururken kullanılan anahtar kelime var'dır. Değişken ismi önüne eklemezseniz Javascript bu kodun değişken olduğunu algılayamaz.
Örneklerle Değişken İsimleri
Doğru Kullanım Örnekleri
- var ogrenciSayisi = 0;
- var pi = 3.14;
- var site = "WMArşiv";
- var karesi = 3;
- var telefon = 06984985898;
- var soyadi = 'Ateş';
Yanlış Kullanım Örnekleri
- var 2ogrenciSayisi = 4;
- var adınız = "Atakan";
- var adı soyadı = "Ali Veli";
- var sonuc? = 4;
- var KARESİ = 3;
- var ogrenciSayisi = 0;
- var pi = 3.14;
- var site = "WMArşiv";
- var karesi = 3;
- var telefon = 06984985898;
- var soyadi = 'Ateş';
Yanlış Kullanım Örnekleri
- var 2ogrenciSayisi = 4;
- var adınız = "Atakan";
- var adı soyadı = "Ali Veli";
- var sonuc? = 4;
- var KARESİ = 3;
Değişkenlerin nasıl oluşturulacağını ve hangi amaçla kullanıldıklarını anladığımıza göre devam edelim. Öncelikle temel HTML sayfamızı tekrar oluşturalım:
HTML:
<html>
<head>
<title>Javascript Ders 5 - WMArşiv</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
</body>
</html>
HTML:
<input type="button" value="Öğrenci Ekle">
<hr>
<h1>Otomasyona <span></span> öğrenci kayıt edildi.</h1>
HTML:
var ogrenciSay = 0;
function say(){
ogrenciSay += 1;
$('span').text (ogrenciSay);
}- var ogrenciSay = 0; // Bu satırda öğrenci sayımı için bir değişken oluşturduk ve değerini 0 olarak atadık.
- function say(){ // Say adında bir fonksiyon oluşturdum, süslü parantezimi açıp içerisine girdim.
- ogrenciSay += 1; // Butona her tıklanışta değerimin 1 artmasını istediğim için kendi değerine 1 eklettim. En üstte değerini sıfır olarak atadığımız bu değişken bu sayede butona her tıklandığında 1,2,3,4... şeklinde artacaktır.
- $('span').text (ogrenciSay); // Daha sonra biraz önce bahsettiğim span değerime şuan ki ogrenciSay değerini atadım. Span etiketinin text değerine ogrenciSay değişkenin değeri atanmış oldu. En sonda ise süslü parantezle kodumuzu sonlandırdık.
Değişken değerinin atamasını ve arttırılmasını yaptık şimdi ise bu değerin butona tıklanınca çalışmasını sağlamamız gerekiyor. Jquery yardımıyla bu kodumu oluşturuyorum:- function say(){ // Say adında bir fonksiyon oluşturdum, süslü parantezimi açıp içerisine girdim.
- ogrenciSay += 1; // Butona her tıklanışta değerimin 1 artmasını istediğim için kendi değerine 1 eklettim. En üstte değerini sıfır olarak atadığımız bu değişken bu sayede butona her tıklandığında 1,2,3,4... şeklinde artacaktır.
- $('span').text (ogrenciSay); // Daha sonra biraz önce bahsettiğim span değerime şuan ki ogrenciSay değerini atadım. Span etiketinin text değerine ogrenciSay değişkenin değeri atanmış oldu. En sonda ise süslü parantezle kodumuzu sonlandırdık.
HTML:
$(document).ready (function (){
$('input').click (function(){
say();
});
});- $(document).ready (function (){ // Sayfa tamamen yüklendikten sonra işlem yapması için temel olarak eklememiz gereken document.ready komutunu ekledim.
- $('input').click // Burada input nesnesine tıklandığı zaman işlem yapılmasını istedim. Büyük projelerde bu alanda id kullanılması gerekir ancak formumuzda tek bir tane buton olduğu için şimdilik bu duruma gerek duymuyoruz.
- say(); // Son olarak yukarıda oluşturduğumuz say fonksiyonun butona tıklandığı zaman çalışmasını talep ettik.
- $('input').click // Burada input nesnesine tıklandığı zaman işlem yapılmasını istedim. Büyük projelerde bu alanda id kullanılması gerekir ancak formumuzda tek bir tane buton olduğu için şimdilik bu duruma gerek duymuyoruz.
- say(); // Son olarak yukarıda oluşturduğumuz say fonksiyonun butona tıklandığı zaman çalışmasını talep ettik.
Bu sayede otomasyonumuz da bulunan butona tıklandığı zaman
- Otomasyona 1 öğrenci kayıt edildi.
- Otomasyona 2 öğrenci kayıt edildi.
- Otomasyona 3 öğrenci kayıt edildi.
şeklinde devam edecektir. Kodumuza genel olarak göz atmamız gerekirse,
HTML:
<html>
<head>
<title>Javascript Ders 5 - WMArşiv</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
var ogrenciSay = 0;
function say(){
ogrenciSay += 1;
$('span').text (ogrenciSay);
}
$(document).ready (function (){
$('input').click (function(){
say();
});
});
</script>
<body>
<input type="button" value="Öğrenci Ekle">
<hr>
<h1>Otomasyona <span></span> öğrenci kayıt edildi.</h1>
</body>
</html>Değişkenlerde Matematiksel İşlemler
Örneklerimize iki sayanın toplamasını yapacak şekilde devam edelim. Burada parametreler işin içine dahil olmakta, parametreler ise fonksiyon da bulunan parantez içerisine eklenmektedir. Örneklerle daha da net anlayacaksınız, ilk olarak fonksiyonumu oluşturuyorum
HTML:
function Topla(sayi1, sayi2) {
var sonuc = sayi1 + sayi2;
alert(sonuc);
}Sıra geldi bu fonksiyonumu çağırmaya, bunun içince tekrar Jquery yardımıyla
HTML:
$(document).ready (function() {
Topla(8,12);
});Genel kod yapımız şu şekilde oldu
HTML:
$(document).ready (function() {
Topla(8,12);
});
function Topla(sayi1, sayi2) {
var sonuc = sayi1 + sayi2;
alert(sonuc);
}Javascript ile Matematiksel İşlemler
Fark ettim ki bu zamana kadar Jquery'yi işin içine biraz fazla dahil ettim, hatamı şuan telifi etmek ve Jquery ile Javascript derslerini ayırma kararı aldım. Jquery her ne kadar işlemleri pratikleştirse de yeni başlayan arkadaşlarımızın bir karışık gözükecektir bu nedenle Javascript derslerimizde bundan sonra standart JS kodlarıyla devam edeceğiz.
Bu zaman kadar yaptığımız örnekler anlaşıldıysa devam edelim ve yeni bir örnek oluşturalım. Örneğimiz yüzde hesaplaması üzerine olsun, girilen bir sayının %40'ını almak istiyoruz ve kodumuzu oluşturmadan önce matematiksel olarak düşünüyoruz. Bir sayının yüzde 40'ını almak için farklı yollar var. Benim aklıma gelen ilk yöntem sayıyı 0,4 ile çarpmak oldu, işlemi halettiğime kodumu oluşturuyorum
HTML:
var sayi = 230;
document.write(sayi * 0.40);Orta Düzey Toplama İşlemi
Son örneğimizi bir adım daha zorlaştırmak istedim, bu sefer oluşturulan değişkenin değerini kendisiyle çarparak üzerine 50 ekleyen bir program yapmak istiyorum ve kodlarımı oluşturuyorum
HTML:
var sayi = 5;
sayi = sayi * sayi;
document.write(sayi + 50 );Bu dersimizin de sonuna geldik, kendi örneklerinizi oluşturarak pratik yapmayı unutmayın, takıldığınız yerleri muhakkak sorun hepinize iyi çalışmalar diliyorum.