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.

Java Script’in baz? genel ö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.

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

Örnek:

// 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>…</head> etiketleri aras?nda kullan?l?r.
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.
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.
Genel ö?renim yap?m?z di?er programlama dillerine nazaran biraz farkl? olacakt?r. Bu Javascript’in bir script dili olmas?nda ileri gelir.

?imdi ö?renmeye geçi? a?amas?nda konu ba?l?klar?na ?öyle bir göz atal?m.

1. De?i?kenler :

Bu derste Javascript’te oldukça yo?un olarak kullan?lan de?i?kenlerin nas?l bir yaz?m kural? ile olu?turuldu?unu ve kullan?m? anlat?lmaktad?r.

2. Internet Explorer ve Netscape taray?c? farklar? :

Bu derste JavaScript kodlar?n?n daha önceden belirtilen nedenlerden dolay? farkl? kod ihtiyac?n? nas?l giderilebilece?ini görece?iz.

3. Ekrana ç?kt? ve klavyeden bilgi giri?i :

Bu derste istenilen bir uyar? veya de?i?kenin html sayfas?nda gösterilmesini ve klavyeden bilginin nas?l al?nmas? gerekti?ini görece?iz.

4. Ko?ul Yap?lar? :

Bu derste if .. then yap?s? yani istenilen bir olay?n ko?ula nas?l ba?land???n? görece?iz.

5. Döngü Yap?s? :

Bu derste istenilen bir i?lemin birden fazla yap?lmas? istendi?i durumlarda for döngüsünün nas?l kullan?ld???na yer verece?iz.

6. Fonksiyon kavram? :

Bu derste Javascript’in önemli bir k?sm? olan fonksiyonlar? inceleyece?iz. Fonksiyonlar asl?nda birer Javascript program parçac?klar?d?r. Bunlar?n neden ve nas?l kullan?ld??? gibi konular dersin içeri?i aras?ndad?r.

7. Nesneler ve Özellikleri :

Bu derste Javascript’i script dili haline getiren nesneleri ve özelliklerini inceleyece?iz.

8. Olaylar :

Bu derste Nesneleri yönlendirmekte kullan?lan olaylar? inceleyece?iz.

9. Javascript ile DHTML :

Bu derste Javascript’in DHTML üzerinde nas?l etkili olabilece?ini görece?iz.

De?i?kenler

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

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=”webteknikleri”; do?ru
var _rakam=12; do?ru
var a1=123; do?ru
var 3uzler=”üçüzler” yanl??

De?i?ken tan?mlarken bir veya birden fazla bo?luk b?rakmak tan?mlama aç?s?ndan herhangi bir sorun te?kil etmez.
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.

1.2 De?i?kenlerin i?lem operatörleri ile kullan?m?

De?i?kenlere i?lem yapt?rabilecek operatörleri ve özelliklerini inceleyelim. Operatörleri birkaç k?s?ma ay?rarak inceleyelim;

Aritmetik operatörler
Kar??la?t?rmak operatörleri
Mant?ksal operatörler
Özel operatörler

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

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

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

1.2.4. Ö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 :

?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 3*5=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 & Netscape Fark?

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 www.w3c.org) 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.

?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>Taray?c? kontrolü</title>
<head>
<script>
<!– // Kodlar? eski sürüm taray?c?lardan saklayal?m.
function tarayici() {
ie4 = (document.all) ? true : false ;
nn4 = (document.style) ? true : false ;
if (ie4)
{
// MSIE 4.0 için uygun kodlar? buraya yazaca??z.
window.location=”ie.htm”;
}
else
{
// NN 4.0 için uygun kodlar? buraya yazaca??z.
window.location=”nn.htm”;
}
}
//Saklamay? bitir –>
</script>
</head>
<body()>
</body>
</html>

Bu kodlar? herhangi bir editör (NotePad gibi) yard?m?yla yaz?p tara.htm olarak kaydedin.

<html>
<head>
<title>MSIE taray?c? kullan?yorsunuz</title>
</head>
<body>
<h3>Taray?c?n?z Internet Explorer</h3>
</body>
</html>

Bu kodu ie.htm olarak kaydedin.

<html>
<head>
<title>Netscpae taray?c? kullan?yorsunuz</title>
</head>
<body>
<h3>Taray?c?n?z Netscape Navigator</h3>
</body>
</html>

Bu 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 Ç?kt? ve Klavyeden Bilgi Giri?

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.

3.1 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 örne?i”)

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 (“Taray?c?n?z?n türünü giriniz ?” ,”lütfen 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 (“Taray?c?n?z?n türünü giriniz ?” ,”lütfen 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.

3.2 Write()

Html dosyas?na yaz? yazd?rma komutu ise write d?r. Bu kodun yaz?m kurallar?n? inceleyecek olursak;

document.write (“görüntülenmek istenenler” , de?i?ken_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.

Örnek:

<html>
<head>
<title>Prompt , write örne?i </title>
</head>
<body>

<!– //Kodlar? eski taray?c?lardan gizliyoruz
var isim = prompt (“?sminizi Giriniz ” , “Küçük harf veya büyük harf kullanabilirsiniz” );
document.write (“Merhaba ” , isim , ” !” );
// Saklamay? 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 <br> 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…

Ko?ul Yap?lar?

Bu dersimizde Javascript’in en önemli özelliklerinden birine de?inece?iz. Asl?nda bu konu sadece Javascript’in de?il bilgisayar?n da en önemli konusudur. Bilgisayar? bilgisayar yapan konu budur. Çünkü hiçbir bilgisayar kendi kafas?na göre yorum yapamaz. Bizim verdi?imiz belli k?staslar? göz önünde bulundurarak seçim yapar o kadar. ?imdi konunun inceliklerine bir göz atal?m.

4.1 If (E?er)

Javascript’te ço?u dilde oldu?u gibi ko?ul yap?s?n?n kodu If (e?er) komutudur. Yaz?l?m ?ekli ise ?u ?öyledir.

If (a==b)
//ko?ul do?ru ise ilk sat?r i?leme konulur
//ko?ul do?ru de?ilse ilk sat?r?n alt?ndaki komut sat?r? i?leme konulur.

?imdi kodumuzu inceleyelim :

Ko?ul komutu yani if ile i?leme ba?l?yoruz. Daha sonra kar??la?t?r?lacak de?i?kenler veya ba?ka nesneler parantez içerisinde sorgulan?yor. Dikkat ederseniz çift e?ittir kulland?k. Çünkü tek e?ittir i?areti de?er atama i?lemidir. Çift de?i?ken ile ko?ul yap?s? sa?lan?r. E?er ko?ul do?ruysa hemen alt?ndaki sat?r i?leme konulur. E?er ko?ul yanl?? ise ikinci sat?r i?leme konulur. Yok ben ko?ul do?ru ise 2 ve daha çok i?lem yapt?rmak istiyorsan?z bunun cevab? yap?lmas? istenen i?lemlerin { } aras?nda yer almas?d?r. Yani:

If (a==b)
{
// 1.i?lem
//2. ??lem
…
…
}

Hat?rlarsan?z If ko?ul ifadesini 2. dersimizde taray?c? yönlendirirken kulland?k.

4.2 If .. Else (E?er … De?ilse)

Bu bölümde ise If ko?ul ifademize Else komutunu ekleyerek ko?ul yap?m?z? güçlendiriyoruz. ?imdi bu ne demek. Hemen bir örnekle aç?klayal?m.

If ( a==b )
{
// ?unlar? ?unlar? yap
}
else
{
//de?ilse ?unlar? yap
}

Yani örnekten de anla??ld??? gibi if ko?ulu ile a ile b nin e?itli?i kar??la?t?r?l?yor. E?er do?ruysa hemen alt?ndaki k?s?m i?leme konuluyor. Else ile yok de?ilse alt?ndaki k?sm? i?leme koy diyoruz. ?imdi diyeceksiniz ki bir öncekinden ne fark? var. Bu haliyle hiçbir fark? yok. Fakat ?u örne?e bir bakal?m.

If (a==b)
{
//?unlar? yap
}
if (a==c)
{
//?unlar? yap
}
else
{
//?unlar? yap
}

?imdi bu kodda Javascript’e ne yapmas?n? söyledik. a de?i?keni b de?i?kenine e?itse normal olarak alt sat?r? i?leme koy. E?er bu kar??la?t?rma yanl?? ise alt?ndaki i?lemleri geçerek a’n?n c’ye e?itli?i kontrol edilecek. Bu da de?ilse (else) alt sat?rdaki i?lemleri devreye koy.

Else yap?s? genel olarak bir kar??la?t?rma sonucunda cevap yanl?? ise di?er bütün durumlarda ?u i?i yap manas?nda kullan?l?r.

Dersi tam bir Javascript örne?i ile bitirelim:

<html>
<head>
<title>Ko?ul yap?lar? </title>
</head>
<body>
<script>
<!– //eski sürüm taray?c?lardan kodumuzu saklayal?m
var gun = prompt (“Bugün günlerden ne ?” ,”lütfen küçük harf kullan?n?z”);
if (gun==”pazar”)
{
document.write (“Bugün günlerden ” , gun , ” oldu?una göre hatfa sonunday?z” ,”<br>”)
document.write (“<b>” , “?yi tatiller..” , “</b>”)
}
else
{
document.write (“Bugün günlerden pazar olmad???na göre tatil gününde de?iliz !” ,”<br>”)
document.write (“?yi çal??malar..”)
}
//saklamay? bitir–>
</script>
</body>
</html>

Döngü Yap?s?

Javascript’te di?er programlama dillerinde oldu?u gibi istedi?iniz i?lemi 2 veya daha fazla kez yapt?rmak için belli program kodlar? mevcuttur. Bu di?er dillere çok benzer olan for döngü komutudur. Bu komutun yapt??? i?lem , istenilen fonksiyon veya fonksiyon parçalar?n? istenilen de?erde tekrar etmektir. ?imdi ayr?nt?lara geçelim.

for ( de?i?ken_ba?lang?ç_de?erler1 , de?i?ken_ba?lang?ç_de?eri2 ; döngü say?s? ; de?i?ecek_de?i?ken_ad?_ve_türü )
{ yap?lmas? istenen i?lemler }

Burada parantezler içerisinde verilen de?i?ken_ba?lang?ç_de?erler k?sm? ve de?i?ecek_de?i?ken_ad?_ve_türü k?sm?n? yazman?z gerekmez. Döngü içerisinde kullan?lan de?i?ken daha sonra da istenilen ?ekilde artt?r?labilir veya azalt?labilir. Yap? gözünüzü korkutmas?n hemen bir örnekle daha iyi anlayal?m.

for (a=0 , b=0 ; c<=3 ; c++)
{ yap?lmas? istenen i?lemler }
for ifadesi için k?sa yaz?l?m :
var a,b=0;
for (;c<=3;c++)
{ yap?lmas? istenen i?lemler }

?imdi bunu tam bir örnekle daha da peki?tirelim.

Varsal?m ki elimizde bir çarp?m tablosu yapmak istiyoruz. Buna göre 5 say?s? için 1′den 10′a kadar say?lar? bir tablo içerisinde verece?iz. ?imdi bu durumda for döngüsüz 10 adet tablo yazmam?z gerekecekti fakat biz for döngüsü ile i?lemi 1 sat?ra indirgeyece?iz.

<html>
<head>
<title>for döngüsü</title>
</head>
<body>
<script>
<!– //eski sürüm taray?c?lardan kodumuzu saklayal?m
var cevap=0;
for ( sayi=0 ; sayi<=10 ; sayi++)
{
sayi–;
var cevap = 5 * sayi ;
document.write( “5 * ” , sayi , ” =” , cevap ,”<br>”)
}
//saklamay? bitir–>
</script>
</body>
</html>

Burada gördü?ünüz gibi i?lem tek bir sat?ra ingirdendi.

?imdi de for döngüsünün yapmak istedi?imiz i?lemlerde yetersiz kald??? durumlarda kullanabilece?imiz yap?lar? görelim.

5.2 ?artl? döngü yap?s? while

Javascript kodu yazarken -programda bir önceki örnekte oldu?u gibi- sayaç de?i?keninin her de?eri için istedi?iniz i?lemi yapmas?n? istemeyebilirsiniz. Bunun için while komutunu kullan?rs?n?z ki bu Javascript’e “?stedi?im i?i ?u ?art sa?lan?yorsa yap !” demi? olursunuz.

While döngüsünde for döngüsünden farkl? olarak döngü içerisindeki de?i?kenlerin tan?mlanmas? gerekir. ?imdi yaz?m kurallar?na bir göz atal?m.

while ( döngü ?art? ) { ?art do?ruysa yap?lacak i?lemler}
?art do?ru de?ilse yap?lacak i?lemler

5.3 Do .. while yap?s?

Do … while yap?s? genel olarak bir döngünün yap?s?n? e?er ?art do?ruysa tekrar et manas?ndad?r. Yani do ile ba?lang?çta hiçbir ko?ul olmadan i?lem yap?l?r. Daha sonra while ?art? do?ru ise tekrar do yap?s?nda geri dönülür. Bunu bir örnek ile aç?klamak gerekirse;

Örne?in bir ticari siteniz var. ?nsanlar sizden gelip istedikleri ürünleri sat?n al?yorlar. Bir ürün için sipari?lerini verdiler ve bizde bunun kar??l??? olarak ücret + kargo + kdv miktar?n? hesaplad?k ve mü?terimize dedik ki istedi?iniz ürün ?u fiyata ?u gün elinizde olur. Bu hesaplamalar?n hepsini do yap?s? ile yap dedik. Ve sonra sorduk daha ba?ka ürünlerde almak istiyor musunuz ? ??te bu da while yap?s? ile sorulur. ?ayet cevap evet ise do yap?s? tekrarlan?r de?ilse do döngü yap?s?nda ç?k?l?r.

Bu tür bir örnek yapal?m;

Bizim kitap, cd ve kaset satt???m?z varsayal?m. Bizden de 2 kitap ve 3 cd ald???n? varsayarsak;

var kitap=2000000; var cd=3000000; var kaset=1500000;
do {
var kitapistek =prompt (“Kaç tane kitap almak istiyorsunuz ?” , “lütfen rakam giriniz”);
var cdistek= prompt (“Kaç tane cd almak istiyorsunuz ?” , “lütfen rakam giriniz”);
var kasetistek= prompt (“Kaç tane kaset almak istiyorsunuz ?” , “lütfen rakam giriniz”);
var kitaptutar=kitapistek*2000000;
var cdtutar=cdistek*3000000;
var kasettutar=kasetistek*1500000;
var toplamtutar = kitaptutar+cdtutar+kasettutar;
document.write (kitapistek ,” tane kitap “, cdistek ,” tane cd ” , kasetistek , ” tane kaset sipari?iniz al?nm??t?r “, “<br>”);
document.write (“<br>” , “Ald???n?z ürünlerin toplam tutar? = ” ,toplamtutar);
var istek =prompt(“Ba?ka ürünlerde sat?n almak istiyor musunuz ?”, “e veya h giriniz”); }
while (istek=”e”)
document.write (“<br>” ,”Bizden al??veri? yapt???n?z için te?ekkürler”)

5.4 Break ve Continue ?fadeleri

While komutu ile ?art? belirledikten sonra yap?lan i?lemin kesilmesi veya devam etmesi otomatik hale gelmektedir. For döngüsü içerisinde de bu tür bir olay? break ve contine ifadeleri ile gerçekle?tiririz.

Javascript break ifadesini gördü?ü anda döngü i?lemini keser ve bir sonraki komut sat?r?n? i?leme koyar. Continue ifadesinde ise döngü break ifadesindeki gibi kesilir fakat i?leme konulan sat?r bir sonraki sat?r de?ildir. Continue’de döngü ba??na dönülür.

Bir örnek verelim;

for ()
{i?lem1; i?lem2; break; }

Burada i?lem2 ile verilen k?s?mda örnek olarak bir sorgu yap?labilir. Sorgu do?ru ise break ifadesine gelinir ve burada döngü kesilir.

for ()
{ i?lem1; i?lem2; continue;}

Burada yine i?lem2 ile sorgu yap?l?rsa contine ifadesi ile döngünün devam? sürdürülür.

Önemli: Break ve Continue ifadeleri her komutu kesmek veya devam ettirmek için kullan?lamaz. Mesela bir if (E?er) ifadesi ?art do?ru de?ilse break ile kes denilemez. Sadece döngü içerisinde döngünün kesilmesi veya devam ettirilmesi için kullan?labilir.

5.5 Switch-Case ?fadesi

Bu ifade genel olarak menü kullan?m?nda veya sorgu i?lemlerinde i?e yarar. Swicht ile ifade al?n?r case ifadesi ile i?lemler sorgulanarak yap?l?r. Yaz?m kurallar?na bir göz atal?m.

switch (parametreler)
{ case “ifade1″ :
case “ifade2″ :
… }

Bir örnek verelim. Burada web sayfam?zdaki herhangi bir i?lemde ç?k?p ç?kmak isteyip istemedi?i soruluyor. Cevap evet ise i?lem istenilen yönde yönlendiriliyor. Cevap hay?r ise döngüden ç?k?lmaktad?r. Burada kendimizi ziyaretçinin klavyesinde Caps Lock tu?una bas?l? olup olmad???n? önemsemiyoruz. Çünkü ko?ul ifademizi hem küçük harf hem de büyük harfe göre yaz?yoruz.

var sec;
sec = prompt (“Ç?kmak istiyor musunuz ” ,”Evet için E veya e , Hay?r için H veya h giriniz”)
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 çin te?ekkürler”)
break //Ç?k?lmas? istendi?i için döngüyü kesmek için break komutunu kullan?yoruz.

Fonksiyon Kavram?

Ço?u zaman Javascript kodunuzda bir i?lemin birden fazla yap?lmas? gerekebilir. Hatta kimi zaman Javascript’e bir i?lem yapt?rmadan önce ba?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. Fonksiyonlar genelde , filanca isimli gruptaki i?lemleri yap oradan bir de?er al bunu filanca isimli gruba götür gibi i?lemler için kullan?l?r. Bu tür komut sistemleri Javascript’te en çok kullan?lan komut türlerindendir. Fonksiyonun yaz?m kurallar? ?u ?ekildedir:

function fonksiyon_ismi (parametre1 , parametre2 , …. )
{ yap?lmas? istenen i?lemler }

6.1 Fonksiyona De?er Gönderme ve De?er Alma

Bir fonksiyonun Javascript içerisindeki ilk önemli görevi di?er fonksiyonlardan veya herhangi bir yerden bir de?er al?p onu kendi içerisinde i?letip sonra istenilen fonksiyona veya yere göndermektir.

Mesela herhangi bir muhasebe i?leminin yap?l?p bize geri gönderilmesini istedi?imiz dü?ünelim. Genel yap? olarak kodumuz ?u ?ekilde olacakt?r.

Veri1 ve Veri2′nin i?leme konulaca?? fonksiyonlar?n tan?mlanmas?
Veri1′in al?nmas?
Veri2′in al?nmas?
Veri1′in fonksiyona gönderilmesi
Veri2′nin fonksiyona gönderilmesi
Al?nan verilerin ekrana yazd?r?lmas?

?imdi bu genel kodu Javascript’te nas?l yapaca??m?z? görelim :

Burada yapt?klar?m?z? inceleyim.

?lk sat?rlar?n function tan?mlama oldu?unu görüyorsunuz. Burada veri1 , veri2 adl? iki tane fonksiyonu tan?mlad?k. Di?er sat?rlarda prompt komutu ile klavyeden bilgi giri?i sa?lad?k. Daha sonra bu verileri fonksiyonlara göndererek istedi?imiz i?lemi yapt?rd?k ve daha sonrada bunu return yöntemiyle geri ald?k. Bu k?sma kadar yapt???m?z fonksiyona bir de?er göndermekti.

Yeniden bir bak??.veri1(data1) komutuyla prompt yoluyla ald???m?z data1 de?i?kenini veri1 adl? fonksiyona gönderdik. Yani function veri1(ilkveri) ?eklindeki fonksiyona biz data1 de?i?kenin gönderdik. Fonksiyon bu de?eri yani data1 de?i?kenin ald???nda otomatik olarak ilkveri de?i?kenine atad?. Böylelikle ilkveri=data1 oldu. Daha sonra istenilen i?lemler yap?ld?. Ve ard?ndan return ilktoplam de?eri geri gönderildi. Bu de?er daha sonra ekrana yazd?r?ld?. Di?er veri2 adl? de?i?ken için de ayn? tür bir i?lem sözkonusudur.

Nesneler ve Özellikleri

Günümüzde bili?im Teknolojileri ile ilgilene hemen herkesin duydu?u bir terim var. Nesneye Yönelik programlama. Nedir bu Nesneye Yönelik programlama ? Bu tip programlamada kullan?lan her ö?e bir nesne olarak kabul edilir. Bu nesnelerin özelliklerini kullanarak onlar? de?i?tirerek program yaz?l?r. Javascript’te bu tür bir programlama dilidir. Örne?in webde sörf yaparken herkesin kar??s?na ç?kan formlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de onun yani nesnenin özellikleridir.

Örne?in ?imdiye kadar ço?u kez kulland???m?z document.write komutu asl?nda bir nesnenin özelli?ine at?fta bulunmaktan ba?ka bir ?ey de?ildir. Yani document nesnesinin write özelli?ini kullanarak html sayfam?za yaz? yazd?r?yoruz.

7.1 Window Nesnesi

Genel olarak pencere özellikleri ile ilgili bir nesnedir.

7.1.1 Pencere açmak ve kapamak

Birçok yerde gördü?ünüz pencere açma pencerelerin çe?itli özelliklerini de?i?tirme i?te bu nesne yard?m?yla yap?lmaktad?r.

?imdi bu nesneyi nas?l kontrol edece?iz onu görelim.

Pencere açmak için:

window.open(“Url_ad?” , “pencere_ad?” , “pencere_özellikleri”);

Pencere kapatmak için:

window.close();

Pencere kapatmak için window.close() komutu vermek yeterlidir. Burada kapat?lan pencere ona kullan?lmakta olan penceredir.

Gelelim pencere açma i?ine. Burada window.open ile pencerenin aç?lmak istendi?i belirtilir. Parantez içerisinde verilenler ise aç?lmas? istenen pencerenin özelliklerini belirtir.

Url_ad?: Buraya yaz?lacak dosya ismi aç?lacak pencerenin içerisinde olacakt?r.

Örnek :

window.open(“http://webteknikleri/owp/index.htm”)

veya;

window.open(“index.html”)

Pencere_ad?: Bu aç?lacak pencerenin ad?n? belirtir. Birden çok pencere ile i?lemler yap?yorsan?z hangi pencereye bir komut gönderdi?inizin belli olmas? için gereklidir.

Örnek:

Window.open(“index.html” , “ana”);

Pencere_özellikleri: Bu özellikte ad?ndan belli oldu?u ölçüde pencerenin ö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?mda Back(Geri) , Forward(?leri) vb. tu?lar?n bulundu?u k?s?md?r.

location: Taray?c?larda ziyaret etmek istedi?iniz web adresini yazd???n?z k?s?m.

status: Taray?c?lar?n en alt k?sm?nda hangi dosyan?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?ya b?rak?lmas? veya kesin de?erler almas?yla ilgilidir.

width: Aç?lacak olan pencerenin piksel cinsinden geni?li?idir.

height: Aç?lacak olan pencerenin piksel cinsinden boyudur.

left: Aç?lacak olan pencerenin ekran?n sol taraf?ndan kaç piksel uzakl?kta olaca??n? belirler.

top: Aç?lacak olan pencerenin ekran?n üstünden kaç piksel a?a??da olaca??n? belirler. E?er pencere özellikleri k?sm?nda de?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.

?imdi bir pencere açal?m. Açt???m?z pencerede dosya,düzen ve ileri,geri tu? tak?m? olmas?n. Pencerenin boyutlar? 200×300 piksel olsun. Bizi www.webteknikleri.com adresine göndersin.

?imdi buna göre kodumuz :

window.open
(“http://webteknikleri/owp/index.htm”, “webteknikleri” ,” menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300″;)

7.1.2. window.location.protocol

Window nesnesinin location.protocol nesnesi ise yüklenen dosyan?n sabit diskten mi yoksa internetten mi yüklendi?ini gösterir.

http: ile dosyan?n internetten yüklendi?ini belirtir.

file: ile dosyan?n sabit diskten yüklendi?in belirtir.

Mesela ?öyle bir örnekle dosyan?n nerden yüklendi?ini kontrol edelim.

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

7.1.3. window.history.go

Window’un history özelli?i ile bir önceki sayfaya eri?im sa?lanabilir. Örne?in kullan?c? herhangi bir formu doldurmad? ve i?lem yap?lamad? bu durumda bir hata mesaj? ile kullan?c?y? uyard?ktan sonra history nesnenisin kullanarak bir önceki sayfaya kullan?c?y? gönderebilirsiniz. Bunun için gerekli kod yaz?m? ?u ?ekildedir.

Window.history.go(-1)

Bir önceki sayfaya -1 ile ula?abilirsiniz. Bu de?eri artt?rarak daha önceki sayfalara da ula?abilirsiniz.

7.1.4. Status Bar kullan?m?

Status bar window nesnesinde belirtti?imiz gibi taray?c?lar?n en alt k?sm?nda yer alan hangi dosyaya gidilece?i veya yüklendi?i ile ilgili bilgi veren k?s?md?r.

Status bar? de?i?tirmek için ?u kodlar? yazmal?y?z.

window.status=”Webteknikleri’nden Merhaba !”;

Bu ?ekilde kulland???m?z bir status kodu ile sayfa aç?k kald??? sürece Webteknikleri’nden Merhaba ! yaz?s? kar??m?zda olacakt?r.

7.2 Taray?c? Nesnesi

Taray?c?lar Javascript taraf?ndan bir nesne olarak alg?lan?r. Bu nesnenin özelliklerini ?öyle s?ralayabilir.

appname Taray?c? ad?
appVersion Taray?c?n?n Versionu
appCodeName Taray?c?n?n kod ad?
userAgent Taray?c?n?n anamakinaya(server) kendini tan?t?rken verdi?i isim

<html>
<head><title>Taray?c? Özellikleri</title></head>
<body>
<script>
<!–
document.write(“?u anda kulland???n?z taray?c?n?n özellikleri :” , “<br>”);
document.write(navigator.appname + navigator.appVersion + navigator.appCodeName + navigator.useAgent ) ;
–>
</script>
</body>
</html>

7.3 Çerçeve (Frame) Nesnesi

Çerçeve tekni?i bir web sayfas? üzerinde birden fazla web sayfas? görüntülenmek istendi?inde kullan?l?r. Daha ayr?nt?l? bilgi için HTML adl? bölümümüze bak?n?z.

Javascript aç?s?ndan her bir çerçeve bir pencere say?l?r. Bunlar?n içeri?ini kontrol etmek için belli komut stilleri vard?r.

?imdi onlar? görelim:

Top: En üst pencere (Yani taray?c?n?n kendisi)

Parent: Herhangi bir çerçeveyi olu?turan düzenleyici bölüm

Self: Çerçevenin kendisi

Javascript çerçeve düzenleyici(FrameSet)leri içerisindeki di?er alt çerçeveleri 0 ‘dan ba?layarak numaralar. Bu numaralar yard?m?yla çerçeve özelliklerini de?i?tirebiliriz. Örne?in iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] di?eri ise parent.frames[1] olarak adland?r?l?r. Örne?ini verdi?imiz gibi iki çerçeveli bir web sayfam?z oldu?unu varsayal?m.

Ana sayfam?z ki bu sayfa taray?c?ya sayfan?n iki html sayfas?nda olu?tu?unu söyleyen , çerçeve düzenleyicisinin oldu?u sayfan?n kodlar? ?u ?ekilde olsun.

! Uyar?: Bu sayfay? frame.html olarak kaydedin.

<html>
<head><title>Frame (Cerceve)</title></head>
<!– frames –>
<frameset cols=”50%,*”>
<frame src=”sol.html”>
<frame src=”sag.html”>
</frameset>
</html>

Bu sayfay? sol.html olarak kaydedin.

<html>
<head><title>Sol Frame</title></head>
<body>
<script>
<!–
parent.frames[0].document.write(“Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu”, “<br>” , “SOL taraf icin”);
–>
</script>
</body>
</html>

Bu sayfay? sag.html olarak kaydedin.

<html>
<head><title>Sag Frame</title></head>
<body>
<script>
<!–
parent.frames[1].document.write(“Herhangi bir hesaplama vb.unsur icin kullanilacak kod turu”, “<br>” , “SAG taraf icin” );
–>
</script>
</body>
</html>

7.4 Form Nesnesi

Javscript aç?s?ndan Html’in en önemli nesneleri Formlard?r. Çünkü ziyaretçi ile etkile?mede en büyük unsurlardan birisi Formlard?r. Html kendi form nesnesini kendisi olu?turabilir. Bu bak?mdan Javascript’e dü?en bir göre yoktur. Javascript form verilerinin yorumlanmas? ve i?lenmesinde devreye girer. ?imdi form unsurlar?n? tan?yal?m:

Name : Formun ismi
Action : Formun i?lenece?i perl veya cgi program?n?n tan?mlanaca?? etiket
Enctype : Formun kodlanma türü
Method : Formun gönderme(post) mi yoksa alma(get) i?lemi görece?ini belirler.
Target : Pencere ismi
OnSubmit : Gönderme metodunun ismi

Bunlardan yararlanarak bir form nesnesinin kodunu yazal?m.

<form action=”http://www.webteknikleri.com/cgi-bin/mail.pl” method=”POST”>
Form unsurlar?
</form>

?imdi biz bu kodda “Form Unsurlar?” diye bir ?eyden söz ettik. Bu form unsurlar? ziyaretçiden nas?l bilgi al?naca??n? belirleyen unsurlard?r. Bunlar bir metin alan? veya a?a?? dü?meli bir menü olabilir. Form etiketi içerisindeki tüm unsurlar element adl? dizi-de?i?ken içerisine yaz?l?rlar ve form unsurlar? kullan?l?rken bu tip bir at?fta bulunman?z gerekir.

7.4.1 Text Alan?

Text alan? form unsurlar?n?n en önemlilerindendir. Ziyaretçilerden bilgi almak amac?yla kullan?l?r. Kullan?m? ?u ?ekildedir.

?eklinde kullan?l?r. Bu nesnenin kullan?lan etiketleri :

Name : text alan?n?n ismi
Size : text alan?n?n web sayfas?nda görülecek k?sm?n?n büyüklü?ü
Maxlenght : text alan?na en fazla kaç karakter girilebilece?ini belirler.

??te bir tam te?ekküllü text alan?:

Buraya kadar i?imizi Html ile hallettik. ?imdi bu form nesnesinin özelliklerini Javascript arac?l???yla nas?l de?i?tirilebilece?ini görelim. document.form_ismi.elements[numara]. de?i?tirilmek_istenen özellik. numara : de?i?tirilmek istenen eleman?n numaras?d?r

De?i?tirilmek istenen özellikler ?unlar olabilir. value : içerisindeki de?er

lenght: nesnenin uzunlu?u
name: ismi

?imdi bir örnek verelim.(bu örnek bir önceki form içindir)

document.mail.elements[0].lenght=20

7.4.2 ?ifre Alan?

Bu alanlar ?ifreli bilgi almak için kullan?l?r. Bu alana bir bilgi girildi?inde karakterler gözükmez onun yerine asteriks * i?areti görülür.

Bir örnek:

Bu tür form unsurlar?na eri?imde text alan? gibi ayn? ?ekildedir.

7.4.3 Butonlar

Form unsuru olarak iki tür buton vard?r. Bunlar form unsurlar?n? form görevine göre göndermeye veya almaya yönelik Gönder (Submit) dü?mesi bir di?eri ise Form unsurlar?n?n tümünün ilk halini almas?n? sa?layan Sil (Reset) dü?mesidir. ?imdi bunlar?n nas?l kullan?ld?klar?n? görelim.

7.4.4 Radyo (Radio) Dü?meleri

Bu tür dü?melerin en büyük özelli?i radyo dü?meleri gibi olmas?d?r. Yani herhangi bir menü üzerinde sadece bir seçim yapt?rmak istiyorsan?z bu tür form ö?elerini kullan?rs?n?z. ?imdi bunun ile ilgili bir örnek yapal?m.

<HTML>
<HEAD>
<TITLE>Radio</TITLE>
<SCRIPT LANGUAGE = “JavaScript1.2″>
function sorgu (secim)
{var deger = null
for (var i=0; i<secim.length; i++)
{if (secim[i].checked)
{ deger = secim[i].value
break } }
return deger }
</SCRIPT>
</HEAD>
<BODY>
<FORM> <p>
<input value=”Bilemediniz Yazilim”>Microsoft</p>
<p><input value=”Bilemediniz Yazilim”>Borland</p>
<p><input value=”BilemedinizYazilim”>Adobe</p>
<p><input value=”Tebrikler Bildiniz”>Copmaq</p>
<input value=”Bunlardan hangisi bilgisayar ureticisidir”>
</FORM>
</BODY>
</HTML>

Gördü?ünüz gibi bu form unsuruna da(ö?esi) di?er form unsurlar? gibi ayn? ?ekilde ula??l?r. Fakat di?erlerinden farkl? olarak burada checked(seçilmi?) yard?mc? etiketini kulland?k. Burada Javascript ile bir döngü olu?turarak hangi nesnenin seçili(checked) oldu?unu kontrol ediyoruz. Ve alert ile sorulan sorunun cevab?n?n do?rulu?unu ziyretçiye bildiriyoruz.

7.4.5 Select Unsuru

Select ö?esi form nesnelerimizden menü yoluyla ziyaretçi ile etkile?me yollar?ndan bir tanesidir. Bu bir tür seçme kutusudur. A?a?? dü?meli kutu sayesinde kutu içerisindekilerden birisini seçebilirsiniz. Name , Multiple ve Size özelliklerine sahiptir. Bu nesnemizde nesnenin yönelendirilmesi aç?s?ndan onBlur , OnFocus , OnChange özellikleri kullan?labilir. Nesnenin özelliklerine ula??m için en çok kullan?lan etiket yard?mc?s? ise value(de?er) d?r.

Radyo kutular?nda yapt???m?z örne?i ?imdide Select ö?esine uygulayal?m.

<HTML>
<HEAD>
<title>Select</title>
<SCRIPT LANGUAGE = “JavaScript1.2″>
function secim(secilen)
{ return secilen.options[secilen.selectedIndex].value }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<p><SELECT>
<OPTION value=”Bilemediniz Yazilim”>Microsoft</OPTION>
<OPTION value=”Bilemediniz Yazilim”>Borland</OPTION>
<OPTION value=”Bilemediniz Yazilim”>Adobe</OPTION></P>
<OPTION value=”Tebrikler Bildiniz”>Compaq</OPTION></P><br>
<input value=”Bunlardan hangisi bilgisayar ureticisidir” >
</FORM>
</BODY>
</HTML>

Olaylar

Ziyaretçiye sunulan bir web sayfas? üzerinde ziyaretçinin yapt??? 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 bir olayd?r.

?imdi bu olaylar? inceleyelim.

8.1 onClick

Web sayfas? üzerinde bir nesnenin mouse ile üzerine t?klanmas? sonucu onClick olay? gerçekle?ir. Olay?n gerçekle?mesi için mouse’un nesneyi t?klay?p b?rakmas? gereklidir. Yani mouse tu?una bas?ld???nda onClick olay? gerçekle?mi? olmaz. onClick olay? tu?a bas?l?p b?rak?ld?ktan sonra gerçekle?ir. Ba?lant?lar, resimler, form dü?meleri t?klanabilecek nesneler aras?ndad?r.

OnClick yönlendiricisine bu durumda ne yapaca??n? Html etiketleri aras?nda bildirmeniz gerekir. ?imdi bunu bir örnekle aç?klayal?m.

<html>
<head><title>onClick</title>
<script>
<!–
function merhaba()
{alert (“beni tikladiniz”); }
–>
</script></head>
<body>
<input value=”tikla”()>
</body>
</html>

Burada yapt???m?z i?lem html etiketleri aras?nda yer verdi?imiz bir butona t?klama (onClick) ile ne yapaca??n? merhaba fonksiyonuna git diyoruz. Fonksiyonda ekrana bir uyar? ile beni t?klad?n?z diye bir uyar? mesaj? geçiyor.

?imdi burada alert nesnesini de görmü? olduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyar? vermek amac?yla kullan?l?r. Görüldü?ü üzere parantez içerisinde çift t?rnak içine uyar? yaz?s? yaz?l?r.

OnDblClick olay? da onClick olay? ile yap? olarak ayn?d?r. onClick’ten fark? nesneye çift t?kland???nda çal??mas?d?r. Di?er yöntemler onClick ile ayn?d?r.

8.2 onMouseOver , onMouseOut

Bu tür nesne olaylar? ingilizce ad? (onMouseOver = mouse i?aretçisi(imleç) üzerindeyken , onMouseOut = mouse i?aretçisi üzerinden ayr?ld???nda) üzerinde olmakla birlikte mouse’un nesnenin üzerinde olup olmad??? ile ilgilenir.

Bir örnek ile aç?klayal?m:

<html>
<head><title>onMouseOver ve onMouseOut </title>
<script>
<!–
function uzerinde()
{window.status=”T?klay?n ve Webteknikleri.com adresine gidin” }
function disinda()
{window.status=”Webteknikleri.com baglantisina t?klay?n” }
–>
</script></head>
<body>
<a href=”http://www.webteknikleri/index.htm” onMouseOver = uzerinde() onMouseOut =disinda()> Webteknikleri.com </a>
</body>
</html>

onMouseOver ve onMouseOut metodu ile ilgili güzel bir örnek daha :

<html>
<head><title>OnMouseOver</title>
<script>
<!–
function altavista()
{document.web.mesaj.value=”En unlu web motorlarindan biri” }
function altavistasil()
{ document.web.mesaj.value=”" }
function yahoo()
{ document.web.mesaj.value=”En unlulerden bir tane daha” }
function yahoosil()
{document.web.mesaj.value=”" }
function hotbot()
{document.web.mesaj.value=”Ve bir tanesi daha” }
function hotbotsil()
{document.web.mesaj.value=”" }
–>
</script></head>
<body>
<a href=”www.altavista.com” onMouseOut = “altavistasil()”> Altavista</a><br>
<a href=”www.yahoo.com” >Yahoo</a><br>
<a href=”www.hotbot.com” >Hotbot</a><p>
<form>
<input size=”50″>
</form>
</body>
</html>

8.3 onSubmit

Web-de sörf yaparken ço?unlukla kar??m?za ç?kan formlar biz doldurduktan sonra sayfan?n ba?l? bulundu?u server (ana makine) ya gönderilir. Fakat biz bu onSubmit olay? ile form gönderilmeden önce formun düzgün doldurulup doldurulmad???n? kontrol edebiliriz.

Bunu örnek bir kod ile aç?klayal?m. Html sayfam?zda body etiketleri aras?nda doldurulmas?n? istedi?imiz bir form var ve ona ili?kin kod ba?lang?c? ise ?öyle :

Bu sat?r ile formun gönderilmesiyle (onSubmit) dogrula fonksiyonunu ça??r?yoruz.

dogrula fonksiyonu da ?u ?ekilde olabilir.(Bu fonksiyon head etiketleri aras?nda olan script etiketleri aras?nda olmal?d?r.)

function dogrula()
{ confirm (“Formu düzgün doldurduysan?z OK’i t?klay?n?z’); }

Bu fonksiyonda kulland???m?z confirm nesnesi ile kullan?c?ya OK ve Cancel tu?lar? ile emin misin ? Gönderiyorum denilmektedir.

8.4 onReset

Bu olay ile web sayfan?zda bulunan formdaki yazd?klar?n?z?n tamamen silinir. Yani yazd???n?z?n yanl?? oldu?unu farkettiniz bu durumda Sil (Reset) tu?unu t?klars?n?z ve size bo? bir form gelir. Yaln?z burada bir?eyi belirtmek isterim. Reset(Sil) tu?una t?klad?ktan sonra taray?c?n?n back(geri) dü?mesini t?klad???n?zda formunuzda yazd?klar?n?z tekrar geri gelmez. Fakat siz onReset olay? ile bu durum için son bir ziyaretçiye seçenek sunabilirsiniz.

Bunun ile ilgili bir örnek yapal?m :

<html>
<head><title>onReset</title>
<script>
<!–
function sil()
{ return confirm(‘Silmek istediginize emin misiniz?’); }
–>
</script>
</head>
<body>
<form>
<input>
<input value=”sil”>
</form>
</body>
</html>

8.5 onChange

Web sayfas? üzerinde ziyaretçinin de?i?tirebilece?i üç tür alan vard?r. Bunlar text (metin) textarea (geni? metin alan?) select (seçim alan?) d?r. Mouse u bu alanlar üzerine getirip t?klad???n?zda onChange(de?i?ti) olay?n? gerçekle?tirmi? olursunuz. ?imdi bunu select yöntemi ile nas?l oldu?unu görelim. Örne?imizde a?a?? dü?meli bir menü tasarlayaca??z ve ?eçili durumda olan web sayfas?na gönderme yapaca??z.

<html>
<head><title>OnChange</title>
<script>
<!–
function degisti()
{ window.open(“www.altavista.com”); }
–>
</script>
</head>
<body>
<form method=”post”>
<p><select size=”1″>
<option>Adresi tikla
<option>Altavista
</select>
</form>
</body>
</html>

8.6 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 Javascript fonksiyonun web sayfas? yüklenmeye ba?lad???nda otomatik olarak çal??mas?n? istiyorsak onLoad olay?n? kullan?r?z. Eski DOS’çular bilirler 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 otomatik olarak ba?lat?laca??n? belirleyebiliriz. Mesela sayfa yüklenmeye ba?lad???nda (onLoad) ziyaretçiye Web sitemiz ho? geldiniz diyebiliriz. Sayfadan ayr?ld???nda (onUnLoad) ise ?yi sörfler diyebiliriz. Örnek kodlara geçmeden önce ?unu belirtmekte yarar var. Bildi?iniz üzere web sayfas? 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. Head k?sm?nda sayan?n nas?l görüntülenece?i gibi bölümler yer al?r. Bu yüzden onLoad ve onUnload k?sm? body etiketleri aras?nda yer al?r.

?imdi de bunun için gerekli kodlara bir göz atal?m.

<html>
<head>
<title>onLoad onUnLoad</title>
<script>
<!–
function hosgeldiniz()
{
alert(“Web Sitemize Hosgeldiniz”)
}
function gulegule()
{
alert(“Iyi sorfler..”)
}
–>
</script>
</head>
<body >
</body>
</html>

8.7 onError onAbort

Ziyaretçi sayfay? herhangi bir neden yüzünden tam haliyle yükleyememi? olabilir. Bu nedenler aktar?m h?z? veya taray?c?n?n Javascript kodunu 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 tam yüklenmemi?tir. Bu da ziyaretçinin resim üzerinde t?klayaca?? yerlerin yorumlanmamas?n? do?urur.

Örnek :

Ziyaretçi resimlerin yüklenmesi çok uzun sürüp yüklemeyi stop(dur) tu?u ile kestiyse bu durumda onAbort olay? gerçekle?ir. Bunun sonucu olarak ziyaretçiye bir hata mesaj? verebilirsiniz. Bu durum daha önce bahsetti?imiz image-map ler içindir.

Javascript ile DHTML

Bu k?s?mda Javascript ile Katman(layer) özelliklerinin nas?l de?i?tirilebilece?ini görece?iz. Javascript bize Html sayfam?z? olu?turan önemli unsurlardan biri olan layer(katman) lar?n tüm özelliklerini de?i?tirmemize olanak sa?lar. Ayr?ca hemen her yerde gördü?ünüz resim de?i?tirme tekni?ini de görece?iz.

9.1 Katman Özelliklerini De?i?tirme

??e katman nedir sorusuyla ba?layal?m. Katman ad? üzerinde sayfam?z?n üzerinde ne sayfadan ba??ms?z ne de her yönüyle sayfam?za ba?l? bir unsurdur. Katman kullanarak istedi?imiz herhangi bir yap?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 çok budur. ?imdi bir katman olu?tural?m ve de?i?tirilebilir özelliklerini görelim.

<html>
<head><title>Layer</title></head>
<body>
<div style=”position:absolute ; left:100px ; top:200px;
width:300px ; height:400px ; visibility:visible” >
Su anda bir katman(layer)in icerisindeyim
</div>
</body>
</html>

Layer olu?turmak istedi?inizde <div> etiketi ile ba?lar </div> etiketi ile kodunuz tamamlars?n?z. ?imdi katman özelliklerine geçelim :

id : Katman?n ismi
style : Katman?n özelliklerini belirtmek için
absolute : Katman?n koordinatlar?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?n kaç 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?l de?i?tirildi?ini görelim.

Fakat burada kar??m?za bir sorun ç?kmakta. Internet Explorer ve Netscape taray?c?lar?n?n doküman nesne modelleri farkl? oldu?undan katmana ula?ma teknikleri 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;

?imdi bir örnekle bir katman?n yerinin nas?l de?i?tirilebilece?ini görelim.

<html>
<head><title>Katman</title>
<script>
<!–
function tara()
{ var tarayici= navigator.appName
if (tarayici==”Netscape”) degisim = document.katman;
if (tarayici==”Microsoft Internet Explorer”) degisim = katman.style; }
function hareket1() {
degisim.left=100
degisim.top=100 }
function hareket2() {
degisim.left=300
degisim.top=300 }
–>
</script></head>
<body>
<div style=”position:absolute ; left:400px; top:10px”>
Bu katmanin yeri degisecek
</div>
<p><p><p>
<a href=”javascript:hareket1()”>Buray? t?klay?n ve katman?n?z 100×100′e gitsin</a><br>
<a href=”javascript:hareket2()”>Burayi t?klay?n ve katman?n?z 300×300′ gitsin</a>
</body></html>

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 özelliklerine eri?imde oldu?u gibi bu özellikte de Internet Explorer ve Netscape Navigator farkl?l?klar? vard?r.

Internet Expolorer için Görünebilirlik özelli?i

Katman? görünebilir k?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ünebilir k?lmak için:

document.katman_ad?.visibility=”show”

Katman? gizleyebilmek için:

document.katman_ad?.visibility=”hide”

?imdi de bununla ilgili bir örnek yapal?m.

<html>
<head><title>Katman</title>
<script>
<!–
function sakla()
{ var tarayici= navigator.appName
if (tarayici==”Netscape”) document.katman.visibility=”hide”
if (tarayici==”Microsoft Internet Explorer”) katman.style.visibility=”hidden” }
function goster()
{ var tarayici= navigator.appName
if (tarayici==”Netscape”) document.katman.visibility=”show”
if (tarayici==”Microsoft Internet Explorer”) katman.style.visibility=”visible” }
–>
</script></head>
<body>
<div style=”position:absolute ; left:400px; top:10px”>
Bu katmanin tikladiginizda yok olacak
</div><p><p><p>
<a href=”javascript:sakla()”>Burayi tiklayin ve katmaniniz yok olsun</a><br>
<a href=”javascript:goster()”>Burayi tiklayin ve katmaniniz geri gelsin</a>
</body></html>

Javascript Nedir?

De?i?kenler

1.1 Genel De?i?ken Özellikleri

1.2 De?i?kenlerin i?lem operatörleri ile kullan?m?

1.2.1 Aritmetik Operatörler

1.2.2 Kar??la?t?rma operatörleri

1.2.3 Mant?ksal Operatörler

1.2.4. Özel kar??la?t?rma Operatörü

Internet Explorer & Netscape Fark?

Ekrana Ç?kt? ve Klavyeden Bilgi Giri?

3.1 Prompt ()

3.2 Write()

Ko?ul Yap?lar?

4.1 If (E?er)

4.2 If .. Else (E?er … De?ilse)

Döngü Yap?s?

5.2 ?artl? döngü yap?s? while

5.3 Do .. while yap?s?

5.4 Break ve Continue ?fadeleri

5.5 Switch-Case ?fadesi

Fonksiyon Kavram?

6.1 Fonksiyona De?er Gönderme ve De?er Alma

Nesneler ve Özellikleri

7.1 Window Nesnesi

7.1.1 Pencere açmak ve kapamak

7.1.2. window.location.protocol

7.1.3. window.history.go

7.1.4. Status Bar kullan?m?

7.2 Taray?c? Nesnesi

7.3 Çerçeve (Frame) Nesnesi

7.4 Form Nesnesi

7.4.1 Text Alan?

7.4.2 ?ifre Alan?

7.4.3 Butonlar

7.4.4 Radyo (Radio) Dü?meleri

7.4.5 Select Unsuru

Olaylar

8.1 onClick

8.2 onMouseOver , onMouseOut

8.3 onSubmit

8.4 onReset

8.5 onChange

8.6 onLoad , onUnLoad

8.7 onError onAbort

Javascript ile DHTML

9.1 Katman Özelliklerini De?i?tirme

Son twitter mesajlarım

Kullanıcı girişi

Bağlantılar