Web yazılım meraklılarına yeniden merhabalar!

Yine tesadüf eseri bulduğum yazılım kaynaklarından birini sizlerle paylaşıyorum.

Bu Javascript dökümanında sıfırdan JavaScript öğrenebileceğinizi düşünerek faydalı olmasını diliyorum.

İyi çalışmalar!

Yazar: Bilinmiyor
Yayınevi: Bilinmiyor
Format: Microsoft Word (doc)
Boyut: 159  KB
Sayfa Sayısı: 38
Dil : Türkçe

Javascript Türkçe Ders Dökümanı

Dökümanın açık şekli aşağıda belirtilmiştir.

JavaScript

 

Java, C++ gibi derleme tabanlı bir dil olmasına rağmen, tekbir derlenmiş programın her tip bilgisayarda çalışabilmesi sağlanacak şekildedeğiştirilmiştir. Fakat JavaScript bu tür bir programlama dili değildir.Yorumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Htmldosyasını içine gömülüdür. Javascript , Netscape firması tarafından C dilindenesinlenilerek yazılmıştır. Yazılma amacı Html'in sahip olmadığı bazıözelliklerin web sayfalarında kullanılmak istenmesidir. Netscape firması bukonuya ağırlık vererek JavaScript script dilini internet ortamınakazandırmıştır. Kısaca Java derleme tabanlı bir dil, JavaScript ise küçükprogram parçalarıdır.

 

Netscape ve Internet Explorer tarayıcıları JavaScriptkodlarını farklı yorumlar. Netscape firması JavaScript dilini hazırladığındaMicrosoft firması bu dilin özelliklerini veya yazılım tarzını tam anlamıylaInternet Explorer'a eklemedi. Kendi yazım kurallarını belirledi. Bu yüzdenJavaScript kodu yazarken bu iki tarayıcı özelliklerini de göz önündebulundurulmalıdır. Fakat bu her kodda karşımıza çıkmaz.

 

2.2.1 JavaScript'ingenel Özellikleri

·        Javascript kodlarını yazmak için Windows kullanıcıları için NotePad, Mac. kullanıcıları için Simple Text yeterlidir.

·        JavaScript kodları etiketi ile biter.

·        Etiketi JavaScript'i anlamayan eski sürüm tarayıcıların bu kısmıgeçmeleri içindir.

·        Genellikle yazım tarzı

 

şeklindedir. TümJavaScript kodları HTML ye gömülü olarak bu deyimler arasına yazılmalıdır.

 

·        JavaScript'te  açıklamaişaretleri tek satır ise // ile başlar. Eğeraçıklamanız bir satırdan fazla ise /* ile başlar */ ile biter.

// bu satır kullanılacak değişkenlerin tanımlanması /* açıklama satırı 1 açıklama satırı 2 açıklama satırı 3 */

 

• 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.

·        Kullanılacak yere göre Html'in içerisinde kullanılır. Fakat genelde< head > etiketleri arasında kullanılır.

·        Javascript kodları bittiğinde elinizde asla kendi başına çalışanuzantısı exe veya com olan bir dosya olmaz. Her zaman için tarayıcı tarafındanyorumlanması gerekir. Yorumlanması demek Javascript kodunun çalışmasıanlamındadır.

·        Nesne ve buna uygulanan olaylar ile ilgili bir takım görevlerivardır. Javascript kullandığı her unsuru nesne olarak algılar. Siz bu nesneleritıklamak , üzerine gelmek , üzerinde çıkmak gibi olaylar ile çalıştırırsınız kibu da Javascript'in ziyaretçi ile etkileşmesi demektir.

 

 

·        Genel öğrenim yapımız diğer programlama dillerine nazaran birazfarklı olacaktır. Bu Javascript'in bir script dili olmasında ileri gelir.

 

2.2.2 Değişkenler

 

Genel DeğişkenÖzellikleri

DeğişkenlerJavascript'te ve diğer programlama dillerinde olduğu gibi bilgi depolamak bubilgiyi kullanmak amacıyla kullanılırlar. Değişkenler var komutu ile oluşturulurlar. Karakter olarakkullanıldıklarında işlem yapılamazlar. Nümerik olarak kullanıldıklarında ancakişlem yapabilirler.

 

var sayi; var sayi1=10; var yazi1="10";

 

Burada birinci satırdaki sayi değişkeni script kodununherhangi 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ı dayapılabilir. Üçüncü satırda ise değişkenin karakter ifadesi olarak kullanımınıgöstermektedir. Burada önemli olan karakter değişkenlerin alıntı "" ifadesinin arasında kullanılmasıdır. Herdeğişkenden sonra ; işaretikonulmalıdır. Tarayıcı, bir başka komut satırına geçtiğini bu yol ile anlar.

var sayi1=10; var sayi2=20; var sayi3=sayi1+sayi2;

 

Birinci ve ikinci satırlarda değişkenler  oluşturulmuştur.Üçüncü satırdaki ise  sayi3  değişkeni ile diğeriki değişken toplanmıştır. 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() fonk-

siyonu ile - tarayıcıda yazdırırsak göreceğimiz değer 30'dur.

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 yazılmıştır. Eğer sayi3 adlı değişken tarayıcıda yazdırılırsa göreceğimiz ifade 1020ifadesidir. Yani tarayıcı karakter olarak tanımladığımız değişkenleri ardadaekledi. Burada unutulmaması gereken şey bunun sadece + işleminde geçerli olmasıdır. Diğer işlem türlerinde bu türbir sonuç alınamaz.

 

Değişkenlere AdVerirken Uyulması Gereken Kurallar.

1) Değişken isimleri harf veya _ karakteri ile başlayabilir. Rakam kullanmakistersek 2. karakterden

    sonrakullanılabilr. Yani değişkenin ilk karakteri rakam olamaz. Değişken isimlerineörnekler;

 

var url="turkport";      // doğru var _rakam=12;           // doğru var a1=123;              // doğru var 3uzler="üçüzler"     // yanlış var x1;                  // doğru

 

2) Değişkentanımlarken bir veya birden fazla boşluk bırakmak tanımlama açısından herhangibir

    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ı birdeğişken anlamındadır. Yani;

 

var say=1; var Say=1;

 

Birçoktarayıcıda farklı değişkenler olarak algılanır.

 

Değişkenlerin işlemoperatörleri ile kullanımı

Değişkenlereişlem yaptırabilecek işlemcilere operatör denir. JavaScript’te 4 çeşit operatörvardır.

 

·        Aritmetik operatörler

·        Karşılaştırmak operatörleri

·        Mantıksal operatörler

·        Özel operatörler

 

Aritmetik Operatörler

Herzaman kullandığımız bu operatörler  +, - , * , / , % 'dir.

 

var i=10; var j=11; var k=12; var m,n; m=i*j+k; n=i*(j+k);

Değişkenler i,j,k,m,n

i=10;j=11;k=12;m,n ye başlangıçta bir değer atanmamış.

m=i*j+k  = 10*11+12 = 122

n=i*(j+k)= 10*(11+12)= 230

 

var a=100; var b=9; var c=100%9; //c=100/9 dan kalan değerdir.(Yani 100 Mod(9) göre değeri)

 

Buradac değişkenin değeri 100/9'un kalanı 1'dir. Yani c değişkeninin değeri 1olacaktır. Diğer -(eksi) ve / (bölme) operatörlerinin işlemleri kendilerineatanan çıkartma ve bölme işlemidir.Bu operatörlerin kısa kullanımı içinde Javascriptbize kolaylık sağlar. Bu operatörleri sıralamak istersek;

 

-= : *= : /= : %= : ++ : --
 

x+=y;   //x=x+y anlamında x-=y;   //x=x-y anlamında x*=y;   //x=x*y anlamında x/=y;   //x=x/y anlamında x%=y;   //x=x%y anlamında x++;    //x=x+1 anlamında x--;    //x=x-1 anlamında

 

var x,y,z; x=10; y=20; z=30; x++; x+=y; z--; y*= z;

 

 

 

Değişkenler:x,y,z

x=10;y=20;z=30;

x++   x=x+1   x=10+1=11

x+=y  x=x+y   x=11+20=31

z--   z=z-1   z=30-1=29

y*=z  y=y*z   y=20*29=580

 

Karşılaştırmaoperatörleri

Bu operatörlerdeğişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılır.
Bu operatörler ise;
== operatörü iki değişkenin birbirine eşitliğini kontrol eder.
!= operatörü iki değişkenin birbirine eşit olmadığı durumlardakullanılır.

<   operatörü bilindiği üzere küçüktüroperatö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 kontroleder.
>   soldaki değişkeninsağ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 kontroleder.

 

Mantıksal Operatörler

Bu tipoperatörler iki değişkene bağlı karşılaştırılmaların yapılmak istendiğidurumlarda 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ğruolması durumu istediğindekullanılır.
!   Not (değil) operatörü değişkenindeğeri doğru ise yanlış , yanlış ise doğru olması istendiği

      durumlarda kullanılır.

 

Özel karşılaştırmaOperatörü

Buoperatör iki değişken(deg) arasında karşılaştırma yapmanın en sade ve kısayoludur.
Operatörün kullanım biçimi :

 

deg1 [istenen karşılaştırma operatörü] deg2 ? deg3 :deg4

 

a < b ? c : d

 

Burada a değişkeninin b değişkenindenküçük olup olmadığı karşılaştırılıyor. Bunagöre cevap doğruysa işlemin sonucu c değişkeninindeğeri değilse d değişkeni oluyor.

Örnek1:

Değişkenlerin ilk değerleri i=1 j=2 k=3 m=4 n=5 p=6 q=7 Değişkenlerin son değerleri

 

 

 

Değişkenleri,j,k,m,n,p,q i=1;j=2;k=3;m=4;n=5;p=6;q=7;

İfade              Anlamı              Sonucu

i+=j               i=i+j               i=1+2=3

j++                j=j+1               j=2+1=3

k--                k=k-1               k=3-1=2

m=m+k                -                 m=4+2=6

n*=j               n=n*j               n=5*3=15

i

k<=n?0:1           2 >=15 mi?           Evet, 0

k=2 && j=5?p:q     k=2 ve j=5 mi?      Hayır,7

i=2 || j=3?m:n     i=3 veya j=3 mü?    Evet, 6

p!=2?k:10          p,2 den farklı mı?  Hayır,10

 

 

2.2.3 Ekrana Çıktıve Klavyeden Bilgi Girişi

 

prompt()

Ziyaretçiden bilgi alma iki tür JavaScript komutuylagerçekleşir. Birisi prompt diğeri ise Formyoluyla bilgi alınması. Form yoluyla alınan bilgiler formun Html üzerinde yeralması yüzünden prompt komutu ile birbirinden ayrılır. prompt komutu ile Htmlsayfasından hariç bir pencere açılır. Alınmak istenen bilgi ziyaretçiye bu yolile sorulur ve hemen altındaki boşluk yardımıyla cevap alınır.

 

prompt ("Sorulan soru" , "Cevap örneği")

 

Bu komutun yorumu şudur. Html üzerinde Html'den bağımsız birpencere aç. (bu prompt komutu ileyapı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çinaçı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 isegenel olarak

 

cevap örneği olarak ziyaretçiye sunulur. Kullanılması zorunludeğildir. Kullanılmadığınızda undefined gibi tanımlanmamış uyarısıalınır.

 

prompt("Tarayıcınızın Türü ?" ,"Cevabı ie veya nn olarak veriniz");

 

Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bubilgiyi nasıl kullanabiliriz ? Bu sorunun cevabı prompt komutunu var ile bir değişkene atmak suretiyle kullanabiliriz.

 

var tara=prompt ("Tarayıcınızın Türü?" ,"Cevabı ie veya nn olarak   veriniz");

 

Biz bu satır ile, ziyaretçiye prompt komutu ile tarayıcısı soruldu ve bunu var değişken tanımlama komutuyla tara değişkenine atandı. Ziyaretçiden alınan bu bilgi sonucunda tara değişkeni ya ie yada nn değerinialacaktır. Biz daha sonraki satırlarda bu değişkeni belli bir koşul koyarakkullanabiliriz.

 

write()

Htmldosyasına yazı yazdırma komutu  write dır. Bu kodun yazım kuralları;

 

document.write ("görüntülenmek istenenler" , değişken_ismi );

 

Javascript html üzerinde yazı yazmak istediğinde writekomutunu tek başına kullanamaz. Bunun için document fonksiyoneli (yardımcısımanasında) ile birlikte kullanılır. document.write komutundansonra parantez açılır. Daha sonra yazılmak istenen sıraya göre değişken ismiveya görüntülenmek istenenler yazılır. Değişkenler çift tırnak içerisindeyazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır.

 

Şimdi prompt komutu ile write komutunu birleştirerekbir kod hazırlayalım. Bu kodumuzda prompt aracılığıylaziyaretçiye adını sorup ad değişkenine atanıyor. Daha sonra bu değişkeni write komutu yardımıyla ziyaretçiye Merhaba deniyor.

 

Örnek2:

 

 

Aynıörnekte Merhaba dedikten sonra alınan ismin bir alt satırda görüntülenmesiniistiyorsak bunu Javascript'e şu şekilde yaptırabiliriz.

 

document.write ("Merhaba" , " " , isim) ;

 

Bu tür(yani
türünde)Html deyimlerinin tümünü Javascript'e yaptırabilirsiniz.

 

alert()

Ekranın girilen iletiyi yazar.

 

alert(“ileti...”)

 

Örnek 3:

 

 

2.2.4 KoşulYapıları

 

Hiçbir bilgisayar kendine göre yorum yapamaz. Bizimverdiğimiz belli kıstasları göz önünde bulundurarak seçim yapar. Diğerprogramlama dillerinde olduğu gibi JavaScript’te de koşul yapıları mevcuttur.

 

if,if-else

Javascript'te çoğu dilde olduğu gibi koşul yapısının kodu if  deyimidir. Yani if deyimi koşulluişlem yapma deyimidir. if ve else tek bir karşılaştırma deyimi olup else in kullanımı isteğe bağlıdır. Eğer koşul olumlu ise kümeyürütülür ve else den sonraki kümeatlanır; olumsuz ise, if den sonraki kümeatlanır ve eğer varsa, else den sonraki kümeyürütülür.

 

 

if deyimininkullanımı:

 

if (koşul){ ß küme başlangıcı ... deyimler;[küme] ... }           ß küme sonu

 

if-else deyimlerininkullanımı:

 

if(koşul){           /* koşul olumlu  ise [küme1] */  ...                  /* koşul olumsuz ise [küme2] */  deyimler;[küme1]     /* yürütülür.                */  }  else{  ...  deyimler;[küme2]  ...  }

 

 

 

 

 

 

 

Örnek4:

 

 

Örnek5:

 

 

switch()

Bir değişkenin içeriğine bakarak, programın akışını bir çokseçenekten birine yönlendiren bir karşılaştırma deyimidir. Bu deyim BASICdilinde ONGOSUB ve Pascal dilinde Case deyimine benzerdir. C dilinde ise karşılığı aynıdır. Budeyimin genel yazım biçimi;

 

 

switch(değişken){           case “sabit1” :              ...deyimler;           case “sabit2” :              ...deyimler;           ...           case “sabitN” :              ...deyimler;  }

 

 

 

 

 

 

var sec; sec = prompt ("Çıkmak istiyor musunuz " ,"Evet(E/e);Hayır(H/h)") switch (sec){   case "e" : case "E" :   document.write ("Tekrar hoşgeldiniz") //yapılması istenen işlemler   case "h": case "H" :   document.write ("Bizi tercih ettiğiniz için teşekkürler") break; //Çıkılması istendiği için döngüyü kesmek için break komutunu   //kullanıyoruz. İleride break deyimi açıklanacaktır.

 

2.2.5 DöngüDeyimleri

 

Bu tip deyimler bir kümenin belli bir koşul altındayinelenmesi için kullanılır. while,do...while ve for olmak üzere üç tip döngü deyimi vardır.Javascript'te diğerprogramlama dillerinde olduğu gibi istediğiniz işlemi 2 veya daha fazla kezyaptırmak için belli program kodları mevcuttur.

 

while

Tekrarlama deyimidir. Bir küme ya da deyim while kullanılarak bir çok kez yinelenebilir. Yinelenmesi içinkoşul sınaması çevrim başında yapılır. Genel yazım biçimi;

 

while(koşul){ ... döngüdeki deyimler; [küme] ... }

 

Koşul olumlu olduğu sürece çevrim yinelenir. İki veya dahaçok koşul mantıksal operatörler birleştirilerek verilebilir.

 

Örnek6:

 

 

do...while

Budeyim while dan farkı, koşulundöngü sonunda sınanmasıdır. Yani koşul sınanmadan çevrime girilir ve döngükümesi en az bir kez yürütülür. Koşul olumsuz ise döngüden sonraki satırageçilir.

 

Genelyazım biçimi;

 

 

 

 

 

 

do{     ...     döngüdeki deyimler;     ...  }while(koşul);

 

Örnek7:

 

 

for

Diğer döngü deyimleri gibi bir öbeği bir çok keztekrarlamakta kullanılır. Koşul sınaması while da olduğu gibigirmeden yapılır. Bu döngü deyimin içinde diğerlerinden farklı olarak başlangıçdeğeri ve döngü sayacına sahip olmasıdır.

 

Genelyazım biçimi;

 

for(başlangıç;koşul;artım){   ...   döngüdeki deyimler;   ...  }

 

 

Örnek8:

 

 

Örnek9:

 

 

Not:iç-içe bir çok döngü kullanılabilir.

 

break ve continue İfadeleri

Döngü deyimleri içindekiler yürütülürken, çevrimin, koşuldanbağımsız kesin olarak sonlanması gerektiğinde veya döngünün bir sonraki çevrimegeçmesi istendiğinde bu deyimler kullanılır.

 

Örnek10:

 

 

2.2.6 FonksiyonKavramı

 

Çoğu zaman Javascript kodunuzda bir işlemin birden fazlayapılması gerekebilir. Hatta kimi zaman Javascript'e bir işlem yaptırmadan öncebaşka bir işlemi yaptırmak istenebilir. İşte bu tür tekrarlanan işin yapılmasıiçin gerekli işlem ve komut gruplarına Fonksiyon adı verilir. Fonksiyonlargenelde, filanca isimli gruptaki işlemleri yap oradan bir değer al bunu filancaisimli gruba götür gibi işlemler için kullanılır.Bu tür komut sistemleriJavascript'te en çok kullanılan komut türlerindendir. Fonksiyonun yazımkuralları şu şekildedir ;

 

function fonksiyon_ismi(parametre1, parametre2 , .... ) { yapılması istenen işlemler;}

 

Fonksiyona DeğerGönderme ve Değer Alma

Birfonksiyonun Javascript içerisindeki ilk önemli görevi diğer fonksiyonlardanveya herhangi bir yerden bir değer alıp onu kendi içerisinde işletip sonraistenilen fonksiyona veya yere göndermektir.
Bir sonucu bir fonksiyondan çağırmak için return deyimi kullanılır.

 

Örnek11:

 

 

2.2.6 Nesneler veÖzellikleri

 

Günümüzde sıkça kullanılan bir deyim Nesneye YönelikProgramlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamadakullanılan her öğe bir nesne olarak kabul edilir. Bu nesnelerin özelliklerinikullanarak onları değiştirerek program yazılır. Javascript'te bu tür birprogramlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkanformlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibiözellikler de onun yani nesnenin özellikleridir.Örneğin şimdiye kadar çoğu kezkullanılan document.write komutuaslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani document nesnesinin write özelliğinikullanarak html sayfamıza yazı yazdırıyoruz.

 

window Nesnesi

Genelolarak pencere özellikleri ile ilgili bir nesnedir.

 

Pencere açmak vekapamak

Birçok yerde gördüğünüz pencere açma pencerelerin çeşitliözelliklerini değiştirme  bu nesneyardımıyla_yapılmaktadır.

 Pencere açmak için :

window.open("Url_adı" , "pencere_adı" , "pencere_özellikleri");

 

Pencerekapatmak için :

window.close();

 

Pencerekapatmak için window.close() komutuvermek yeterlidir. Burada kapatılan pencere ona kullanılmakta olanpenceredir.Pencere açma işleminde window.open() ilepencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler iseaçılması istenen pencerenin özelliklerini belirtir.

 

Url_adı : Buraya yazılacakdosya ismi açılacak pencerenin içerisinde olacaktır.

window.open("http://www.gantep.edu.tr")

 

veya;

 

window.open("index.html")

 

Pencere_adı : Buaçılacak pencerenin adını belirtir. Birden çok pencere ile işlemleryapıyorsanız

                               hangi pencereye bir komutgönderdiğinizin belli olması için gereklidir.

 

window.open("index.html" , "ana");

 

Pencere_özellikleri : Bu özellikte adından belli olduğu ölçüdepencerenin özellikleri ile

           ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır :

 

menubar   : Tarayıcıların enüst kısmında bulunan File(Dosya) , Edit(Düzen) vb. menülerin

                               bulunduğu satırdır.
toolbar    :  Tarayıcılarda üst kısımdaBack(Geri) , Forward(İleri) vb. tuşların bulunduğu

                                kısımdır.
location   :  Tarayıcılardaziyaret etmek istediğiniz web adresini yazdığınız kısım.
status     :  Tarayıcıların en alt kısmında hangidosyanın yüklendiği ile ilgili bilgi veren

                              kısımdır.
scrollbars : Sağ tarafta bulunan sürgü çubuklarıdır.
resizable  :  Pencerenin boyutlarının kullanıcıyabırakılması veya kesin değerler almasıyla

                              ilgilidir.
width      : Açılacak olanpencerenin piksel cinsinden genişliğidir.
height     :  Açılacak olan pencerenin pikselcinsinden boyudur.
left       : Açılacak olanpencerenin ekranın sol tarafından kaç piksel uzaklıkta olacağını

                               belirler.
top       :  Açılacak olanpencerenin ekranın üstünden kaç piksel aşağıda olacağını belirler.

                Eğer  pencere özellikleri kısmındadeğişmesini istemediğiniz bir özellik varsa onu

                yazmanıza gerek yoktur. Bu değerler tarayıcının banko(default)değerlerinden

   alınır.

200x300 ebatlarında http://www.gantep.edu.tr adresine bağlanan bir pencereaçmak için;

 

window.open ("http://www.gantep.edu.tr", "ana" ," menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)

 

window.location.protocol

window nesnesinin location.protocol nesnesiise yüklenen dosyanın sabit diskten mi yoksa internetten mi yüklendiğinigösterir.

 

if (window.location.protocol == "http:" ) { document.write ("Bu belge Internet'ten geliyor.") } else { document.write ("Bu belge sabit diskten geliyor") }

 

http: Dosyanın internetten yüklendiğini belirtir.
file: Dosyanın sabitdiskten yüklendiğin belirtir.

 

window.history.go

window un history özelliği ile birönceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir formudoldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyıuyardıktan sonra history nesnenisinkullanarak bir önceki sayfaya kullanıcı göndererilebilir.

 

window.history.go(-1)

 

Birönceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha öncekisayfalara da ulaşabilirsiniz.

 

window.status.barkullanımı

status.bar, window nesnesindebelirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dosyayagidileceği veya yüklendiği ile ilgili bilgi veren kısımdır.
 

window.status="Ahmet Hoca iyi günler diler!";

 

window.moveTo(x,y)

IE veyaNN penceresini bir x,y ile belirlenmiş noktaya taşımak için kullanılır. Taşınannokta ekranın sol üst köşesidir. Normalde bu noktanın varsayılan değeri (0,0).

 

Window.moveTo(100,100); // Internet penceresini 100,100 noktasına taşır.

 

Döngüdeyimleri kullanılarak IE veya NN penceresi hareketli durumagetirilebilirsiniz.

 

Örnek 12:

 

Web Sayfama Hoşgeldiniz...

 

Tarayıcı Nesnesi

Tarayıcılar Javascripttarafından bir nesne olarak  algılanır.Bu nesnenin  özelliklerini şöylesıralayabilir.

appname   : Tarayıcı adı
appVersion : Tarayıcının Versionu
appCodeName: Tarayıcının kod adı
userAgent  : Tarayıcınınana makinaya(server) kendini tanıtırken verdiği isim

 

Örnek 13:

 

 

 

2.2.7 InternetExplorer & Netscape Navigator

 

Giriş kısmında belirtildiği gibi Javascript kodlarında MSIE(Microsoft Internet Explorer) ve NN (Netscape Navigator) yönünden farklılıkvardır. Bu tarayıcının html dökümanı nasıl modellediğine bağlıdır. Tarayıcınınnesne döküman modeli, bir Html sayfasındaki çeşitli elemanların tarayıcıtarafından nasıl algılanıp yorumlandığı ile ilgilidir. Tarayıcı farkının nasılayırt edilebileceğini aşağıda anlatılmıştır.

 

ie4 = (document.all) ? true : false ; nn4 = (document.style) ? true : false ;

 

Bu iki satırla ,önceki ders olan değişkenler ve mantıksaloperatörler yardımıyla, iki tarayıcıyı da kontrol altına alınmıştır.

 

 

If(ie4)_ve_if(nn4)
Bu kodları Javascript'in anlayış tarzı şu şekilde olacaktır. Eğernn4 , ie4 değişkenlerinden doğru olanı ie4 ise -ki bunu true ve falsedeğerlerinden algılar- alt satıra geçip ona uygun kodu uygulayacaktır. Şayetie4=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. Aşağıda verilen örnekleridikkatlice inceleyin.

 

Örnek14-1:

 

 

 

 

Örnek14-2:

 

Tarayıcınız Internet Explorer

 

Örnek14-3:

 

Tarayıcınız Netscape Navigator

 

Önemli!: Bu üç (14-1-2-3) Html dosyasınında aynı klasör de olması gereklidir.

 

2.2.8 Olaylar

 

Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçininyaptığı her tür hareket bir bağlantıyı tıklaması , bir resmin üzerine gelmesi ,resmin üzerinde ayrılması , bir formu yanlış doldurup hataya yol açması hep birolaydır.

 

onMouseOver,onMouseOut

Bu tür nesne olayları ,ingilizce adı onMouseOver = fare işaretçisi(imleç) üzerindeyken , onMouseOut = fare işaretçisi üzerinden ayrıldığında, fare işaretçisininistenen bir linkin üzerindeyken ve değilken açıklama yapmak için kullanılır.

 

Örnek15:

 

onMouseOut =disinda() > Webteknikleri.com

 

onLoad , onUnLoad

Bu olaylar bize sayfanın yüklenmeye başlamasında (onLoad) sayfadan ayrılıncaya (onUnLoad) kadar olan yapılacak işlemler için gereklidir. Bir Javascriptfonksiyonun web sayfası yüklenmeye başladığında otomatik olarak çalışmasınıistiyorsak onLoad olayınıkullanırız. Autoexec.bat dosyasınasıl makine açıldığında yapılmak istenenleri yapıyorsa onLoad olayında da sayfa yüklenmeye başladığında nelerin otomatikolarak başlatılacağını belirleyebiliriz. Mesela sayfa yüklenmeyebaşladığında  ziyaretçiye Web sitemiz hoşgeldiniz diyebiliriz. Sayfadan ayrıldığında ise Hoşçakalın diyebiliriz. Websayfası kod açısında iki kısıma ayrılır. Bunlar head ve body kısmıdır. Tarayıcı açısında body kısmı asıl kısımdır. headkısmında sayfanın nasıl görüntüleneceği gibi bölümler yer alır. Bu yüzden onLoad ve onUnload kısmı bodyetiketleri arasında yer alır.

 

Örnek16:

 

 

 

 

onError

Ziyaretçi sayfayı herhangi bir neden yüzünden tam haliyleyükleyememiş olabilir. Bu nedenler aktarım hızı veya tarayıcının Javascriptkodunu tam manasıyla yorumlayamamış olmasıdır. İşte bu durumda Error(hata)oluşur. Html üzerinde oluşan en sık error(hata) resim haritalarının (image-map)tam anlamıyla yüklenmemesinden kaynaklanır. Çünkü bu durumda resim tamyüklenmemiştir. Bu da ziyaretçinin resim üzerinde tıklayacağı yerlerinyorumlanmamasını doğurur.

 

 

onmousedown ve event.button

Websayfanızı ziyaret eden bir kişinin farenin sağ tuşu ile işlem yapmasınıistemiyorsanız bu iki deyimi kullanmalısınız.

 

Örnek17: Bu program parçasını mutlaka web sayfanıza ekleyin!..

 

 

 

2.2.8 Javascriptile DHTML (Dinamik HTML)

 

Bu kısımda Javascript ile Katman(layer) özelliklerinin nasıldeğiştirilebileceğini göreceğiz. Javascript bize html sayfamızı oluşturanönemli unsurlardan biri olan layer(katman) ların tüm özelliklerinideğiştirmemize olanak sağlar. Ayrıca hemen her yerde gördüğünüz resimdeğiştirme tekniğini de bu işlemle yapılır.

 

Katman ÖzellikleriniDeğiştirme

Katman sayfanın üzerinde ne sayfadan bağımsız ne de heryönüyle sayfaya bağlı bir unsurdur. Katman kullanarak istediğimiz herhangi biryapıyı (yazı,resim,video,form) sayfamızın istediğimiz yerine koordinatlarıvermek koşulu ile yerleştirebiliriz. Zaten katmanın kullanım alanı en çokbudur. Şimdi bir katman oluşturalım ve değiştirilebilir özelliklerini görelim.

 

Örnek18:

 

Su anda bir katman(layer)in icerisindeyim

 

Layeroluşturmak istediğinizde

deyimiile kodunuz tamamlarsınız.

 

id        : Katmanın ismi

style     : Katmanınözelliklerini belirtmek için
absolute   : Katmanınkoordinatlarının kesin olacağını belirler
left       : Katmanın soldan kaç piksel sonra başlayacağını belirler
top        : Katmanın üstten kaç piksel sonra başlayacağını belirler
width      : Katmanın kaç piksel genişliğinde olacağını belirler
height     : Katmanınkaç piksel boyunda olacağını belirler
visibility : Katmanın görünür mü görünmez mi olacağını belirler

 

Şimdi de Javascript komutlarıyla bu özelliklerin nasıldeğiştirildiğini görelim. Fakat burada karşımıza bir sorun çıkmaktadır. IE veNN tarayıcılarının doküman nesne modelleri farklı olduğundan katmana ulaşmateknikleri de farklıdır.

 

Internet Explorer kod tekniği

 katman_adı.style.değiştirilmesi_istenen_özellik=yeni_değer;

Örnek :

deneme.style.left=50px;

 

Netscape Navigator kod tekniği
 document.katman_adı.değiştirilmesi_istenen_özellik=yeni_değer;

Örnek :

document.deneme.left=50px;

 

Örnek19: Bu örnek yukarıdaki iki örneği de içermektedir.

 

Bu katmanin yeri degisecek Burayı tıklayın ve katmanınız 100x100'e gitsin Burayı tıklayın ve katmanınız 300x300' gitsin

 

Buradaki örnekte olduğu gibi sizde katmanın diğerözelliklerini (width,height)değiştirebilirsiniz.Fakat görünebilirlik özelliği için özel bir durum vardır. Katman özelliklerineerişimde olduğu gibi bu özellikte de Internet Explorer ve Netscape Navigatorfarklılıkları vardır.

 

Internet Expolorer için görünebilirlik özelliği Katmanı görünebilirkılmak için:
 katman_adı.style.visibility="visible"
Katmanı gizleyebilmek için.

 katman_adı.style.visibility="hidden"

 

Netscape Navigator için Görünebilirlik özelliği Katmanı görünebilirkılmak için:  

  document.katman_adı.visibility="show"
Katmanı gizleyebilmek için.

 document.katman_adı.visibility="hide"

 

Örnek 20:

 

Bu katmanin tikladiginizda yok olacak Burayi tiklayin ve katmaniniz yok olsun Burayi tiklayin ve katmaniniz geri gelsin

 

Sizde bu tıklama özelliklerin değil de onMouseOver ve onMouseOut olayyönlendiricilerini kullanarak çok daha güzel şeyler üretebilirsiniz.