Java Script Nedir ? Java Script Dersler

'Black-King · 18 Tem 2013

En kısasından ;

JavaScript Nedir?

JavaScript Netscape firması tarafından geliştirilmiş olan bir script dilidir. Script dilleri Web sayfası hazırlayanlara etkileşimli ve dinamik sayfalar hazırlama imkanı vermektedir. JAVA dilinin özelliklerine ve komut yapısına çok benzeyen JavaScript aslında JAVA dilinden ayrı olarak hazırlanmıştır.

Javascript yardımı ile HTML kaynak kodları değiştirilebilir, bu sayede dinamik Web sayfaları hazırlamak mümkün olur. Javascript ile hazırlanmış Web sayfaları ancak JavaScript desteği veren Web tarayıcıları ile izlenebilir. En popüler tarayıcılardan olan Netscape Navigator ve Internet Explorer tarafından desteklenmektedir. Javascript ile hazırlanan Web sayfalarından tam randıman alabilmek için iki tarayıcının da en son sürümlerini kullanmanızı (en azından 4.x ve üstü) öneririz.

Detaylı bilgi ;

1. JavaScript Nedir?

HTML dili her ne kadar metinler üzerinde neredeyse her türlü düzenlemeyi yapmamıza izin verse de, zayıf kaldığı bazı yönler vardır; mesela HTML bize web sayfalarına bir 'iş' yaptırtma, onları değişik olaylara veya durumlara duyarlı hale getirme imkanı sunmaz. Bu eksikliği Netscape firmasının yetkilileri de farketmiş olacak ki Aralık 1995 tarihinde, C dilinin browser'lara uyarlanmış hali diyebileceğimiz JavaScript'i piyasaya sürdüler.

Tam bu dönemde Sun Microsystems Pascal ve Delphi dillerinden esinlerek oluşturduğu 'Java' isimli bir programlama dilini piyasaya sürmek üzereydi. Netscape'in piyasaya sürdüğü script dilinin ismini JavaScript koyması, o dönemde çok telaffuz edilen 'Java' kelimesinin popüleritesinden yararlanmak adına uyguladığı bir pazarlama stratejisiydi, yani pek çok kişinin düşündüğünün aksine Java ile JavaScript arasında isim benzerliği hariç hiçbir benzerlik yoktur.

Bir süre sonra Microsoft da olaya el attı ve JavaScript'le neredeyse aynı olan JScript'i piyasaya sürdü.Fakat sonra bu diller farklı yönlere doğru geliştiler. Şu anda Netscape tarayıcısı JScript'i tanımıyor, fakat Explorer her iki script'i de tanıyor. Yine de iki tarayıcının JavaScript'i yorumlamaları bazen farklılık gösterebiliyor.

'JavaScript nedir?' sorusuna dönersek :

Netscape'in piyasaya sürdüğü script dilidir.

JavaScript HTML kodlarının içine yazılır. Yazılan kodun bir JavaScript kodu olduğu browser'a <script>...</script> etiketleri ile bildirilir.

Tıpkı HTML gibi, JavaScript kodları da yorumlanmak için bir browser'a ihtiyaç duyarlar, yani sonuçta '.exe' uzantılı, bağımsız olarak çalışabilecek bir dosya oluşmaz.

JavaScript bir olay halinde işler; olay JavaScript açısından ziyaretçinin bir yere tıklaması, bir tuşa basması vs. olabilir.

JavaScript ile neler yapılabilir?

JavaScript ile bir web sayfasına yukarıda tanımladığımız biçimde herhangi bir olayın gerçekleşmesi halinde herhangi bir iş yaptırabiliriz. Örnegin sayfada bir butona basıldığında sayfadaki bir 'text' kutusunun içine 'Click!' yazdırabiliriz. Burada olay ziyaretçinin butona tıklaması, iş ise text kutusuna 'Click!' yazılmasıdır... Javascript dilinde neredeyse olası her olay tanımlanmıştır, dolayısıyla yapılabilecek şeyler çok geniştir.

Javascript'i öğrenmeye geçmeden önce bir öneri: Sadece gerektiği zaman Javasript'i kullanın. Gereksiz kullanımlar sayfanın boyutunu şişireceği gibi, sayfanızın estetiğini ve kullanışlılığını de olumsuz yönde etkileyecektir.

2. JAVASCRIPT'IN GENEL YAPISI VE İLK JAVASCRIPT

JavaScript kodları <script>...</script> etiketleri arasına yazılır. Script etiketinin işimize yarayacak iki parametresi vardır, bunlar:
src: Harici bir JavaScript belgesini '.js' uzantılı kaydedip bu parametre ile çağırabiliriz.

language: Bu parametre 'Javascript', 'JavaScript1.1' veya 'JavaScript1.2' değerlerini alır.En son sürümü kullanmak her zaman daha güvenlidir.
JavaScript kodlarının yapısı ise böyledir:

Kod:

[font=monospace][color=#666666]<[/color]script[color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [/font]

Buradaki '' ifadeleri yazılan kodları eski sürüm browser'lardan gizler
İLK JAVASCRİPT

Aşağıdaki kod sadece yukarıda verilen şablonun HTML belgesinin içine nasıl yerleştirildiğini görmeniz ve JavaScript hakkında bir fikir sahibi olmanız için verilmiştir. Dolayısıyla kodu satır satır anlamaya çalışmayın. İşte 'Merhaba Dünya!'

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title> [color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script[color=#666666]>[/color] [color=#008000][b]function[/b][/color] merhaba() { alert([color=#BA2121]'Merhaba Dünya!'[/color]) } [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form[color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] value[color=#666666]=[/color][color=#BA2121]"Tıklayın!"[/color] onClick[color=#666666]=[/color][color=#BA2121]"merhaba()"[/color][color=#666666]>[/color] [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

3. DEĞİŞKENLER

Değişkenlere geçmeden önce JavaScript'deki değerleri tanıyalım:

Sayı Değerleri: Sayı değerleri tamsayı (integer literal) ve kesirli sayı (floating-point literal) olmak üzere ikiye ayrılır. Örneğin: 12; 567; 55,23423...
Boolean ifadeleri: Boolean mantığı iki sonuç verir: Doğru veya yanlış. Doğru '1' veya 'true', yanlış ise '0' veya 'false' ile ifade edilir.
String değerleri:Çift tırnak veya tek tırnak içinde gösterilen string değerleri, JavaScript açısından 'metin' olarak değerlendirilir.Örneğin: "Merhaba!"; "İstanbul 34"; "342,345"...
DEĞİŞKENLER

Değişken kendisine ketfi bir değer atayıp bu değeri programın herhangi bir yerinde değiştirmemize olanak veren bir unsurdur. Değişkenleri browser'a 'var' anahtar-kelimesiyle bildiririz, ve onları -ilk karakterlerinin rakam veya '_' olmaması, ve tabi türkçe karakter içermemeleri şartıyla- istediğimiz gibi adlandırabiliriz.

var degisken, var sonuc, var sayac...
Değişkenlere değer atama (initialization) ise aşağıdaki gibi olur:

değişken= "kitap", sonuc= 34, sayac= true
Veya iki işi aynı anda da yapabiliriz:

var degisken="kitap", var sonuc= 34, var sayac= true
Bu genel tanımdan sonra JavaScript'in değişken türlerine bir göz atalım:

Sayı Değiskenler: Ondalık veya tamsayı değerini alırlar, bu değişkenlerle aritmetik işlemler yapılabilir.Örneğin: 'var cevap= 44,56'
Boolean Değişkenler: '1'; 'true' veya '0'; 'false' değerlerini alan değişkenlerdir: 'var dogruMu: true'
String Değişkenler: String değeri alırlar, '+' operatörüyle iki string birbirine bağlanabilir, aşağıda 'hepsi' değişkeninin değeri "Javascript" string'i olacaktır:
'var bas= "Java", son="Script"
var hepsi= bas+son'
Fonksiyon değişkenleri: Bu değişkenleri tanımlamak için 'function' ifadesini kullanırız. Fonksiyonlar JavaScript'e bir iş yaptırmamızı sağlarlar.Fonksiyonları ileride başlıbaşına bir konu olarak göreceğiz, şimdilik fazla üzerinde durmayalım.
Dizi-değişkenler (Array): Array'ler ile farklı değerleri bir dizinin elemanı olarak aynı ad altında toplayabilir, gerektiğinde kullanmak üzere çağırabiliriz:
var dizi = new Array(eleman1,eleman2,eleman3,eleman4) //dizi isimli bir array'e 4 farklı değer verdik
var yeni = dizi[2] //yeni isimli değişkene dizinin 3. elemanını atadık.
Yukarıda bir yazım hatası yoktur, JavaScript saymaya sıfırdan başladığı için 'dizi[2]' ifadesi dizinin 3. elemanı olan "eleman3" e eşittir.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]değişkenler[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] tarih[color=#666666]=[/color][color=#666666]1974[/color] [color=#008000][b]var[/b][/color] araba[color=#666666]=[/color][color=#BA2121]"Jaguar"[/color] [color=#408080][i]//değişkenleri bildirip değerlerini atayalım [/i][/color]documént.write(tarih[color=#666666]+[/color][color=#BA2121]" "[/color][color=#666666]+[/color]araba[color=#666666]+[/color][color=#BA2121]"<br>"[/color]) tarih[color=#666666]=[/color][color=#666666]1975[/color] [color=#408080][i]//tarih değişkeninin değerini değiştirelim [/i][/color]documént.write(tarih[color=#666666]+[/color][color=#BA2121]" "[/color][color=#666666]+[/color]araba) [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

4. OPERATÖRLER

Assignment(atama) operatörü

JavaScript'in(ve bütün programlama dillerinin) temel operatörü olan atama operatörü '=' işaretiyle ifade edilir, işaretin sağındaki değeri(veya değişkenin değerini), solundaki değişkene atar.
'var sayi = 34 ; var sayi2 = sayi'

Aritmetik operatörler

'+' :Sayı değişkenleri toplamaya, string değişkenleri birbirine eklemeye yarar.
'-' : Sayı değişkenlerde çıkartma işlemini yapar.
'*' : Sayı değişkenlerde çarpma işlemini yapar.
'/ ' : Bölme işlemi yapar.
'%' : Modülüs işlemi. '10%3' ifadesinin matematikteki karşılığı '10 mod 3' ifadesidir ve sonuç 1 çıkar.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Aritmetik operatörler[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Aritmetik operatörlerden bahsetmişken JavaScript'in bazı kısaltmalarından bahsedelim

'a = a + b' ifadesini kısaca 'a+=b' şeklinde yazabiliriz.
Aynı kısaltma diğer işlemler için de geçerlidir(a-=b; a/=b, a*=b)
a = a + 1 ifadesini a++; a = a - 1 ifadesini ise kısaca a-- şeklinde yazabiliriz.

Karşılaştırma operatörleri

Karşılaştırma operatörleri, temsil ettikleri karşılaştırmanın sonucu doğruysa true, yanlışsa false değerini verirler.

'==' : Eşit operatörü, eğer iki tarafın değeri eşitse true sonucunu verir.
'!=' : Eşit değil operatörü, eğer iki tarafın değeri eşit değilse true sonucunu verir.
'< ' : Küçüktür operatörü, sol taraf küçükse true sonucunu verir.
'> ' : Büyüktür operatörü, sol taraf büyükse true sonucunu verir.
'<=' : Küçük eşittir operatörü, sol taraf küçükse veya iki taraf eşitse true sonucunu verir.
'>=' : Büyük eşittir operatörü, sol taraf büyükse veya iki taraf eşitse true sonucunu verir.
Bu ve diğer operatörler için verilen örnekleri yeni bir HTML belgesinin body bölümüne yazın

Kod:

[font=monospace][color=#666666]<[/color]pre[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/pre> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Şart operatörü

Bu operatörü bir örnek üzerinde öğrenelim:
(a==b)? "Iki degisken esittir!":"Iki degisken esit degildir!"
Bu operatörün kullanımında parantez içerisine bir şart yazılır, ki burada o şart x ve y değişkenlerinin eşit olmasıdır, eğer bu şart doğruysa soru işaretinden hemen sonraki işlem, aksi takdirde ':' işaretinden sonraki işlem yapılır.

Kod:

[font=monospace][color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [/font]

Mantıksal operatörler

Eğer karşılaştırmayı birden fazla durumu dikkate alarak yapacaksak mantıksal operatörleri kullanırız.

'&&' : 'And(ve)' operatörü: Koşulların hepsi doğru ise true değerini verir.
'|| ' : 'Or(veya)' operatörü: Koşulların en az birinin doğru olması halinde true değerini verir.
'! ' : 'Not' operatörü: Koşulların hepsinin yanlış olması durumunda true değerini verir.

Kod:

[font=monospace][color=#666666]<[/color]pre[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/pre> [/font]

5. BİLGİ GİRİŞ ÇIKIŞI

JavaScript ile fonksiyon yazarken bazı noktalarda ziyaretçiden bir bilgi almanız veya ona bir şey onaylatmanız gerekebilir. Tabi bazı verilerin de ekrana yazılması gerekir. Şimdi bunu JavaScript'le nasıl yapabileceğimizi görelim.

Bilgi girişi

prompt()
Ziyaretçiden ismi adresi gibi bir 'text' almak promt fonksiyonuyla mümkündür.

prompt("Sorulacak soru","Varsayılan cevap")
Aşağıdaki örneği body bölümüne <script>...</script> etiketleri arasına yazın.

prompt("Adınız nedir?","isim")
confirm()
Ziyaretçinin onayını almak için kullanılır. Ziyaretçi açılan kutuda 'yes' e tıklarsa true, 'no' ya tıklarsa false değerini verir.

confirm("Sorulacak soru")
confirm("Emin misiniz?")
Bu iki fonksiyonun içinde değişken de kullanabiliriz. Örneğin isim diye bir değişkenimiz olsun, bu değişkenin değerini "Ahmet" alalım. Aşağıdaki kod "Adın Ahmet mi?" diye soracak:

confirm("Adın "+isim+" mi?")
Bilgi Çıkışı
write() fonksiyonu
Write fonksiyonu bize istediğimiz bir yere yazı yazma olanağı sağlar. Bu yer browser penceresi olabileceği gibi, yeni bir pencere veya bir textarea da olabilir.Biz şimdilik bunlardan ilki üzerinde duracağız.

documént.write("Yazılacak metin veya"+değişken)
Bu fonksiyon yerine documént.writeln() fonksiyonunu kullanabilirsiniz, bu fonksiyon yazdıklarınız bitince satırbaşı yapar.

alert()
Bu fonksiyonun içine yazdığımız metin, fonksiyon çağırıldığında ekranda beliren bir kutu içerisinde görüntülenir. Bu kutu üzerindeki 'ok' düğmesine basmılmadan kapanmaz.

alert("Yazılacak metin")
Şimdi bütün bunları bir örnek üzerinde görelim:

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Bilgi giriş çıkışı[color=#666666]<[/color]/title> [color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] isim[color=#666666]=[/color]prompt([color=#BA2121]"Adınız nedir?"[/color],[color=#BA2121]"isim"[/color]) [color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color]confirm([color=#BA2121]"Adınız ekrana yazılsın mı?"[/color]) [color=#008000][b]var[/b][/color] yaz[color=#666666]=[/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color])[color=#666666]?[/color] isim [color=#666666]:[/color] [color=#BA2121]"Peki, yazılmasın! "[/color] documént.write(yaz) cevap[color=#666666]=[/color]confirm([color=#BA2121]"Adınız bir alert kutusuna yazılsın mı?"[/color]) yaz[color=#666666]=[/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color])[color=#666666]?[/color] isim [color=#666666]:[/color] [color=#BA2121]"Peki, yazılmasın! "[/color] alert(yaz) [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

6. KOŞUL İFADELERİ

JavaScript ile program yazarken program akışının her zaman yukarıdan aşağıya olmasını istemeyebiliriz. Bu durumda koşul ifadeleri devreye girer. Bu ifadelerle browser'a programın bir noktasında bir koşul belirtip, bu koşul doğruysa bir iş yapmasını, doğru değilse başka bir iş yapmasını söyleyebiliriz. Ya da daha karmaşık durumlar tanımlayabiliriz. Bütün bu işleri koşul ifadeleri 'if' ve 'else' 'i yerinde kullanarak başarabiliriz.

If ifadesi

If ifadesi, eğer verilen koşul doğruysa true, değilse false değerini verir. Aşağıda if'in kullanımını görüyorsunuz.

if (koşul)
{
Koşul sağlanıyorsa yapılacaklar
}
İf...else
If ifadesiyle bir veye birkaç koşul belirttiğimizde, oluşabilecek bir durum da bu koşul veya koşullardan hiçbirinin gerçeklenmemesidir. İşte bu durumu else ifadesiyle belirtiriz. Yani if ile browser'a 'verdiğim koşul doğruysa şunu yap', else ifadesiyle 'aksi takdirde şunu yap' deriz.

If ve else ifadelerinin kullanımları aşağıdaki gibidir.

if (koşul)
{
koşul doğruysa yapılacak iş
}
else
{
Bunun dışındaki her durumda yapılacak iş
}
Eğer birden fazla koşul belirtmek istersek ilk if'den sora else if ifadesini kullabilir ve bu koşullarda yapılacak işleri belirleyebiliriz. Bunun anlamı şudur: 'Eğer(if) a şartı gerçekleniyorsa şunu yap, bunun dışında(else if) eğer b şartı gerçekleniyorsa şunu yap,bunların dışındaki durunmlarda(else) şunu yap!' .Bu durumda else ifadesi verilen koşulların hiçbirinin gerçeklenmediği durumları kapsar. Bu karışık ifadeyi ve koşul yapısını aşağıdaki örneğe bakarak anlayabilirsiniz...

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title> [color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"javaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] cevap1[color=#666666]=[/color]prompt([color=#BA2121]"54 + 21 = ?"[/color],[color=#BA2121]"cevap?"[/color]) [color=#408080][i]//İlk soruya verilecek cevabı cevap1'e atıyoruz [/i][/color] [color=#008000][b]var[/b][/color] cevap2[color=#666666]=[/color]prompt([color=#BA2121]"20 / 4= ?"[/color],[color=#BA2121]"cevap?"[/color]) [color=#408080][i]//2. soruya verilecek cevabı cevap2'e atıyoruz [/i][/color] [color=#008000][b]if[/b][/color](cevap1[color=#666666]==[/color][color=#666666]75[/color] [color=#666666]&&[/color] cevap2[color=#666666]==[/color][color=#666666]5[/color]) [color=#408080][i]//Eğer 1. cevap 75'e, 2.cevap 5'e eşit ise... [/i][/color] alert([color=#BA2121]"Cevapların ikisi de doğru"[/color]) [color=#408080][i]//Bu mesajı yaz [/i][/color] [color=#008000][b]else[/b][/color] [color=#008000][b]if[/b][/color](cevap1[color=#666666]!=[/color][color=#666666]75[/color] [color=#666666]&&[/color] cevap2[color=#666666]!=[/color][color=#666666]5[/color]) [color=#408080][i]//Eğer sadece cevap1 doğruysa... [/i][/color] alert([color=#BA2121]"Cevapların ikisi de yanlış"[/color]) [color=#408080][i]//Bunu yaz [/i][/color] [color=#008000][b]else[/b][/color] [color=#408080][i]//Yukarıdaki iki durumun dışındaki bir durumda, [/i][/color] [color=#408080][i]//Yani sadece bir cevabın doğru olması halinde [/i][/color] alert([color=#BA2121]"Cevapların sadece biri doğru"[/color]) [color=#408080][i]//Bunu yaz! [/i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Bu örnekte, tanımda kullandığımız küme parantezlerini '{}' kullanmadık. Bunun nedeni koşul doğruysa yapılacak tek bir iş vermemizdir. Bu durumda JavaScript bu işin hemen üstündeki if'e ait olduğunu anlar. Fakat koşul doğruysa birden fazla iş yaptıracaksak bunları küme parantezleri içinde vermemiz gerekir.

7. DÖNGÜLER

Döngüler, kendilerine verilen koşul gerçeklendiği sürece aynı işi yapmaya devam eden fonksiyonlardır. Bu iş ,örneğin 1'den 100'e kadar saymak olabilir. Bu durumda bir sayaç oluşturulur. Bu sayacın değeri 1'den başlatılır, sayaca 100'e kadar sayması söylenir, ve her adımda sayacın değeri ekrana yazdırılır. Böylece 2 satırda 100 satırlık iş yaptırmış oluruz. JavaScript bize for, while, do...while ve switch döngülerini kullanma imkanı verir.

For döngüsü

For döngüsünün yazılışı aşağıdaki gibidir:

for (sayac = 1 ; sayac < 101 ; sayac++)
{
Bu iş 100 kez yapılacak!
)
Yukarıdaki döngüyle browser'a sayac değişkeninin değerini birer birer(sayac++),1'den(sayac= 1) 100'ekadar(sayac<101) arttırmasını ve her seferinde küme parantezi içinde belirtilen işi yapmasını söyledik. Burada 1 ve 101 yerine istenilen değer gelebilir,ayrıca artış değerini de istediğiniz gibi değiştirebilirsiniz( artışı n yapmak için sayac+=n ifadesini kullanın).Sayac değişkeninin adı da istediğiniz herhangi bir değişken adı olabilir. Yine if ifadesinde olduğu gibi döngüye yapacak tek bir iş verirsek küme parantezi kullanmaya gerek yok.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] documént.write([color=#BA2121]"1-10 arası sayıların kareleri ve küpleri<p>"[/color]) [color=#008000][b]for[/b][/color](i[color=#666666]=[/color][color=#666666]0[/color]; i[color=#666666]<[/color][color=#666666]10[/color] ; i[color=#666666]++[/color]) documént.write(i,[color=#BA2121]" "[/color], i[color=#666666]*[/color]i,[color=#BA2121]" "[/color],i[color=#666666]*[/color]i[color=#666666]*[/color]i,[color=#BA2121]"<br>"[/color]) [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

While: Şartlı döngü

For' dan farklı olarak while dongüsünde bir şart verilir, while 'da bu şart gerçeklendiği sürece while, kendisine verilen işi yapar.

while(şart)
{
Yapılacak işler
}
İşte size biraz ısrarcı bir script!

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color][color=#008000][b]false[/b][/color] [color=#008000][b]while[/b][/color](cevap[color=#666666]==[/color][color=#008000][b]false[/b][/color]) cevap[color=#666666]=[/color]confirm([color=#BA2121]"Siteme tekrar geleceksiniz değil mi !?"[/color]) [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Do...while

Bazen karşımıza öyle bir durum çıkar ki, koşullar ne olursa olsun önce bir iş yaptırmamız, sonra bir şart belirtip bu şart gerçeklendiği sürece işin yapılmasını sağlamamız gerekir. Mesela bir mail list'imiz var ve ziyaretçiye bu listeye üye olmak isteyip istemediğini soracağız. Fakat istiyoruz ki bu ziyaretçi arkadaşlarını da listemize kaydettirsin. Bu işin içinden do...while döngüsünün yapısının altındaki örneği yazarak çıkabiliriz...

do
{
En az bir kere yapılacak iş
}
while(şart)
Şart gerçeklenmediğinde yapılacak işler.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]><[/color] BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color][color=#008000][b]do[/b][/color]...[color=#008000][b]while[/b][/color][color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] sayac[color=#666666]=[/color][color=#666666]0[/color] [color=#008000][b]var[/b][/color] ePostalar[color=#666666]=[/color][color=#BA2121]" "[/color] [color=#008000][b]do[/b][/color]{ [color=#008000][b]var[/b][/color] ePosta[color=#666666]=[/color]prompt([color=#BA2121]"Email listesi üelik başvurusu"[/color],[color=#BA2121]"e-mailiniz"[/color]) [color=#008000][b]var[/b][/color] cevap[color=#666666]=[/color]confirm([color=#BA2121]"Başka birini daha üye yapmak ister misiniz?"[/color]) sayac[color=#666666]++[/color] ePostalar[color=#666666]+=[/color](ePosta[color=#666666]+[/color][color=#BA2121]", "[/color]) } [color=#008000][b]while[/b][/color](cevap[color=#666666]==[/color][color=#008000][b]true[/b][/color]) alert([color=#BA2121]"Adresleri"[/color][color=#666666]+[/color]ePostalar[color=#666666]+[/color][color=#BA2121]"olmak üzere "[/color][color=#666666]+[/color]sayac[color=#666666]+[/color][color=#BA2121]" kişi kaydedilmiştir. Tesekkür ederiz!"[/color]) [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Break ve Continue ifadeleri

Bu ifadeler dönguler içinde kullanılırlar.Bir döngü içerisinde break ifadesini kullandığımız noktada döngü koşullar ne olursa olsun sonlanır. Continue ifadesi ise kullanıldığı yerde döngünün o adımının atlanmasını sağlar. Örneğin 0'dan 100'e kadar sayan bir döngüye
(if sayac==23) continue

şeklinde bir ifade eklersek ekranda 23 hariç, 1'den 100'e kadar olan sayıları görürüz. Continue yerine break yazarsak ise, döngü 23'üncü adımın sonunda kesilir,yani ekranda 1-23 arası sayıları görürüz. Yazdığımız döngüler üzerinde bu ifadeleri deneyerek kullanımlarını daha iyi anlayabilirsiniz.

Switch

Switch fonksiyonu diğer döngülerden biraz farklıdır. Switch fonksiyonunda durumlar(case) tanımlarız, ve her durum için yapılacak işi tanımladıktan sonra döngüden break komutuyla çıkarız. Örneğin ziyaretçiden ismini ve cinsiyetini öğrenip ona bay/bayan isim şekllinde hitab etmek istiyorsunuz.Aşağıdaki örneği yazarak bu işi switch komutuyla yapablirsiniz.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color][color=#008000][b]do[/b][/color]...[color=#008000][b]while[/b][/color][color=#666666]<[/color]/title>< BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]var[/b][/color] isim[color=#666666]=[/color]prompt([color=#BA2121]"İsminiz"[/color],[color=#BA2121]"Buraya yazın"[/color]) [color=#008000][b]var[/b][/color] cinsiyet[color=#666666]=[/color]prompt([color=#BA2121]"cinsiyetiniz"[/color],[color=#BA2121]"k,e"[/color]) [color=#008000][b]switch[/b][/color](cinsiyet) { [color=#008000][b]case[/b][/color] [color=#BA2121]"e"[/color][color=#666666]:[/color] [color=#008000][b]case[/b][/color] [color=#BA2121]"E"[/color][color=#666666]:[/color] alert([color=#BA2121]"Merhaba Bay "[/color][color=#666666]+[/color]isim) [color=#008000][b]break[/b][/color] [color=#008000][b]case[/b][/color] [color=#BA2121]"k"[/color][color=#666666]:[/color] [color=#008000][b]case[/b][/color] [color=#BA2121]"K"[/color][color=#666666]:[/color] alert([color=#BA2121]"Merhaba Bayan "[/color][color=#666666]+[/color]isim) [color=#008000][b]break[/b][/color] [color=#008000][b]default[/b][/color][color=#666666]:[/color] alert([color=#BA2121]"Lütfen cisiyetinizi doğru yazın!"[/color]) } [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

8. FONKSİYON KAVRAMI

JavaScript ile program yazarken bu programın birçok iş yapmasını isteyebilirsiniz. Ayrıca bu işlerin belli zamanlarda, belli durumlarda yapılması da gerekebilir. Bu durumda yapılacak işler için yazılan kodları foksiyonlar şeklinde gruplayıp yeri geldiğinde çağırabiliriz. Mesela kup() isimli bir fonksiyon tanımlayıp, bu fonksiyona göndereceğimiz argümanın kübünü verecek kodlar yazabilir, sonra bu fonksiyona programın değişik yerlerinde farklı değerler gönderip, bu değerlerin kübünü buldurtabiliriz. Fonksiyonlar aşağıdaki gibi yazılır:

function(argüman1, argüman2, argüman3...)
{
yapılacak işler
}
Fonksiyonları head bölümüne yazıp gerektiği zaman çağırmanız hem kodlarınızın düzenli olmasını, hem de hızlı çalışmasını sağlar. Şimdi bir örnekle fonksiyonları tanıyalım

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Fonksiyonlar[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Şimdi bu örneği inceleyelim: Önce head bölümünde 'cd' isimli bir fonksiyon tanımladık.Bu fonksiyona keyfi olarak fiyat argümanını vedik. Sonra 'tutar1' isimli değişkene, 'fonksiyona gönderilecek değer' * 9000000 değerini atadık. Aynı şekilde bir kaset fonksiyonu yazdık. Body bölümüne geçelim :Kullanıcıdan aldığımız değerleri kAdet ve cdAdet değişkenlerine atayıp, bu değerleri head bölümündeki ilgili fonksiyonlara gönderdik. Fonksiyonlar istediğimiz hesabı yaptı ve 'return' ifadesiyle belirttiğimiz üzere hesaplanan değerleri tekrar body bölümüne gönderdi. Sonra bu iki değeri toplayıp ekrana yazdırdık.

Bu noktada bu zamana kadar kullandığımız prompt(),alert(),if(),for()... gibi ifadelerin aslında birer fonksiyon olduğuklarını açıkça görebilirsiniz. Bu fonksiyonların bizim yazdıklarımızdan farkı şudur: Örneğin prompt fonksiyonunun yapacağı işi belirtmemize gerek yoktur, bu fonksiyonun tanımı browser'ınızın dosyalarında mevcuttur. Bu şekilde istediğimiz zaman bu fonksiyonu çağırıp kullanabiliriz, böyle fonksiyonlara metod denir.

9. NESNELER

JavaScript kullanarak özelliklerini görebileceğimiz veya değiştirebileceğimiz şeyler; örnğin bu browser penceresi, bir form'un öğeleri hatta browser'ın ta kendisi JavaScript açısından birer nesnedir. Bu özelliğinden dolayı JavaScript nesneye yönelik bir programlama dilidir. Şimdi bu nesneleri tanıyalım ve özelliklerini inceleyelim.

Window Nesnesi

Window, browser'ın sayfaların görüntülendiği kısmıdır.aşağıda bu nesnenin özelliklerini görüyorsunuz:

width: Pencerenin genişliğinin piksel cinsinden değeri
height: Pencerenin yüksekliği piksel cinsinden değeri
top: Pencerenin ekranın üst kenarından uzaklığının piksel cinsinden değeri
left: Pencerenin ekranın sol kenarından uzaklığının piksel cinsinden değeri
toolbar: Araç çubuğunun olması(yes) veya olmaması(no)
menubar: Menubar'ın olması(yes) veya olmaması(no)
resizeable: Pencere boyutlarının değiştirilebilir(yes) veya sabit(no) olamsı
scrollbars: Kaydırma çubuklarının olması(yes) veya olmaması(no)
status: Status bar'ın olması(yes) veya olmaması(no)
********: Browser'ın ******** çubuğunun olması(yes) veya olmaması.
copyhistory: Yeni açılan pencereye eski pencerenin history kaydının aktarılması(yes) veya aktarılmaması.
Bu listede 'yes' ve 'no' değerleri yerine '1' ve '0' da yazabilirsiniz.

Yeni bir pencere açmak için window.open(), kapatmak için window.close() metodları kullanılır.
window.open("pencereAdi.html","Pencereadı","width=300 height=240 toolbar=0")
Burada 'pencereAdi.htm' yazan bölümü bu şekilde bırakırsanız yeni pencereye pencereAdi.htm sayfası yüklenir. Buraya sadece penceraAdi yazar veya ("") şeklinde boş bırakırsanız yeni, boş bir sayfa açılır. Aşağıda tıklandığında yeni pencere açan bir link örneği görüyorsunuz.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Yeni pencere açmak[color=#666666]<[/color]/title> [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#008000][b]function[/b][/color] pencereAc() { varPencereNesnesi[color=#666666]=[/color][color=#008000]window[/color].open([color=#BA2121]"YeniPencere"[/color],[color=#BA2121]"Pencere"[/color],[color=#BA2121]"toolbar=0 resizeable=0 width=300 height=300"[/color]) PencereNesnesi.documént.writeln([color=#BA2121]"<h1>Burasi yeni pencere</h1>"[/color]) PencereNesnesi.documént.write([color=#BA2121]"<a href=\"JavaScript:window.close(self)\">Pencereyi Kapat</a>"[/color]) } [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body [color=#666666]>[/color] [color=#666666]<[/color]b[color=#666666]><[/color]a href[color=#666666]=[/color][color=#BA2121]"JavaScript:pencereAc()"[/color][color=#666666]>[/color]Yeni pencere acmak icin tiklayin[color=#666666]<[/color]/a></b> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Browser'ın history kaydında ileri-geri gitmek için window.history.go() metodu kullanılır. Örneğin:
window.history.go(-2)
komutu bizi ziyaret ettiğimiz iki önceki sayfaya ***ürür.

Browser'ın altında yer alan status bara birşey yazmak istersek, aşağıdaki kodları kullanırız.
window.status("Yazılacak Mesaj")

Browser Nesnesi

Javascript için browser da bir nesnedir. Fakat window nesnesinin aksine browser nesnesinin özelliklerini değiştiremeyiz.Sadece gerektiğinde kullanmak üzere değerlerini öğrenebiliriz.Aşağıda broser nesnesinin özellikleri listelenmiştir:

appname:Browser'ın adı
appVersion:Browser'ın sürümü
appCodeNameBrowser'ın kod adı
userAgentBrowser'ın kendini server'a tanıtırken verdiği isim.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Browser'ımızı tanıyalım[color=#666666]<[/color]/title> [color=#666666]<****[/color]content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"Javascript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body onLoad[color=#666666]=[/color][color=#BA2121]"Tani()"[/color][color=#666666]>[/color] [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Frame(Çerçeve) Nesnesi Frame tekniği özetle bir pencere içerisinde birden çok pencere görüntülememize olanak verev bir tekniktir. Eğer bu teknikle ilgili bilginiz yoksa veya yetersizse HTML bölümüne bir göz atın. Javascript ile frame nesnesinin elemanlarına atıfta bulunmak için aşağıdaki ifadeler kullanılır.
top: Browser'ın kendisi, yani en üst pencere.
parent: Frameleri oluşturan frameset.
self: Çerçevenin kendisi.
Parent Frame'in üzerinde yer alan 'yavru' çerçevelerin adları ise Javascript açısından parent.frame[n]'dir. Burada n yerine frame'in numarası gelir. Mesela iki çerçeveli bir sayfanız varsa ilk çerçevenin adı parent.frame[0], ikincisinin adı ise parent.frame[1] olur.

Aşağıdaki örneği cerceve.html adıyla kaydedin.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]><[/color] BR[color=#666666]><[/color]head[color=#666666]><[/color]BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Untitled[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]/head> [color=#666666]<[/color]frameset cols[color=#666666]=[/color][color=#BA2121]"*,*"[/color][color=#666666]>[/color] [color=#666666]<[/color]frame name[color=#666666]=[/color][color=#BA2121]"bir"[/color] src[color=#666666]=[/color][color=#BA2121]"default.html"[/color][color=#666666]>[/color] [color=#666666]<[/color]frame name[color=#666666]=[/color][color=#BA2121]"iki"[/color] src[color=#666666]=[/color][color=#BA2121]"ornek.html"[/color][color=#666666]>[/color] [color=#666666]<[/color]/frameset> [color=#666666]<[/color]noframes[color=#666666]>[/color] [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]/body> [color=#666666]<[/color]/noframes> [color=#666666]<[/color]/html> [/font]

Aşağıdakini de frame1.html adıyla kaydedin.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]><[/color] BR[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]bir[color=#666666]<[/color]/title><BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] Buraya yazı yazılacak[color=#666666]<[/color]br[color=#666666]>[/color] [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Son olarak aşağıdaki örneği frame2.html adıyla kaydedin.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]iki[color=#666666]<[/color]/title>< BR> <métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]a href[color=#666666]=[/color][color=#BA2121]"Javascript:yazdir1()"[/color][color=#666666]>[/color]Buraya tıklayın ve [color=#666666]1.[/color] Çerçeveye yazı yazılsın.[color=#666666]<[/color]/a> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Üç dosyanın da aynı dizinde olduğuna emin olduktan sonra cerceve.html dosyasını çalıştırın.

'Black-King · 18 Tem 2013

[/IMG]

FORMLAR

Formlar HTML'in en önemli unsurlarından biridir, belki de en önemlisidir. Formlar bize ziyaretçiden bilgi alma olanağı verirler. JavaScript açısından formlar da birer nesnedirler. Bir formun elemanlarınının JavaScript'dek adı, 'n' form elemanının sırası olmak üzere, formAdı.elements[n]'dir. Bu bağlamda,örneğin 'formAdı.elements.length' ifadesi form'un eleman sayısını, 'formAdı.elements[n].value' ifadesi n'inci elemanın değerini, 'formAdı.elements[n].name ifadesi n'inci elemanın değerinini verir. Şimdi JavaScript ile formlara neler yapabileceğimizi öğrenelim. Bu noktada Form'ları ve elemanlarını bildiğinizi varsayıyoruz. Eksiklerinizi HTML bölümünden tamamlayabilirsiniz.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Radio[color=#666666]<[/color]/title> [color=#666666]<[/color]méta content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color][color=#666666]>[/color] [color=#666666]<[/color]select name[color=#666666]=[/color][color=#BA2121]"dil"[/color][color=#666666]>[/color] [color=#666666]<[/color]option value[color=#666666]=[/color][color=#BA2121]"Web sayfalarının temel taşıdır."[/color][color=#666666]>[/color]HTML [color=#666666]<[/color]option value[color=#666666]=[/color][color=#BA2121]"Olaylara duyarlı sayfalar yapmanıza yarar."[/color][color=#666666]>[/color]JavaScript [color=#666666]<[/color]option value[color=#666666]=[/color][color=#BA2121]"Formları değerlendiren programlar yazmanıza yarar."[/color][color=#666666]>[/color]CGI [color=#666666]<[/color]/select> [color=#666666]<[/color]p[color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] onClick[color=#666666]=[/color][color=#BA2121]"alert(yazdir(this.form.dil))"[/color] value[color=#666666]=[/color][color=#BA2121]"Açıklama için tıklayın!"[/color][color=#666666]>[/color] [color=#666666]<[/color]/p></form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Buradaki fonksiyona 'this.form.dil' ifadesiyle formun select bölümünü gönderiyoruz. Fonksiyonda bu değer selNesnesi argümanıyla temsil edilmiş. Return ifadesiyle seçilen option'un değerini tekrar fonsiyonun çağırıldığı yer olan alert metoduna gonderiyoruz, bu metod da işini yapıp bu değeri görüntülüyor. Burada selNesnesi.selectedIndex ifadesi bize seçilen option'un index'ini , yani sıra numarasını verir.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Radio[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color] [color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"radio"[/color] name[color=#666666]=[/color][color=#BA2121]"dil"[/color] value[color=#666666]=[/color][color=#BA2121]"Web sayfalarının temel taşıdır."[/color][color=#666666]>[/color]HTML[color=#666666]<[/color]br[color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"radio"[/color] name[color=#666666]=[/color][color=#BA2121]"dil"[/color] value[color=#666666]=[/color][color=#BA2121]"Olaylara duyarlı sayfalar yapmanıza yarar."[/color][color=#666666]>[/color]JavaScript[color=#666666]<[/color]br[color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"radio"[/color] name[color=#666666]=[/color][color=#BA2121]"dil"[/color] value[color=#666666]=[/color][color=#BA2121]"Formları değerlenderen programlar yazmanıza yarar."[/color][color=#666666]>[/color]CGI [color=#666666]<[/color]p[color=#666666]><[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] size[color=#666666]=[/color][color=#BA2121]"50"[/color] name[color=#666666]=[/color][color=#BA2121]"aciklama"[/color] [color=#666666]><[/color]/p> [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] onClick[color=#666666]=[/color][color=#BA2121]"yazdir(this.form.dil)"[/color] value[color=#666666]=[/color][color=#BA2121]"Açıklama için tıklayın!"[/color][color=#666666]>[/color] [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Buradaki fonksiyon bir for döngüsüyle radyo düğmelerinin işaretli(checked) olup olmadığını kontrol etmeye başlıyor.Eğer if metodu true sonucunu verirse, yani o radyo düğmesi işaretliyse, döngüyü kesiyor ve işaretli düğmenin değerini 'sonuc' değişkeni aracılığıyla formun text bölümüne yazdırıyor. Burada ve bir önceki örnekte geçen 'onClick' ifadesi bir olaydır, olayları bir sonraki bölümde öğreneceğiz.

[/IMG]

10. OLAYLAR

Bir olayın oluşması, mevcut durumda bir değişikik olması anlamına gelir.Javascript açısından kullanıcının bir yere tıklaması, mousunu oynatması, sayfanın yüklenmesi, sayfadan çıkılması hep birer olay olarak yorumlanır. Olayların genel kullanımları:

<form name=isim olayAdı="ilgiliFonksiyon()">
şeklindedir. Bu kullanımı her olay için verilen örnekleri inceleyerek daha iyi anlayabilirsiniz. JavaScript'de olaylar ve adlarını aşağıda görmektesiniz.

onClick

Mouse'un tıklanması olayıdır. Tıklanabilecek, dolayısıyla onClick metodu'nun kullanılabileceği yerler submit, reset, buton, radio, checkbox ve link nesneleridir.

Aşağıdaki örnekte onClick ile bir text nesnesine yazı yazdıracağız.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]onClick[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"Javascript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body [color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color] [color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] value[color=#666666]=[/color][color=#BA2121]"Tıklayın"[/color] onClick[color=#666666]=[/color][color=#BA2121]"yazdir(documént.form1.mesaj)"[/color][color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color] value[color=#666666]=[/color][color=#BA2121]"1"[/color][color=#666666]>[/color] [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

ônMouseOver, onMouseOut

Mouse'un imleçinin bir nesne üzerinde olması ônMouseOver, o nesne üzerinde olmaması onMouseOut olayı olarak adlandırılır.

Aşağıdaki örnekteki linkin üzerine gelince yeni bir pencere açılacak, açılan bu pencere mouse'u linkin üzerinden çekince kapanacak.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]ônMouseOver,onMouseOut[color=#666666]<[/color]/title> [color=#666666]<****[/color]content[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"Javascript1.2"[/color][color=#666666]>[/color] [color=#008000][b]function[/b][/color] ustunde() [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]a href[color=#666666]=[/color][color=#BA2121]"#"[/color] ônMouseOver[color=#666666]=[/color][color=#BA2121]"ustunde()"[/color] onMouseout[color=#666666]=[/color][color=#BA2121]"disinda()"[/color][color=#666666]><[/color]b[color=#666666]>[/color]Ustüme Gel[color=#666666]!<[/color]/b></a> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

onLoad, onUnLoad

web sayfasının yüklenmesi onLoad, sayfadan çıkılması ise onUnLoad olayına karşılık gelir.

Aşağıdaki örnekte sayfa yüklenince bize browser'ımızın hangisi olduğunu söyleyecek, çıkarken ise bir uğurlama mesajı verecek

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]onLoad, onUnLoad[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"Javascript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body onload[color=#666666]=[/color][color=#BA2121]"hangiBrowser()"[/color] onunload[color=#666666]=[/color][color=#BA2121]"mesaj()"[/color][color=#666666]>[/color] [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

onSubmit, onReset

Form'ların vazgeçilmez ögeleri olan submit butonuna basılması onSubmit, reset butonuna basılması onReset olayıyla tanımlanır.

Aşağıdaki örnek formu gönderirken ve silerken bizim onayımızı isteyecek.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]onSubmit,onReset[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color] onsubmit[color=#666666]=[/color][color=#BA2121]"return dogruMu()"[/color] onReset[color=#666666]=[/color][color=#BA2121]"return sor()"[/color] method[color=#666666]=[/color][color=#BA2121]"post"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]h3[color=#666666]>[/color]Isim[color=#666666]<[/color]/h3></p> [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] size[color=#666666]=[/color][color=#BA2121]"30"[/color] name[color=#666666]=[/color][color=#BA2121]"isim"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]h3[color=#666666]>[/color]adres[color=#666666]<[/color]/h3></p> [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] size[color=#666666]=[/color][color=#BA2121]"30"[/color] name[color=#666666]=[/color][color=#BA2121]"adres"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]h3[color=#666666]>[/color]telefon#[color=#666666]<[/color]/h3></p> [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] size[color=#666666]=[/color][color=#BA2121]"30"[/color] name[color=#666666]=[/color][color=#BA2121]"telefon"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]input type[color=#666666]=[/color][color=#BA2121]"Submit"[/color] value[color=#666666]=[/color][color=#BA2121]"Gonder"[/color][color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Reset"[/color] value[color=#666666]=[/color][color=#BA2121]"Sil"[/color][color=#666666]><[/color]/p> [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

onChange

Text veya textarea unsurlarına birşey yazılması ya da select unsurunda bir seçim yapılması onChange olayına karşılık gelir.

Aşağıda onChange ile yapılmış bir örnek görüyoruz.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]onChange[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color][color=#666666]>[/color] [color=#666666]<[/color]select name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color] size[color=#666666]=[/color][color=#BA2121]"3"[/color] onchange[color=#666666]=[/color][color=#BA2121]"alert(yaz(this.form.mesaj))"[/color][color=#666666]>[/color] [color=#666666]<[/color]option name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color] value[color=#666666]=[/color][color=#BA2121]"Bu"[/color][color=#666666]>[/color]mesaj1 [color=#666666]<[/color]option name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color] value[color=#666666]=[/color][color=#BA2121]"program"[/color][color=#666666]>[/color]mesaj2 [color=#666666]<[/color]option name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color] value[color=#666666]=[/color][color=#BA2121]"onChange komutu ile yapılmıştır"[/color][color=#666666]>[/color]mesaj3 [color=#666666]<[/color]/select> [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

onFocus, onBlur

Sayfanızdaki Text , Textarea veya Select unsurlarının üzerine tıklandığında onFocus olayı gerçekleşir. Bu durumda mouse'un başka bir yeri tıklaması da onBlur olayına karşılık gelir. Yani kullanıcı dikkatini bu üç unsurdan birine verdiği zaman browser'a bir iş yaptırabilriz; aynı şekilde kullanıcının dikkatinin başka yöne kayması halinde yapılacak başka bir iş tanımlayabiliriz.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]onFocus,onBlur[color=#666666]<[/color]/title>< BR><métacontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type> [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color] method[color=#666666]=[/color][color=#BA2121]"post"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]h3[color=#666666]>[/color]Lütfen isminizi yazınız[color=#666666]!<[/color]/h3></p> [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] size[color=#666666]=[/color][color=#BA2121]"20"[/color] name[color=#666666]=[/color][color=#BA2121]"isim"[/color] onfocus[color=#666666]=[/color][color=#BA2121]"dogru()"[/color] onblur[color=#666666]=[/color][color=#BA2121]"sor()"[/color][color=#666666]>[/color] [color=#666666]<[/color]p[color=#666666]><[/color]input type[color=#666666]=[/color][color=#BA2121]"text"[/color] name[color=#666666]=[/color][color=#BA2121]"mesaj"[/color][color=#666666]><[/color]/p> [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

onAbort, onError

Ziyaretçinin browser'ı sayfanızın bir kısmını veya tamamını yükleyemez, ya da sayfanızın JavaScript veya HTML kodlarını yorumlayamazsa hata durumu oluşur, bu durumun adı JavaScript dilinde onError'dur. OnAbort olayı ise ziyaretçi sayfanız tamamen yüklenmeden stop tuşuna basarsa oluşur.

[/IMG]

11. JAVASCRIPT VE DHTML

JavaScript ile katmanların(layer) neredeyse bütün özelliklerini değiştirebiliriz. Bu özelliği ônMouseOver, onClick gibi olaylarla birleştirip çok iyi sonuçlar alabilirsiniz. İşe başlamadan önce katmanları tanıyalım:

Web sayfalarımızda <div> ve <layer> etiketlerini kullanarak katmanlar oluşturabiliriz. Fakat ne yazık ki Explorer <layer> etiketini tanımaz. Bu nedenle kullanımı biraz daha zahmetli olan <div> etiketini kullanacağız.Katmanlar sayfadan bağımsızdırlar, Javascript ile boyutlarını, renklerini hatta görünürlüklerini değiştirmemize olanak sağlarlar. Şimdi önce bir katman oluşturalım, sonra da Javascript ile katmanların değiştirebieceğimiz özelliklerini görelim.

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Katman[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]/head> [color=#666666]<[/color]body[color=#666666]>[/color] [color=#666666]<[/color]div id[color=#666666]=[/color][color=#BA2121]"katman"[/color] style[color=#666666]=[/color][color=#BA2121]"position:absolute; left:50; top:200; width:100; height:200; visibility:visible; background-color:teal"[/color][color=#666666]>[/color]Burası bir katman[color=#666666]<[/color]/div> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

Bu özelliklerin JavaScript'deki adları aşağıdaki gibidir:

id:Katmanın adı.
style:Katmanın aşağıda listelenen stil özellikleri
position: Katmanın yeri kesin olarak belirtilecekse absolute, göreli olarak belirtilecekse relative değerini alır.
top:Katmanın browser penceresinin üst kenarından uzaklığı
left:Katmanın browser'ın sol kenarından uzaklığı
width:Katmanın genişliği
height:Katmanın yüksekliği
Katman tekniğini kullanılırken Netscape ve Explorer farkını aklımızda bulundurmalıyız. Aşağıda Explorer için yazım kuralını görüyoruz.

katmanAdı.style.DeğişecekÖzellik=yeniDeğer
Netscape için yazım kuralı ise şöyledir:

documént.katmanAdı.DeğişecekÖzellik=yeniDeğer
Şimdi bu tekniği örneklerle daha iyi anlayalım:

Kod:

[font=monospace][color=#666666]<[/color]html[color=#666666]>[/color] [color=#666666]<[/color]head[color=#666666]>[/color] [color=#666666]<[/color]title[color=#666666]>[/color]Katman[color=#666666]<[/color]/title> [color=#666666]<[/color]métacontent[color=#666666]=[/color]text[color=#666666]/[/color]html;CHARSET[color=#666666]=[/color]iso[color=#666666]-[/color][color=#666666]8859[/color][color=#666666]-[/color][color=#666666]9[/color] http[color=#666666]-[/color]equiv[color=#666666]=[/color]Content[color=#666666]-[/color]Type[color=#666666]>[/color] [color=#666666]<[/color]script language[color=#666666]=[/color][color=#BA2121]"JavaScript1.2"[/color][color=#666666]>[/color] [color=#408080][i][/color] [color=#666666]<[/color]/script> [color=#666666]<[/color]/head> [color=#666666]<[/color]body onLoad[color=#666666]=[/color][color=#BA2121]"tani()"[/color][color=#666666]>[/color] [color=#666666]<[/color]div id[color=#666666]=[/color][color=#BA2121]"katman"[/color] style[color=#666666]=[/color][color=#BA2121]"position:absolute; left:200; top:30; width:100; height:200; visibility:visible; background-color:teal"[/color][color=#666666]>[/color]Bu katman genisleyecek[color=#666666]<[/color]/div> [color=#666666]<[/color]form name[color=#666666]=[/color][color=#BA2121]"form1"[/color][color=#666666]>[/color] [color=#666666]<[/color]input type[color=#666666]=[/color][color=#BA2121]"Button"[/color] onclick[color=#666666]=[/color][color=#BA2121]"genisle()"[/color] value[color=#666666]=[/color][color=#BA2121]"Genişlet"[/color][color=#666666]>[/color] [color=#666666]<[/color]/form> [color=#666666]<[/color]/body> [color=#666666]<[/color]/html> [/font]

JavaScript bölümü burada sona erdi. Bir sonraki bölümde CSS tekniğini göreceğiz. CSS bize stil şablonları oluşturup bütün sitenin yazıtipi, yazı rengi vs. ayarlarını tek bir dosyadan yönetme olanağı verir. Ayrıca CSS , HTML'e metin biçimlendirme konusunda bir çok ekleme yapar.

Java Script Nedir ? Java Script Dersler

'Black-King

Yaşayan Forum Efsanesi

'Black-King

Yaşayan Forum Efsanesi

Sosyal medya sayfalarımız