Javascript Nedir?

01-12-2008, 03:02 PM

JAVASCRIPT NEDİR?

Bu bağlantıyı tıkladığınıza göre artık şu işi kes-yapıştırdan ileri götürmek istiyorsunuz. Bizim de amacımız bu. Size JavaScript'in genel özelliklerini ana hatlarıyla vermek. Bundan sonrası size kalmış. Genel yazım kurallarını öğrendikten sonra yapılabilecek en güzel şey diğer web-cilerin yazdıkları javascript kodlarını incelemektir. Herhangi bir problemle karşılaştığınızda bizden de yardım alabilirsiniz. Bu konu ile ilgili olarak maillerinizi bekliyoruz.
Gelelim JavaScript'in genel bazı özelliklerine. Başlangıçta bazı konulara açıklık getirelim. Java ile JavaScript oldukça fazla derecede karıştırılmakta. Java Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir. Sonuçta tarayıcıdan bağımsız bir program elde edersiniz. Yani bir exe veya com uzantılı dosya vardır elinizde. Fakat JavaScript bu tür bir programlama dili değildir. Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Html dosyasını içine gömülüdür. Sonuçta elinizde exe veya com uzantılı bir dosya yoktur. Javascript , Netscape firması tarafından
C dilinden esinlenilerek yazılmıştır. Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir. Yani ziyaretçi ile etkileşim gibi önemli unsurlar Html'de yok veya oldukça az kapasitede diyebiliriz. Netscape firması bu konuya ağırlık vererek JavaScript script dilini internet ortamına kazandırmıştır.
Gelelim Netscape ve Internet Explorer tarayıcılarının JavaScript kodundaki farklı anlayışa. Bu gerçekten doğrudur. Netscape firması JavaScript dilini hazırladığında Microsoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzden biz JavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Fakat bu her kodda karşımıza çıkmaz. Biz derslerimizde gerektiği yerde bu konuya yer vereceğiz.

JAVASCRIPT'İN GENEL ÖZELLİKLERİ

1. Javascript kodlarını yazmak için Windows kullanıcıları için NotePad, Mac. kullanıcıları için Simple Text yeterlidir.
2. JavaScript kodları --> etiketi ile biter.
3. <script> etiketi JavaScript'i anlamayan eski sürüm tarayıcıların bu kısmı geçmeleri içindir.
4. Genellikle yazım tarzı şu şekildedir:
<script>

</script>
5. İyi bir programcı kod satırlarında açıklama yapar. Bu satır şu işlemi gerçekleştiriyor gibi açıklayıcı bilgiler yazar kodlarının yanına. JavaScript'te bu tür açıklama // ile başlar ve // ile biter. Eğer açıklamanız bir satırdan fazla ise /* ile başlar */ ile biter.
// bu satır kullanılacak değişkenlerin tanımlanması içindir.
/* açıklama satırı; 1
açıklama satırı 2
açıklama satırı 3 */
6. JavaScript kodları Html kodların arasında yer alır. Veya uzantısı js olan dosyalarda saklanarak yine Html içerisinden çağırılır. Java Appletleri gibi Html'den ayrı bir unsur değildir. Javascript Html'in bir parçasıdır.
7. Kullanılacak yere göre Html'in içerisinde kullanılır. Fakat genelde <head>...</head> etiketleri arasında kullanılır.
8. Javascript kodları bittiğinde elinizde asla kendi başına çalışan uzantısı exe veya com olan bir dosya olmaz. Her zaman için tarayıcı tarafından yorumlanması gerekir. Yorumlanması demek Javascript kodunun çalışması anlamındadır.
9. Nesne ve buna uygulanan olaylar ile ilgili bir takım görevleri vardır. Javascript kullandığı her unsuru nesne olarak algılar. Siz bu nesneleri tıklamak, üzerine gelmek, üzerinde çıkmak gibi olaylar ile çalıştırırsınız ki bu da Javascript'in ziyaretçi ile etkileşmesi demektir.
10. Genel öğrenim yapımız diğer programlama dillerine nazaran biraz farklı olacaktır. Bu Javascript'in bir script dili olmasında ileri gelir.

DEĞİŞKENLER

Genel Değişken Özellikleri:
Değişkenler Javascript'te ve diğer programlama dillerinde olduğu gibi bilgi depolamak bu bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" komutu ile oluşturulurlar. Karakter olarak kullanıldıklarında işlem yapılamazlar. Nümerik olarak kullanıldıklarında ancak işlem yapabilirler. Kullanımına bir örnek verelim. Örnek:
var sayi;
var sayi1=10;
var yazi1="10";
Burada birinci satırdaki "sayi" değişkeni script kodunun herhangi bir yerinde kullanılmak üzere oluşturulmuştur. İkinci satırda "sayi1" adındaki değişkenin değeri hemen o satırda = ifadesinden sonra verilmiştir. Böyle değişken tanımıda yapılabilir. Üçüncü satırda ise değişkenin karakter ifadesi olarak kullanımını görüyoruz. Burada önemli olan karakter değişkenlerin alıntı " " ifadesinin arasında kullanılmasıdır. Her değişkenden sonra ; işareti konulmalıdır. Tarayıcı, bir başka komut satırına geçtiğini bu yol ile anlar.
Şimdi değişkenlerle ilgili matematik işlemlerinin nasıl olacağını görelim. Bunu daha iyi açıklayabilmek için örnekler üzerinde çalışalım. Örnek:
var sayi1=10;
var sayi2=20;
var sayi3=sayi1+sayi2;
Birinci ve ikinci satırlarda değişkenler oluşturduk. Üçüncü satırdaki ise sayi3 değişkeni ile diğer iki değişkeni topladık. Burada önemli olan işlem yapmak istediğimizde değişken değerinin alıntı " " işaretlerinin arasına konmamasıdır. Üçüncü satırı - ileride göreceğimiz write () fonksiyonu ile - tarayıcıda yazdırırsak göreceğimiz değer 30'dur.
Şimdi de değişkenleri karakter olarak tanımladığımızda neler olduğuna bakalım.
var sayi1="10";
var sayi2="20";
var sayi3= sayi1+sayi2;
Bir önceki örnekten farklı olarak değişken değerlerinin alıntı işaretleri içerisinde yazdık. Eğer sayi3 adlı değişkeni tarayıcıda bastırırsak göreceğimiz ifade 1020 ifadesidir. Yani tarayıcı karakter olarak tanımladığımız değişkenleri ardada ekledi. Burada unutulmaması gereken şey bunun sadece + işleminde geçerli olmasıdır. Diğer işlem türlerinde bu tür bir sonuç alınamaz.

Değişkenlere Ad Verirken Uymamız Gereken Kurallar:
1. Değişken isimleri harf veya _ karakteri ile başlayabilir. Rakam kullanmak istersek 2. karakterden sonra kullanabiliriz. Yani değişkenin ilk karakteri rakam olamaz.
Değişken isimlerine örnekler;
var url="netyardim"; doğru
var _rakam=12; doğru
var a1=123; doğru
var 3uzler="üçüzler" yanlış
2. Değişken tanımlarken bir veya birden fazla boşluk bırakmak tanımlama açısından herhangi bir sorun teşkil etmez.
3. Değişken adı verirken kullandığımız harflerin büyük veya küçük olması bazı tarayıcılarda fark etmezken çoğu tarayıcıda farklı bir değişken anlamındadır.
var say=1;
var Say=1;

Farklı değişkenler olarak algılanır.
Değişkenlerin İşlem Operatörleri İle Kullanımı:
Değişkenlere işlem yaptırabilecek operatörleri ve özelliklerini inceleyelim. Operatörleri birkaç kısıma ayırarak inceleyelim;
1. Aritmetik operatörler
2. Karşılaştırmak operatörleri
3. Mantıksal operatörler
4. Özel operatörler

Aritmetik Operatörler:Her zaman kullandığımız bu operatörler + , - , * , / , % 'dir.Değişkenlerin çeşitli aritmetik operatörlerle kullanımına bir örnek verelim.
var i=10;
var j=11;
var k=12;
var m,n;
m=i*j+k;
n=i*(j+k);
Şimdi örneğimizi inceleyelim:
İlk üç satırda değişkenlerimizi hem tanımlayıp hem de değer atadık. Dördüncü satırda ise m ve n değişkenlerini tanımlayıp değer atamdık. Diğer satırlarda ise m ve n değişkenlerinden istenen işlemleri tanımladık. Buna göre son iki satırın sonuçları farklıdır. Çünkü parantezlerin işlem önceliği vardır.
Beşinci satırın cevabı (10*11)+12 = 122 şeklinde olacaktır. Son satırda ise sonuç 10*(11+12) = 230 olacaktır. Diğer bir işlem operatörü olan % 'nin yaptığı işlemi şu şekilde anlatabiliriz.% operatörü % işaretinin solundaki değişkeni sağındaki değişkene böler ve kalanı verir. Örnek olarak;
var a=100; var b=9; var c=100%9;

Burada c değişkenin değeri 100/9'un kalanı 1'dir. Yani c değişkeninin değeri 1 olacaktır. Diğer -(eksi) ve / (bölme) operatörlerinin işlemleri kendilerine atanan çıkartma ve bölme işlemidir.Bu operatörlerin kısa kullanımı içinde Javascript bize kolaylık sağlar. Bu operatörleri sıralamak istersek;
-= : *= : /= : %= : ++ : --
Bu operatörlerin kısa uzun şekilde yazılışları ise;
x+=y x=x+y
x-=y x=x-y
x*=y x=x*y
x/=y x=x/y
x%=y x=x%y
x++ x=x+1
x-- x=x-1
şeklindedir.
Bu operatörlerin nasıl işlem yaptığını bir örnekte görelim.
var x,y,z;
x=10; y=20; z=30;
x++; x+=y; z--; y*= z;
Şimdi her zamanki gibi işlem satırlarının cevaplarını birlikte bulalım.
x++ satırı x=x+1 işleminin yapılmasını söyler. Buna göre x değişkeni 11 değerini alır.İkinci satıra geldiğimizde x+=y satırı x=x+y işleminin yapılmasını söyler. Bir önceki satırdaki x'in değeri 11 idi. Böylelikle yeni x'in değeri 11+20=31 olacaktır. Diğer satırda z-- işlemi sonucunda z'nin değeri 29 olacaktır. Son satırda ise y=y*z işlemi ile y değişkeni 20*29= 380 değerini alacaktır.
Karşılaştırma Operatörleri:
Bu operatörler değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılır.
== operatörü iki değişkenin birbirine eşitliğini kontrol eder.
!= operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır.
< operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin sağdakinde küçüklüğünü kontrol eder.
<= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder.
> soldaki değişkenin sağdaki değişkene göre büyük olup olmadığını kontrol eder.
>= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder.

Mantıksal Operatörler:
Bu tip operatörler iki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır.
Operatörler && , || , ! operatörleridir.
&& And (ve) operatörü iki değişkenin de değeri doğru olması istendiğinde kullanılır.
|| Or (veya) operatörü iki değişkenden en az birinin doğru olması durumu istediğinde kullanılır.
! Not (değil) operatörü değişkenin değeri doğru ise yanlış , yanlış ise doğru olması istendiği durumlarda kullanılır.
Özel Karşılaştırma Operatörü:
Bu operatör iki değişken arasında karşılaştırma yapmanın en sade ve kısa yoludur.
Operatörün kullanım biçimi :
deðiþken_1 [istenen karþýlaþtýrma operatörü] deðiþken_2 ? deðiþken_3 : deðiþken_4
Bunu bir örnekle açıklayalım.
Değişkenleri var ile tanımladığımızı farz ediyorum. Buna göre;

a < b ? c : d
Yukarıdaki satırda yapılması istenen işlem;
a değişkeninin b değişkeninden küçük olup olmadığı karşılaştırılıyor. Buna göre cevap doğruysa işlemin sonucu c değişkeninin değeri değilse d değişkeni oluyor.
Şimdi tüm bu öğrendiklerimizi bir Javascript kodunda görelim. Bu bizim ilk Javascript kodumuz olacak. Örnek :
<script Language="JavaScript 1.2">

</script>
Şimdi bu kodları inceleyelim. Değişken tanımlama kısmının anlaşıldığını varsayarak geçiyorum. Anlamadığınız bir kısım varsa 1. Değişkenler kısmına tekrar geri dönün.

If (ie4) ve if (nn4)

Burada ileriki derslerde öğreneceğimiz koşul ifadesini kullanıyoruz. Bu kodları Javascript'in anlayış tarzı şu şekilde olacaktır. Eğer nn4 , ie4 değişkenlerinden doğru olanı ie4 ise -ki bunu true ve false değerlerinden algılar- alt satıra geçip ona uygun kodu uygulayacaktır. Şayet ie4=false yani nn4=true ise diğer if koşulu yorumlanarak işleme konulacaktır. Bu da nn4 için gerekli kodun çalıştırılması demektir.
Şimdi bu kodun tamamını vererek dersi bitirelim.
<html>
<head>
<title>Tarayici kontrolü</title>
<head>
<script language="Javascript">

</script>
</head>
<body onLoad=tarayici()>
</body>
</html>
Yukaridaki kodları herhangi bir editör (NotePad gibi) yardımıyla yazıp tara.htm olarak kaydedin.
<html>
<head>
<title>MSIE tarayici kullaniyorsunuz</title>
</head>
<body>
<h3>Tarayiciniz Internet Explorer</h3>
</body>
</html>
Yukaridaki kodu ie.htm olarak kaydedin.
<html>
<head>
<title>Netscape tarayici kullaniyorsunuz</title>
</head>
<body>
<h3>Tarayiciniz Netscape Navigator</h3>
</body>
</html>
Yukaridaki kodu nn.htm olarak kaydedin.
Önemli!: Bu üç Html dosyasının da aynı klasörde olması gereklidir.

Tara.htm adlı dosyada anlamadığınız kodlar olduğunu görüyorsunuz. Şimdilik bu kodları anlamanız gerekli değil. Yeri geldikçe bu kodların nerede ve nasıl kullanılacağını göreceğiz.

EKRANA ÇIKTI VE KLAVYEDEN BİLGİ GİRİŞİ

Bu dersimizde Html üzerinden klavye aracılığı ile ziyaretçiden bilgi almasını ve herhangi bir değişken vb. Türde yazıların html e nasıl yazdırılacağını göreceğiz.

Prompt ()
Hemen başlayalım. Ziyaretçiden bilgi alma iki tür JavaScript komutuyla gerçekleşir. Birisi Prompt yani bizim burada bahsedeceğimiz komut. Diğeri ise Form yoluyla bilgi alınması. Form yoluyla alınan bilgiler formun Html üzerinde yer alması yüzünden Prompt komutu ile birbirinden ayrılır. Prompt komutu ile Html sayfasından hariç bir pencere açılır. Alınmak istenen bilgi ziyaretçiye bu yol ile sorulur ve hemen altındaki boşluk yardımıyla cevap alınır. Şimdi kodun nasıl kullanıldığına bir göz atalım.
prompt ("Sorulan soru" , "Cevap ornegi")
Bu komutun yorumlanışı şu şekildedir. Html üzerinde Html'den bağımsız bir pencere aç. (bu prompt komutu ile yapılır) İlk çift tırnak içerisinde olan kelime veya kelime grubu, pencerenin üst kısmında ve değiştirilemeyen kısımdır. Burada soru veya pencerenin niçin açıldığı ile ilgili bir açıklama verilir. İkinci çift tırnakta ise doldurulacak olan cevap satırının içinde seçili bir haldedir. Bu ise genel olarak cevap örneği olarak ziyaretçiye sunulur. Kullanılması zorunlu değildir. Kullanılmadığınızda undefined gibi tanımlanmamış uyarısı alınır.
prompt ("Tarayicinizin turunu giriniz ?" ,"lutfen cevabý ie veya nn olarak veriniz");
Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bu bilgiyi nasıl kullanabiliriz? Bu sorunun cevabı prompt komutunu var ile bir değişkene atmak suretiyle kullanabiliriz olacaktır. Yani;
var tara=prompt ("Tarayicinizin turunu giriniz ?" ,"lutfen cevabý ie veya nn olarak veriniz");
Biz bu satır ile ne yapmış olduk ? Ziyaretçiden prompt komutu ile tarayıcısı sorduk ve bunu var değişken tanımlama komutuyla tara değişkenine atadık. Ziyaretçiden aldığımız bu bilgi sonucunda tara değişkeni ya ie yada nn değerini alacaktır. Biz daha sonraki satırlarda bu değişkeni belli bir koşul koyarak kullanabiliriz. Mesela daha önceki örneklerimizde olduğu gibi ie ise şu sayfayı aç nn ise şu sayfayı aç.
Bir öneri , bu tip tarayıcı tanıma yöntemi oldukça yanlış bir yöntemdir. Çünkü ziyaretçiden alınan bilgi ile bizim daha sonra kullandığımız koşul ifadeleri uyuşmayabilir. Bu yüzden kodumuz doğru çalışmaz.
Write()
Html dosyasına yazı yazdırma komutu ise write dır. Bu kodun yazım kurallarını inceleyecek olursak;
document.write ("goruntulenmek istenenler" , degisken_ismi );
Kodu inceleyelim. Javascript html üzerinde yazı yazmak istediğinde write komutunu tek başına kullanamaz. Bunun için document fonksiyoneli (yardımcısı manasında) ile birlikte kullanılır. document.write komutundan sonra parantez açılır. Daha sonra yazılmak istenen sıraya göre değişken ismi veya görüntülenmek istenenler yazılır. Değişkenler çift tırnak içerisinde yazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır.
Şimdi prompt komutu ile write komutunu birleştirerek bir kod hazırlayalım. Bu kodumuzda prompt aracılığıyla ziyaretçiye adını sorup ad değişkenine atıyoruz. Daha sonra bu değişkeni write komutu yardımıyla ziyaretçiye Merhaba diyoruz. Şimdi kodlara geçelim.
<html>
<head>
<title>Prompt , write ornegi </title>
</head>
<body>

</script>
</body>
</html>
Eski kodlarımıza göre bu kod biraz farklı değil mi ? Hemen göze çarpıyor ki Javascript kodumuz <head> etiketleri arasında değil. Daha öncede dediğimiz gibi uygulanması istenen sıraya bağlı olarak kod yerini aldı. Biz aslında Html'de font kurallarını kullanarak yazı da yazdırabiliriz. Eğer hiçbir kural uygulamadığınız tarayıcının banko (default) değerleri kullanılır. Örneğin Merhaba dedikten sonra alınan ismin bir alt satırda görüntülenmesini istiyorsak bunu Javascript'e şu şekilde yaptırabiliriz.
document.write ("Merhaba" , "" , isim)
Bu tür (yani türünde) Html etiketlerinin tümünü Javascript'e yaptırabilirsiniz. Hatta ileride göreceksiniz ki Javascript zerinden Html yazmadan web sayfası yapılabilir. Aslında Html yazmıyor değiliz fakat bunu <body> etiketlerinde yani Html dökümanı içerisinde yapmıyoruz. Bunu için Javascript'e emir veriyoruz. Bu normal olarak kimi zaman hissedilir derecede olmasa bile sayfanın yavaş yüklenmesine neden olur. Bu yüzden web sayfası üzerinde yaptığınız işleme göre kodunuzu yazın. Yani Sezar'ın hakkı Sezar'a...

01-12-2008, 03:02 PM	#1 (permalink)
sHekiLL Misafir sHekiLL Şuan Mesajlar: n/a	Javascript Nedir? JAVASCRIPT NEDİR? Bu bağlantıyı tıkladığınıza göre artık şu işi kes-yapıştırdan ileri götürmek istiyorsunuz. Bizim de amacımız bu. Size JavaScript'in genel özelliklerini ana hatlarıyla vermek. Bundan sonrası size kalmış. Genel yazım kurallarını öğrendikten sonra yapılabilecek en güzel şey diğer web-cilerin yazdıkları javascript kodlarını incelemektir. Herhangi bir problemle karşılaştığınızda bizden de yardım alabilirsiniz. Bu konu ile ilgili olarak maillerinizi bekliyoruz. Gelelim JavaScript'in genel bazı özelliklerine. Başlangıçta bazı konulara açıklık getirelim. Java ile JavaScript oldukça fazla derecede karıştırılmakta. Java Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir. Sonuçta tarayıcıdan bağımsız bir program elde edersiniz. Yani bir exe veya com uzantılı dosya vardır elinizde. Fakat JavaScript bu tür bir programlama dili değildir. Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Html dosyasını içine gömülüdür. Sonuçta elinizde exe veya com uzantılı bir dosya yoktur. Javascript , Netscape firması tarafından C dilinden esinlenilerek yazılmıştır. Yazılma amacı Html'in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir. Yani ziyaretçi ile etkileşim gibi önemli unsurlar Html'de yok veya oldukça az kapasitede diyebiliriz. Netscape firması bu konuya ağırlık vererek JavaScript script dilini internet ortamına kazandırmıştır. Gelelim Netscape ve Internet Explorer tarayıcılarının JavaScript kodundaki farklı anlayışa. Bu gerçekten doğrudur. Netscape firması JavaScript dilini hazırladığında Microsoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzden biz JavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Fakat bu her kodda karşımıza çıkmaz. Biz derslerimizde gerektiği yerde bu konuya yer vereceğiz. JAVASCRIPT'İN GENEL ÖZELLİKLERİ 1. Javascript kodlarını yazmak için Windows kullanıcıları için NotePad, Mac. kullanıcıları için Simple Text yeterlidir. 2. JavaScript kodları --> etiketi ile biter. 3. <script> etiketi JavaScript'i anlamayan eski sürüm tarayıcıların bu kısmı geçmeleri içindir. 4. Genellikle yazım tarzı şu şekildedir: <script> <!-- JavaScript kodlarý --> </script> 5. İyi bir programcı kod satırlarında açıklama yapar. Bu satır şu işlemi gerçekleştiriyor gibi açıklayıcı bilgiler yazar kodlarının yanına. JavaScript'te bu tür açıklama // ile başlar ve // ile biter. Eğer açıklamanız bir satırdan fazla ise /* ile başlar / ile biter. // bu satır kullanılacak değişkenlerin tanımlanması içindir. / açıklama satırı; 1 açıklama satırı 2 açıklama satırı 3 / 6. JavaScript kodları Html kodların arasında yer alır. Veya uzantısı js olan dosyalarda saklanarak yine Html içerisinden çağırılır. Java Appletleri gibi Html'den ayrı bir unsur değildir. Javascript Html'in bir parçasıdır. 7. Kullanılacak yere göre Html'in içerisinde kullanılır. Fakat genelde <head>...</head> etiketleri arasında kullanılır. 8. Javascript kodları bittiğinde elinizde asla kendi başına çalışan uzantısı exe veya com olan bir dosya olmaz. Her zaman için tarayıcı tarafından yorumlanması gerekir. Yorumlanması demek Javascript kodunun çalışması anlamındadır. 9. Nesne ve buna uygulanan olaylar ile ilgili bir takım görevleri vardır. Javascript kullandığı her unsuru nesne olarak algılar. Siz bu nesneleri tıklamak, üzerine gelmek, üzerinde çıkmak gibi olaylar ile çalıştırırsınız ki bu da Javascript'in ziyaretçi ile etkileşmesi demektir. 10.* Genel öğrenim yapımız diğer programlama dillerine nazaran biraz farklı olacaktır. Bu Javascript'in bir script dili olmasında ileri gelir. DEĞİŞKENLER Genel Değişken Özellikleri: Değişkenler Javascript'te ve diğer programlama dillerinde olduğu gibi bilgi depolamak bu bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" komutu ile oluşturulurlar. Karakter olarak kullanıldıklarında işlem yapılamazlar. Nümerik olarak kullanıldıklarında ancak işlem yapabilirler. Kullanımına bir örnek verelim. Örnek: var sayi; var sayi1=10; var yazi1="10"; Burada birinci satırdaki "sayi" değişkeni script kodunun herhangi bir yerinde kullanılmak üzere oluşturulmuştur. İkinci satırda "sayi1" adındaki değişkenin değeri hemen o satırda = ifadesinden sonra verilmiştir. Böyle değişken tanımıda yapılabilir. Üçüncü satırda ise değişkenin karakter ifadesi olarak kullanımını görüyoruz. Burada önemli olan karakter değişkenlerin alıntı " " ifadesinin arasında kullanılmasıdır. Her değişkenden sonra ; işareti konulmalıdır. Tarayıcı, bir başka komut satırına geçtiğini bu yol ile anlar. Şimdi değişkenlerle ilgili matematik işlemlerinin nasıl olacağını görelim. Bunu daha iyi açıklayabilmek için örnekler üzerinde çalışalım. Örnek: var sayi1=10; var sayi2=20; var sayi3=sayi1+sayi2; Birinci ve ikinci satırlarda değişkenler oluşturduk. Üçüncü satırdaki ise sayi3 değişkeni ile diğer iki değişkeni topladık. Burada önemli olan işlem yapmak istediğimizde değişken değerinin alıntı " " işaretlerinin arasına konmamasıdır. Üçüncü satırı - ileride göreceğimiz write () fonksiyonu ile - tarayıcıda yazdırırsak göreceğimiz değer 30'dur. Şimdi de değişkenleri karakter olarak tanımladığımızda neler olduğuna bakalım. var sayi1="10"; var sayi2="20"; var sayi3= sayi1+sayi2; Bir önceki örnekten farklı olarak değişken değerlerinin alıntı işaretleri içerisinde yazdık. Eğer sayi3 adlı değişkeni tarayıcıda bastırırsak göreceğimiz ifade 1020 ifadesidir. Yani tarayıcı karakter olarak tanımladığımız değişkenleri ardada ekledi. Burada unutulmaması gereken şey bunun sadece + işleminde geçerli olmasıdır. Diğer işlem türlerinde bu tür bir sonuç alınamaz. Değişkenlere Ad Verirken Uymamız Gereken Kurallar: 1. Değişken isimleri harf veya _ karakteri ile başlayabilir. Rakam kullanmak istersek 2. karakterden sonra kullanabiliriz. Yani değişkenin ilk karakteri rakam olamaz. Değişken isimlerine örnekler; var url="netyardim"; doğru var _rakam=12; doğru var a1=123; doğru var 3uzler="üçüzler" yanlış 2. Değişken tanımlarken bir veya birden fazla boşluk bırakmak tanımlama açısından herhangi bir sorun teşkil etmez. 3. Değişken adı verirken kullandığımız harflerin büyük veya küçük olması bazı tarayıcılarda fark etmezken çoğu tarayıcıda farklı bir değişken anlamındadır. var say=1; var Say=1; Farklı değişkenler olarak algılanır. Değişkenlerin İşlem Operatörleri İle Kullanımı: Değişkenlere işlem yaptırabilecek operatörleri ve özelliklerini inceleyelim. Operatörleri birkaç kısıma ayırarak inceleyelim; 1. Aritmetik operatörler 2. Karşılaştırmak operatörleri 3. Mantıksal operatörler 4. Özel operatörler *Aritmetik Operatörler:Her zaman kullandığımız bu operatörler + , - , , / , % 'dir.Değişkenlerin çeşitli aritmetik operatörlerle kullanımına bir örnek verelim. var i=10; var j=11; var k=12; var m,n; m=ij+k; n=i(j+k); Şimdi örneğimizi inceleyelim: İlk üç satırda değişkenlerimizi hem tanımlayıp hem de değer atadık. Dördüncü satırda ise m ve n değişkenlerini tanımlayıp değer atamdık. Diğer satırlarda ise m ve n değişkenlerinden istenen işlemleri tanımladık. Buna göre son iki satırın sonuçları farklıdır. Çünkü parantezlerin işlem önceliği vardır. Beşinci satırın cevabı (1011)+12 = 122 şeklinde olacaktır. Son satırda ise sonuç 10(11+12) = 230 olacaktır. Diğer bir işlem operatörü olan % 'nin yaptığı işlemi şu şekilde anlatabiliriz.% operatörü % işaretinin solundaki değişkeni sağındaki değişkene böler ve kalanı verir. Örnek olarak; var a=100; var b=9; var c=100%9; Burada c değişkenin değeri 100/9'un kalanı 1'dir. Yani c değişkeninin değeri 1 olacaktır. Diğer -(eksi) ve / (bölme) operatörlerinin işlemleri kendilerine atanan çıkartma ve bölme işlemidir.Bu operatörlerin kısa kullanımı içinde Javascript bize kolaylık sağlar. Bu operatörleri sıralamak istersek; -= : = : /= : %= : ++ : --* Bu operatörlerin kısa uzun şekilde yazılışları ise; x+=y x=x+y x-=y x=x-y x=y x=xy x/=y x=x/y x%=y x=x%y x++ x=x+1 x-- x=x-1 şeklindedir. Bu operatörlerin nasıl işlem yaptığını bir örnekte görelim. var x,y,z; x=10; y=20; z=30; x++; x+=y; z--; y= z; Şimdi her zamanki gibi işlem satırlarının cevaplarını birlikte bulalım. x++ satırı x=x+1 işleminin yapılmasını söyler. Buna göre x değişkeni 11 değerini alır.İkinci satıra geldiğimizde x+=y satırı x=x+y işleminin yapılmasını söyler. Bir önceki satırdaki x'in değeri 11 idi. Böylelikle yeni x'in değeri 11+20=31 olacaktır. Diğer satırda z-- işlemi sonucunda z'nin değeri 29 olacaktır. Son satırda ise y=yz işlemi ile y değişkeni 2029= 380 değerini alacaktır. Karşılaştırma Operatörleri:* Bu operatörler değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılır. == operatörü iki değişkenin birbirine eşitliğini kontrol eder. != operatörü iki değişkenin birbirine eşit olmadığı durumlarda kullanılır. < operatörü bilindiği üzere küçüktür operatörüdür. Soldaki değişkenin sağdakinde küçüklüğünü kontrol eder. <= soldaki değişkenin sağdaki değişkene küçük eşitliğini kontrol eder. > soldaki değişkenin sağdaki değişkene göre büyük olup olmadığını kontrol eder. >= soldaki değişkenin sağdaki değişkene büyük eşitliğini kontrol eder. *Mantıksal Operatörler:* Bu tip operatörler iki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır. Operatörler && , \|\| , ! operatörleridir. && And (ve) operatörü iki değişkenin de değeri doğru olması istendiğinde kullanılır. \|\| Or (veya) operatörü iki değişkenden en az birinin doğru olması durumu istediğinde kullanılır. ! Not (değil) operatörü değişkenin değeri doğru ise yanlış , yanlış ise doğru olması istendiği durumlarda kullanılır. *Özel Karşılaştırma Operatörü:* Bu operatör iki değişken arasında karşılaştırma yapmanın en sade ve kısa yoludur. Operatörün kullanım biçimi : deðiþken_1 [istenen karþýlaþtýrma operatörü] deðiþken_2 ? deðiþken_3 : deðiþken_4 Bunu bir örnekle açıklayalım. Değişkenleri var ile tanımladığımızı farz ediyorum. Buna göre; a < b ? c : d Yukarıdaki satırda yapılması istenen işlem; a değişkeninin b değişkeninden küçük olup olmadığı karşılaştırılıyor. Buna göre cevap doğruysa işlemin sonucu c değişkeninin değeri değilse d değişkeni oluyor. Şimdi tüm bu öğrendiklerimizi bir Javascript kodunda görelim. Bu bizim ilk Javascript kodumuz olacak. Örnek : <script Language="JavaScript 1.2"> <!-- var i=1; var j=2; var k=3; var m=4; var n=5; var p=6; var q=7; i=+j; j++; k--; m=m+k; n=j; i < j ? 3 : 1 ; k >= n ? 0 : 1 ; k=2 && j=5 ? p : q ; i=2 \|\| j=3 ? m : n ; p!=2 ? k : 10 ; -- > </script> İlk yedi satırda değişkenlerimizi hem tanımladık hem de değer atadık. Böyle bir yazımı yapabileceğimizi değişkenleri anlatmaya başlarken söylemiştik. İşlem satırlarına geçtiğimizde ise; i+=j;* Bu işlem daha da önce gördüğümüz gibi bize i=i+j işlemini yapmamızı söyler. Buna göre i değişkeninin değeri 3 olacaktır. Hemen altındaki satırda bulunan j++ işlemi dolayısıyla da j değişkeni 3 değerini alacaktır. Diğer işlem satırında k--işlemi ile de k değişkeni 2 değerini alır. Bir diğer satırdaki m=m+k işlemi ile m(m=4) değişkeni k(k=2) değişkeni toplanarak 6 değerini alır. n=j işlemi ile de n(n=5) değişkeni 35=15 değerini alacaktır. Şimdi diğer karşılaştırma işlemlerine geçmeden önce değişkenlerimizin işlem sonrası aldığı değerleri yazalım. i=3 , j=3 , k=2 , m=6 , n=15 , p=6 , q=7 ; i < j ? 3: 1; Bu satırın 3 < 3 işleminin cevabı doğru ise 3 değilse 1 değeri alacağını görebiliyoruz. Tabi ki üç üçten küçük olmadığı için cevabımız 1 olacaktır. k>=n ? 0 : 1; Bu satırda ise 2>=15 işlemi gerçekleşir ki bunun cevabı da yanlıştır ve ikinci değer işlem satırının cevabıdır yani 1 dir. Şimdiki karşılaştırma işlemimiz ise mantıksal operatörlerle ilgili. Buna göre; k=2 && j=5 ? p : q; İşlem bize ne söylüyor ? k değişkeni ve j değişkeninin kesin olarak bir değere eşit olup olmadığını karşılaştırmamızı söylüyor. Bu iki değer de doğruysa çünkü &&(and) mantıksal operatörünün anlamı bu işlem doğrudur değilse yanlıştır. Buna göre k=2 'dir. Fakat buna karşılık j'nin değeri 5 değildir. Bu yüzden karşılaştırmanın cevabı yanlıştır. Dolayısıyla işlem q yani 7 değerini alır. p!=2 ? k : 10; İşlemde istenilen p değişkeninin değerinin ikiden farklı olması durumdur. Yani 6!=2 bunun anlamı doğrudur. Gerçektende 6=2 değildir. Bizde bu satırda bunu istiyorduk. O halde cevap doğrudur. Böylelikle işlem k yani 2 değerini alır. Şimdi biz bu yaptıklarımızla sadece javascript'te bir şeyler hesap etmesini ve karşılaştırmasını söyledik. Tarayıcı da bu işlemleri yapar ve hafızasında tutar. Daha sonra öğreneceğimiz komutlarla bunları istersek tarayıcıya yazdırabilir. Başka bir yerde kullanılmasını söyleyebiliriz. INTERNET EXPLORER VE NETSCAPE TARAYICI FARKI Giriş kısmında belirttiğimiz gibi Javascript kodlarında MSIE (Microsoft Internet Explorer) ve NN (Netscape Navigator) yönünden farklılık vardır. Bu tarayıcının html dökümanı nasıl modellediğine bağlıdır. Tarayıcının nesne döküman modeli, bir Html sayfasındaki çeşitli elemanların tarayıcı tarafından nasıl algılanıp yorumlandığı ile ilgilidir. Javascript gerçekte W3C (Web tekniklerinin standartlarını belirleyen kurum [ÜYE OLMADAN L?NKLER? GÖREMEZS?N?Z. BURAYI TIKLAYARAK BEDAVA ÜYE OLUNUZ...]) konsorsiyumu tarafından belirlenen kodlardan oluşmamıştır. Tarayıcı üreten firmalar bu konuları kendilerince yorumlayıp tarayıcılarına yerleştirmişlerdir. Yani kendi nesne döküman modellerini oluşturmuşlardır. Biz bu kısımda her iki tarayıcınında nesne döküman modelini incelemeyeceğiz. Bize gerekli olan kısmını öğreneceğiz. Şimdi tarayıcı farkının nasıl ayırt edilebileceğini görelim. ie4 = (document.all) ? true : false; nn4 = (document.style) ? true : false; Biz bu iki satırla bir önceki ders olan değişkenler ve mantıksal operatörler yardımıyla iki tarayıcıyı da kontrol altına aldık. Bir diğer örnekle yapıyı pekiştirelim. <script language="Javascript"> <!-- // Kodları eski sürücü tarayıcılardan saklayalım ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ; if (ie4) { // MSIE 4.0 için uygun kodları buraya yazacağız } else { // NN 4.0 için uygun kodları buraya yazacağız. } //Saklamayı bitir --> </script> Şimdi bu kodları inceleyelim. Değişken tanımlama kısmının anlaşıldığını varsayarak geçiyorum. Anlamadığınız bir kısım varsa 1. Değişkenler kısmına tekrar geri dönün. If (ie4) ve if (nn4) Burada ileriki derslerde öğreneceğimiz koşul ifadesini kullanıyoruz. Bu kodları Javascript'in anlayış tarzı şu şekilde olacaktır. Eğer nn4 , ie4 değişkenlerinden doğru olanı ie4 ise -ki bunu true ve false değerlerinden algılar- alt satıra geçip ona uygun kodu uygulayacaktır. Şayet ie4=false yani nn4=true ise diğer if koşulu yorumlanarak işleme konulacaktır. Bu da nn4 için gerekli kodun çalıştırılması demektir. Şimdi bu kodun tamamını vererek dersi bitirelim. <html> <head> <title>Tarayici kontrolü</title> <head> <script language="Javascript"> <!-- // Kodlari eski surum tarayicilardan saklayalim. function tarayici() { ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ; if (ie4) { // MSIE 4.0 icin uygun kodlari buraya yazacagiz. window.location="ie.htm"; } else { // NN 4.0 icin uygun kodlari buraya yazacagiz. window.location="nn.htm"; } } //Saklamayi bitir --> </script> </head> <body onLoad=tarayici()> </body> </html> Yukaridaki kodları herhangi bir editör (NotePad gibi) yardımıyla yazıp tara.htm olarak kaydedin. <html> <head> <title>MSIE tarayici kullaniyorsunuz</title> </head> <body> <h3>Tarayiciniz Internet Explorer</h3> </body> </html> Yukaridaki kodu ie.htm olarak kaydedin. <html> <head> <title>Netscape tarayici kullaniyorsunuz</title> </head> <body> <h3>Tarayiciniz Netscape Navigator</h3> </body> </html> Yukaridaki kodu nn.htm olarak kaydedin. Önemli!: Bu üç Html dosyasının da aynı klasörde olması gereklidir. Tara.htm adlı dosyada anlamadığınız kodlar olduğunu görüyorsunuz. Şimdilik bu kodları anlamanız gerekli değil. Yeri geldikçe bu kodların nerede ve nasıl kullanılacağını göreceğiz. EKRANA ÇIKTI VE KLAVYEDEN BİLGİ GİRİŞİ Bu dersimizde Html üzerinden klavye aracılığı ile ziyaretçiden bilgi almasını ve herhangi bir değişken vb. Türde yazıların html e nasıl yazdırılacağını göreceğiz. Prompt () Hemen başlayalım. Ziyaretçiden bilgi alma iki tür JavaScript komutuyla gerçekleşir. Birisi Prompt yani bizim burada bahsedeceğimiz komut. Diğeri ise Form yoluyla bilgi alınması. Form yoluyla alınan bilgiler formun Html üzerinde yer alması yüzünden Prompt komutu ile birbirinden ayrılır. Prompt komutu ile Html sayfasından hariç bir pencere açılır. Alınmak istenen bilgi ziyaretçiye bu yol ile sorulur ve hemen altındaki boşluk yardımıyla cevap alınır. Şimdi kodun nasıl kullanıldığına bir göz atalım. prompt ("Sorulan soru" , "Cevap ornegi") Bu komutun yorumlanışı şu şekildedir. Html üzerinde Html'den bağımsız bir pencere aç. (bu prompt komutu ile yapılır) İlk çift tırnak içerisinde olan kelime veya kelime grubu, pencerenin üst kısmında ve değiştirilemeyen kısımdır. Burada soru veya pencerenin niçin açıldığı ile ilgili bir açıklama verilir. İkinci çift tırnakta ise doldurulacak olan cevap satırının içinde seçili bir haldedir. Bu ise genel olarak cevap örneği olarak ziyaretçiye sunulur. Kullanılması zorunlu değildir. Kullanılmadığınızda undefined gibi tanımlanmamış uyarısı alınır. prompt ("Tarayicinizin turunu giriniz ?" ,"lutfen cevabý ie veya nn olarak veriniz"); Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bu bilgiyi nasıl kullanabiliriz? Bu sorunun cevabı prompt komutunu var ile bir değişkene atmak suretiyle kullanabiliriz olacaktır. Yani; var tara=prompt ("Tarayicinizin turunu giriniz ?" ,"lutfen cevabý ie veya nn olarak veriniz"); Biz bu satır ile ne yapmış olduk ? Ziyaretçiden prompt komutu ile tarayıcısı sorduk ve bunu var değişken tanımlama komutuyla tara değişkenine atadık. Ziyaretçiden aldığımız bu bilgi sonucunda tara değişkeni ya ie yada nn değerini alacaktır. Biz daha sonraki satırlarda bu değişkeni belli bir koşul koyarak kullanabiliriz. Mesela daha önceki örneklerimizde olduğu gibi ie ise şu sayfayı aç nn ise şu sayfayı aç. Bir öneri , bu tip tarayıcı tanıma yöntemi oldukça yanlış bir yöntemdir. Çünkü ziyaretçiden alınan bilgi ile bizim daha sonra kullandığımız koşul ifadeleri uyuşmayabilir. Bu yüzden kodumuz doğru çalışmaz. Write() Html dosyasına yazı yazdırma komutu ise write dır. Bu kodun yazım kurallarını inceleyecek olursak; document.write ("goruntulenmek istenenler" , degisken_ismi ); Kodu inceleyelim. Javascript html üzerinde yazı yazmak istediğinde write komutunu tek başına kullanamaz. Bunun için document fonksiyoneli (yardımcısı manasında) ile birlikte kullanılır. document.write komutundan sonra parantez açılır. Daha sonra yazılmak istenen sıraya göre değişken ismi veya görüntülenmek istenenler yazılır. Değişkenler çift tırnak içerisinde yazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır. Şimdi prompt komutu ile write komutunu birleştirerek bir kod hazırlayalım. Bu kodumuzda prompt aracılığıyla ziyaretçiye adını sorup ad değişkenine atıyoruz. Daha sonra bu değişkeni write komutu yardımıyla ziyaretçiye Merhaba diyoruz. Şimdi kodlara geçelim. <html> <head> <title>Prompt , write ornegi </title> </head> <body> <!-- //Kodlari eski tarayicilardan gizliyoruz var isim = prompt ("isminizi giriniz " , "kucuk harf veya buyuk harf kullanabilirsiniz" ); document.write ("Merhaba " , isim , " !" ); // Saklamayi bitir --> </script> </body> </html> Eski kodlarımıza göre bu kod biraz farklı değil mi ? Hemen göze çarpıyor ki Javascript kodumuz <head> etiketleri arasında değil. Daha öncede dediğimiz gibi uygulanması istenen sıraya bağlı olarak kod yerini aldı. Biz aslında Html'de font kurallarını kullanarak yazı da yazdırabiliriz. Eğer hiçbir kural uygulamadığınız tarayıcının banko (default) değerleri kullanılır. Örneğin Merhaba dedikten sonra alınan ismin bir alt satırda görüntülenmesini istiyorsak bunu Javascript'e şu şekilde yaptırabiliriz. document.write ("Merhaba" , "" , isim) Bu tür (yani türünde) Html etiketlerinin tümünü Javascript'e yaptırabilirsiniz. Hatta ileride göreceksiniz ki Javascript zerinden Html yazmadan web sayfası yapılabilir. Aslında Html yazmıyor değiliz fakat bunu <body> etiketlerinde yani Html dökümanı içerisinde yapmıyoruz. Bunu için Javascript'e emir veriyoruz. Bu normal olarak kimi zaman hissedilir derecede olmasa bile sayfanın yavaş yüklenmesine neden olur. Bu yüzden web sayfası üzerinde yaptığınız işleme göre kodunuzu yazın. Yani Sezar'ın hakkı Sezar'a...

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal gösterime geğ Hybrid-Şeklinde gösterime geç Ağaç şeklinde

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Antrenman	Cümle Mühendisi	Diğer Konular	0	12-05-2007 07:06 PM
Deprem Nedir. ?	Asi.	Diğer Konular	0	12-01-2007 12:11 PM
Logarİtma İle İlgİlİ 107 Soru Ve ÇÖzÜmlerİ	Asi.	Matematik-Geometri	0	11-27-2007 10:17 AM
Spor felsefesi nedir.	Cümle Mühendisi	Diğer Konular	0	11-26-2007 11:56 PM
müslümana sorular	RequesT	Dini Konular	1	11-22-2007 02:37 AM

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)