Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Jquery Değişkenler

No description
by

Mehmet KÜPELİ

on 2 March 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Jquery Değişkenler

Jquery Bölüm 3
Büyük Küçük Harf
<html>
<body>
<script language="JavaScript">
benimDegiskenim
= 21;
alert(
benimDegiskenim
);
benimdegiskenim
= 213;
alert(
benimDegiskenim
);
</script>
</body>
</html>
Noktalı Virgül ve alert()
JavaScript’te satır kodlaması “;” yani noktalı virgül ile biter. alert()
fonksiyonu, parametre olarak verilen değeri ekranda bir
pencere stilinde gösterir.
Değişkenler ve "Var" Tanımlaması
<html>
<body>
<script language="JavaScript">
degisken = 5.67;
alert(61 * degisken);
degisken = 234 /119;
a = "abc";
var b = true;
</script>
</body>
</html>
Değişkenler
Değişkenler, ana hafızada programın çalışma esnasında değerleri saklayan alanlardır.

Saklanan alanlara, değerleri, eşittir işareti ile atayabiliyoruz.

Değerleri de daha önce tanımladığımız değişken ismiyle çağırabiliyoruz.

JavaScript programcısı veri tipiyle ilgilenmez, çünkü JavaScript bu işlemi otomatik yapmaktadır.

Bunun avantajı olduğu gibi çok büyük dezavantajı da vardır.
Yandaki kodlarda ekrana iki kez 21 rakamı geldi bunun sebebi JavaScript'in büyük ve küçük harf yazımına dikkat etmesidir.
Google Chrome Örneği
JavaScript’te değişkenlere istediğimiz değerleri atayabildiğimizi gördük.
Değişken atamalarında matematiksel işlemler yaparak da değişken tanımlanabilir. “var” tanımlaması bir değişkenin değişken olduğunu tanımlar. “var” kullanılmadan yapılan tüm değişken tanımlamaları JavaScript dünyasında genel değişken olarak algılanır. Fonksiyon içerisinde “var” sözcüğü kullanılmadan yapılan bir tanımlama o değişkenin genel bir değişken olduğunu gösterir. Başka programlama dillerinde bu böyle değildir, fonksiyon içerisinde yapılan tanımlamalar sadece fonksiyon içerisinde kalmaktadır. “var” sözcüğüyle bunu değiştirebiliyoruz ve değişkenin sadece fonksiyona ait olduğunu söylemiş oluyoruz.
Diziler (Arrays)
Dizi,
bir çok veri tipinin bir değişkende tutulması ve verilere bir indeks ile erişim
sağlanan mekanizmadır.
Jquery Bölüm 3
Kodlar
JavaScript’te bir değişken tanımlarken bir isim ve eşitlik işaretinin sağ tarafına
değerini yazarız.

Dizilerde ise değişken adını yazdıktan sonra eşitliğin sağ tarafına “new Array()” yazarak bunun bir dizi olduğunu belirtmiş oluruz.

document.write() fonksiyonu tarayıcıya bir metin yazmak istediğinizde kullanacağınız bir fonksiyondur.


NOT: Diziler "0" sıfırdan başlamaktadır. Eleman dizilimi 0,1,2,3... şeklindedir.

Dizi Örneği
<html>
<body>
<script language="JavaScript">
a = new Array(10);
a[0] = 1;
a[1] = 2;
alert(a.length);
i = 0;
while(i < a.length) {
document.write(a[i] + "<br>");
i++;
}
</script>
</body>
</html>
Diziler (Arrays)
a = new Array(10) a adında 10 luk bir dizi yaptık

lenght() dizinin boyutunu sayısal olarak vermektedir.

İlk değeri "1" ikinci değeri "2" olarak atadığımız için tarayıcıda 1,2 geri kalan elemanları atamadığımız için undefined (tanımlı değil) yazısı gelmiştir.

NOT: Eğer a[20]=10 gibi bir tanımlama yapsaydık dizinin boyutu 10 olarak tanımlamamıza rağmen 21 olacaktı.
Dizi Örnek
<html>
<body>
<script language="JavaScript">
dizi = new Array();
document.write(dizi[0]);
dizi[0] = 5;
document.write(dizi[0]);
dizi[0] = "Kalem";
document.write(dizi[0]);
</script>
</body>
</html>
Operatörler
Bir değişkene değer atanmak isteniyorsa atama operatörü kullanılır. İşlem "=" işaretyle yapılır
Tarayıcı Çıktısı
Atama Operatörü
Büyük, Küçük ve Eşitlik Operatörleri
> Büyük >= Büyük ve Eşit
< Küçük <= Küçük ve Eşit
== Eşit
!= Eşit Değil

Jquery Bölüm 3
Operatörler Tablosu
Aritmetiksel Operatörler
Aritmetiksel Operatörler
Aritmetik Operatörlerde;

Toplama "+"
Çıkarma "-"
Çarpma "*"
Bölme "/"
Modül "%"

işaretleri ile yapılır.
Operatör Örnek
<html>
<body>
<script language="JavaScript">
abi = 34;
abla = 32;
ben = 25;
if (abi > 17) {
document.write("Abim araba surebilir");
document.write("<br>");
}
if (abi >= 18) {
document.write("Abim araba surebilir");
document.write("<br>");
}
Aritmetiksel Operatörler
if (abla < abi) {
document.write("Ablam, abime abi diyecek");
document.write("<br>");
}
if (ben == 15) {
document.write("Ben en ufagim");
document.write("<br>");
}
if (ben != 18) {
document.write("Ben araba suremem");
document.write("<br>");
}
</script>
</body>
</html>
Tarayıcı Çıktısı
Artırma, Eksiltme ++,--
Toplama, Çıkartma +,-
Bit Tümleme ~
Logik Tümleme !
Çarpma, Bölme, Kalan *,/,%
Metinleri Birleştirme +
Sola Kaydırma <<
Sağa Kaydırma >>
Nümerik Eşitleme <, <=, >, >=
Esitlik, Eşit Değil ==, !=
Bit Düzeyinde Ve İşlemi &
Bit Düzeyinde Xor ^
Bit Düzeyinde Veya İşlemi |
Logik Ve İşlemi &&
Logik Veya ||
Atama İşlemi =
Sayısal değerler arasında hesaplamalar yapabilmek için aritmetiksel operatörlere ihtiyaç duyarız.
JavaScript’te, operatörlerle farklı kombinasyonlu işlemlerde yapabilirsiniz.
Örnek
a+=2 dediğimizde a=a+2 gibi işlem uygulanır.
Ayrıca JavaScript parantezleri otomatik olarak uygulamaktadır.
Örnek
a*=3+5 dediğimizde JavaScript bunu a=a*(3+5) şeklinde yorumlar.
Jquery Bölüm 3
Aritmetiksel Operatörler
Aritmetiksel Operatörler
Mantıksal Operatörler
Aritmetiksel Operatörler
Mantıksal Operatörler
Değişkenleri artırmak ve eksiltmek programcının en çok yaptığı işlemlerden biridir.
Ve şu şekilde yapılmaktadır.
i++; i = i + 1 Artırma İşlemi

j--; j = j – 1 Eksiltme İşlemi
"++" ve "--" işaretlerinin bir diğer önemli yanı ise bu işaretleri değişkenden öncemi sonramı yazdığımızdır.
"++x"de değer önce artar sonra işlem görür.
"x++"da ise önce işlem görür sonra artar.
Örnek
x = 3

c = x++ Burada x önce c ye atanır sonra değeri artar. (c=3, x=4)

c = ++x Burada x önce 1 artar sonra c ye atanır. (c=4 x=4)

Birden çok şartı tanımlanmış kalıplar doğrultusunda bağlamak istiyorsanız bu operatörleri kullanmanız gerekmektedir.
Ve "&"
Veya "|"
Xor "^"
Değil "!"
Xor: İki tanımlamada true ya da false ise bu işlem bize false sonucu verir. Diğer durumlarda true değerini iletir.

Ve: Tanımlamalardan birisi false ise sonuç false olur. Diğer durumlarda true.

Veya: Tanımlamalardan birisi true ise, sonuç true olur. Diğer durumlarda false.

Değil: Tanımlamanın tersidir.
Jquery Bölüm 3
Mantıksal Operatörler
JavaScript Açıklamalar
JavaScript Açıklamalar
Mantıksal Operatörler
If ve Switch Karar Yapıları
<html>
<body>
<script language="JavaScript">
document.write(true | false);
document.write("<br>");
document.write(true & false);
document.write("<br>");
document.write(!false);
document.write("<br>");
document.write(true ^ false);
document.write("<br>");
document.write(1 | 3);
document.write("<br>");
</script>
Not:Dikkat ettiyseniz true false işlemlerinde
1 ve 0 sonucu oluşmaktadır. Bunun sebebi
bu işlemler bit işlemleri olduğu için bu sonuçlar oluşmaktadır. 1 true , 0 false demektir.
Önceki örnekte 1 ile 3 sayılarını Veya işleminden geçirince neden 3 olmaktadır?
1 sayısı, 2 tabanlı sayı sistemine göre “01” şeklinde ifade edilir.
3 sayısıda, “11” şeklinde ifade edilir.
0 bilgisayar dilinde false, 1 ise true değerini alır.
Böylece 1, sayısını “false true” şeklinde hayalimizde düşünecek olursak,
3 sayısını “true true” olarak düşünebiliriz.
1 sayısındaki ilk değer olan false ile 3 sayısındaki ilk değer olan true değerlerini Veya işleminden geçirdiğimizde true değerini alacağız.
Yine 1 sayısındaki true değeriyle, 3 sayısındaki ikinci değer olan true değerini Veya işleminden geçirecek olursak sonuç true olacaktır.
Yani 1 ile 3 sayısının Veya işleminden bize “true true” gibi bir ifade çıkacaktır.
Bunun sonucu “11” olacaktır. “11” olan ikilik sayı sistemini 10 tabanındaki bir
sayı sistemine çevirecek olursak bize 3 rakamını verecektir.
JavaScript kodlarında 2 şekilde açıklama yapabiliriz.

Birincisi "//" işareti kullanarak sadece o satıra geçerli açıklamalar.

İkincisi “/* */” aralığında yapılmaktadır.

Bu açıklama türüyle daha çok satırda açıklama yapabilirsiniz ve her satır için “//” işareti tanımlamanız gerekmemektedir.
// Bu bir aciklamadir

/*
document.write(4);
document.write("<br>");
*/
Açıklama Örneği
If Türkçe olarak "eğer" demektir. Programınızda "eğer şu olursa şunu yap"
gibi direktif vermek isteyebilirsiniz.
Bunun içinde if ve switch karar yapılarını kullanabilirsiniz.

Jquery Bölüm 3
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}
if(a != 20) {
document.write("a degiskeni 20 sayisina esit degil");
document.write("<br>");
}
</script>
</body>
</html>
If Else
Çoğunlukla if yapısı, else yapısıyla birleştirilir. “else” Türkçe olarak “değilse” manasını taşımaktadır.

“Eğer ….. yap, değilse ….. yap” gibi düşünebilirsiniz.

Daha da genişleterek, “Eğer ….. yap, değilse eğer ….. yap,
değilse …. yap” seklinde de bir yapı genellikle kullanılmaktadır.
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10) {
document.write("a degiskeni 10 sayisindan kucuk");
document.write("<br>");
}else
if (a > 10) {
document.write("a degiskeni 10 sayisindan buyuk");
document.write("<br>");
}else {
document.write("a degiskeni 20 sayisina esit");
document.write("<br>");
}
</script>
</body>
</html>
Birden çok kıyaslama işlemini birleştirmek istersek yardımımıza “&&” ve “||” işaretleri koşmaktadır.
<html>
<body>
<script language="JavaScript">
a = 9;
if (a < 10 && a > 5) {
document.write("a degiskeni 10 sayisindan kucuk"+
" ve 5 sayisindan buyuk");
document.write("<br>");
}
if (a > 10 || a < 20) {
document.write("a degiskeni 10 sayisindan buyuk"+
" ya da 20 sayisindan kucuk");
document.write("<br>");
}
</script>
</body>
</html>
“&&” işareti iki kıyaslamanın arasına “ve” bağlacı koymaktadır.
“||” işareti iki kıyaslama arasına “ya da” bağlacı koymaktadır.
Jquery Bölüm 3
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
If ve Switch Karar Yapıları
Döngüler
Switch
“switch” işlemi,” if” işlemine bir alternatiftir. Bazı durumlarda “switch” kullanmak daha kolaydır.
JavaScript, switch ile başlayan cümlelerde sırayla tüm case bloklarını taramaktadır.

Eğer uyan bir case bulursa, bu bloğun içerisindeki kodu break ifadesini buluncaya kadar işleme sunmaktadır.

break ifadesini kullanmazsak, bir sonraki case bloğu otomatikman işlem görmektedir.
Bir sonraki case ifadesinin doğru ya da yanlış olması bu durumda hiç önemli değildir.

switch işlemlerinin if karar yapısına göre en büyük dezavantajı esnek olmamasıdır ve sadece tek bir değeri kıyaslamasıdır.

Mesela if karar yapısında bir değişken aralığını kontrol edebilirken switch yapısında böyle bir olanağınız yoktur.

1 ile 100 arasındaki tüm sayıların bir değişkenden küçük mü değil mi olduğunu kontrol edebilmek için switch yapısında aralıkta bulunan tüm sayıları kod halinde teker teker yazmalısınız.
<html>
<body>
<script language="JavaScript">
a = "Veli";
switch (a) {
case "Ali" : document.write("Ali" + "<br>");
break;
case "Veli" : document.write("Veli" + "<br>");
break;
case "Selami" : document.write("Selami" + "<br>");
break;
case "Hayri" : document.write("Hayri" + "<br>");
break;
default: document.write("Isimsiz Kahraman" + "<br>");
}
</script>
</body>
</html>
While Döngüsü
while döngüsüne girilmeden önce, döngü önermesi kontrol edilmektedir.
Eğer döngü önermesi doğru ise, döngü bloğu işlenmektedir, değilse döngü sona erdirilmektedir. if önermelerinde olduğu gibi döngü önermesi true olmalıdır.
Jquery Bölüm 3
Döngüler
Döngüler
Döngüler
Döngüler
Döngüler
<html>
<body>
<script language="JavaScript">
i = 0;
while(i < 10) {
document.write(i + "<br>");
i++;
}
</script>
</body>
</html>
Do-While Döngüsü
Bu döngüde , önerme döngü sonunda kontrol edilir. Bu yüzden döngü içerisindeki blok bir kere mutlaka işlem görmektedir.
<html>
<body>
<script language="JavaScript">
i = 50;
do {
document.write(i + "<br>");
i++;
}
while(i < 40);
</script>
</body>
</html>
Dikkat edilmesi gereken önemli husus ise,
döngünün sonunda noktalı virgülü unutmamamız.
For Döngüsü
while döngüsünün özelleştirilmiş halidir. Daha çok sayaçlı işlemlerde kullanılmaktadır.
<html>
<body>
<script language="JavaScript">
for (i = 1; i <= 10; i++)
document.write("Sayi: " + i + "<br>");
</script>
</body>
</html>
Jquery Bölüm 3
Döngüler
Döngüler
Döngüler
Döngüler
Fonksiyonlar
For döngülerin avantajları kendisini dizilerde göstermektedir.
<html>
<body>
<script language="JavaScript">
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i = 0; i < firma.length; i++){
document.write(firma[i]);
}
</script>
</body>
</html>
Dizilerle çalısan for döngüleri için kolaylık olması açısında bir operatör vardır. Bu operatör "in" operatörüdür.
<html>
<body>
<script language="JavaScript">
firma = new Array();
firma[0] = "Teneke Fabrikasi<br />";
firma[1] = "Kaporta sokaka 32<br />";
firma[2] = "42123 Konya<br />";
firma[3] = "Telefon: 0332393202322";
for(i
in
firma){
document.write(firma[i]);
}
</script>
</body>
</html>
i değişkeninden sonra in operatörü kullanıyorsunuz ve ondan sonrada hangi diziyi döngü içerisinde işleme sokacaksanız onu tanımlıyorsunuz. Bu kullanım tarzı for döngüsü sadece dizilerle kullanılacaksa geçerlidir.
Break ve Continue
Herhangi bir döngü içerisinde break komutu kullanılırsa, program döngünün o noktasından sonra çıkar ve döngüden sonraki koda geçer.
<html>
<body>
<script language="JavaScript">
i = 10;
while (true) {
if (i < 0) {
break;
}
document.write(i+"<br>");
i--;
}
</script>
</body>
</html>
Herhangi bir döngü içerisinde belirli bir noktadan sonraki kısmın işlev görmesini istemiyorsak ve döngünün buna rağmen dönmesini istiyorsak "continue" komutunu kullanırız.
<html>
<body>
<script language="JavaScript">
for (i = 0; i <= 10; i++) {
if ((i % 2) == 1)
continue;
document.write(i + " sayisi cift "+
"sayidir" +"<br>");
}
</script>
</body>
</html>
if yapısından sonraki blok tek satırlık bir kod ise “{}” parantezlerini koymaya gerek yok, birden fazla satırsa mutlaka “{}” parantezlerini kullanmalıyız.
Muhtemelen program parçanızda birkaç adımınız vardır ve bu adımları birleştirerek bir isim altında toplamak isteyebilirsiniz.

JavaScript’te de diğer programlama dillerinde olduğu gibi bunun için fonksiyonlar vardır.

Aynı program parçalarını tekrar tekrar kodlamak yerine fonksiyonları kullanmak daha avantajlıdır.

Böylelikle fonksiyon içerisinde yapmak istediğimiz değişiklik, fonksiyon çağrıldığı tüm bölümlerde etkinliğini
göstermiş olur.

Bir fonksiyon birden fazla bilesenden oluşmaktadır. Fonksiyon başı ve fonksiyon bloğu ana bileşenlerdir. Fonksiyon, fonksiyon başı, sonuç tipi, fonksiyon ismi ve parametre listesinden oluşmaktadır.
Jquery Bölüm 3
Fonksiyonlar
Fonksiyonlar
Fonksiyonlar
Fonksiyonlar
Fonksiyonlar
<html>
<body>
<script language="JavaScript">
function test() {
document.write("Selam ne haber");
}
test();
</script>
</body>
</html>
Fonksiyonların en büyük avantajı karmaşık kod parçalarını tek bir isim altında toplamasıdır.
Fonksiyonlarda Parametre Kullanımı
Fonksiyonlarımızda parametre kullanabiliriz. Parametreleri de fonksiyon içerisinde işleve sokabiliriz.
<html>
<body>
<script language="JavaScript">
function topla(a, b) {
document.write(a+" ve "+b+" sayisinin toplami :"+(a+b));
}
topla(5,6);
</script>
</body>
</html>
a ve b değiskenlerini toplarken parantez içerisinde topladım, çünkü parantez kullanmasaydım, write()
fonksiyonu bu iki değişkeni String olarak algılayacaktı ve 11 sayısı yerine 5 ve
6 sayısının yan yana gelmesinden olusan 56 sayısını gösterecekti.
Fonksiyonlarda parametrik olarak verilen değişkenler sadece o fonksiyon için geçerlidirler. Genel değişkenler gibi her tarafta kullanılamazlar.
<html>
<body>
<script language="JavaScript">
a = 10;
function deger(a) {
document.write("a degiskeninin fonksiyon icindeki degeri: " + a + "<br>");
}
document.write("a degiskeninin fonksiyon oncesi degeri: " + a + "<br>");
deger(2);
document.write("a degiskeninin fonksiyon sonrasi degeri: " + a + "<br>");
</script>
</body>
</html>
Return
Bir fonksiyonun değeri return anahtar kelimesiyle iletilmektedir.

Fonksiyon içerisinde yaptığınız işlemlerin sonucunu return anahtar kelimesinden sonra yazın ve noktalı virgül ile kapatın.

Bu fonksiyonun değeri olmuş oluyor.

Fonksiyonun değerini, fonksiyon dışında kullanmak isterseniz, bir değişkene fonksiyonu atamanız yeterlidir.
<html>
<body>
<script language="JavaScript">
function modlama(a, b) {
return a % b;
document.write("Gereksiz bir yazi");
}
deger = modlama(17, 6);
document.write(deger);
</script>
</body>
</html>
return anahtar kelimesi çağrıldıktan sonra fonksiyondan çıkılır. Yandaki örnekte de gördüğünüz gibi return işleminden sonraki satır işlem görmemektedir, çünkü fonksiyon matematiksel işlemi değer olarak iletmektedir ve fonksiyondan çıkılmaktadır.
Jquery Bölüm 3
Kendini Çağıran Fonksiyon
Eventhandler
Eventhandler
Fonksiyonlar
Form ve Eventhandler
Kendini Çağıran Fonksiyon
<html>
<body>
<script language="JavaScript">
i = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
}
islem(100);
</script>
</body>
</html>
<html>
<body>
<script language="JavaScript">
i = 1;
j = 1;
function islem(son) {
if(i < son) {
i=i+i;
islem(son);
}
else
document.write("sonuc: " +
": " + i + "<br />");
document.write(j+++". fonksiyondayim");
document.write("<br>");
}
islem(100);
</script>
</body>
</html>
Tarayıcınızda fareyi hareket ettirmeniz ya da bir tuşa basmanız tarayıcınız tarafından bir olay olarak algılanır. Bu tür olayları JavaScript’te kullanabilirsiniz. Bu mekanizmaya Eventhandler adı verilir.
Eventhandler, on ön ekiyle başlar ve hangi olayla bağlantı kurulacaksa o olayın
İngilizce kelimesiyle devam eder. Mesela onload, yüklenince manasına
gelmektedir ya da onmousedown, fare düğmesine basılınca anlamı taşımaktadır.
<html>
<script language="JavaScript">
function resimcerceve(){
document.resim.border=9;
}
function resimcerceveyok() {
document.resim.border=0;
}
</script>
<body>
<h3>Fareyi resime hareket ettirin</h3>
<a href="#" onMouseOver="resimcerceve()"
onMouseOut="resimcerceveyok()">
<img src="turkiye.jpg" name="resim" border="0" /></a>
</body>
</html>
<html>
<script language="JavaScript">
function aktif(metin) {
document.getElementById("bilgi").innerHTML=metin;
}
function pasif() {
document.getElementById("bilgi").innerHTML="";
}
</script>
<body>
<form>
Kullanici Adi:
<input type="metin" name="userid"
onFocus="aktif('Kullanici adinizi girin')"
onBlur="pasif()">
<br>
Sifre:
<input type="password" name="pw"
onFocus="aktif('Sifrenizi girin')"
onBlur="pasif()">
</form>
<div id="bilgi"></div>
</body>
</html>
NOT: Eventhand'i her tarayıcı desteklemez eğer sayfaya Eventhandler eklerseniz tüm tarayıcılarda deneyiniz.
Full transcript