Java Script Dersleri

**O'NEAL** · 23-02-2008, 18:36

JavaScript ile VBScript arasında işlev ve yapı bakımından fark yoktur. Kod yazmak için ikisini birden öğrenmeniz şart değil elbette. Ama başkalarının kodlarını araştırmak ve bir şeyler öğrenmeye çalışmak gibi harika bir hobiniz varsa

neden ikisini birden öğrenmeyesiniz? Bazı sayfalarda "Şöyleyse VBScript

böyleyse JavaScript öğrenmenizi tavsiye ederim" gibilerinden laflar ediliyor. Ben böyle bir tavsiyede bulunamam açıkçası. Ama şunu bilin

VBScript biraz daha kolay öğreniliyor gibi. Bununla birlikte JavaScript'in çok daha yaygın olduğu da bir gerçek. Visual Basic bilenler VBScript'i daha kolay

C veya Java bilenler

JavaScript'i daha kolay öğrenecektir. Son söyleyeceğim şey

ikisi de basit

dilerseniz her ikisini birden rahatlıkla öğrenebilirsiniz.

JavaScript (VBScript) HTML'in bir parçasıdır aslında; derleyici bir programa ihtiyaç duymaz

HTML kodlarıyla beraber yazılır ve gözatıcı (browser) tarafından yorumlanır.

JavaScript'in (VBScript'in) işlevleri yazmakla bitmez ya

ben aklıma geldiğince listeledim:

* HTML tasarımcılarına bir programlama desteği sağlar

bünyesinde değişkenler

fonksiyonlar

döngüler

yordamlar bulundurur.
* HTML sayfalarına hareketli HTML nesneleri (metin

resim

vb.) koyabilmemizi sağlar.
* Olaylara tepki verir. (Olaydan kastettiğim şey: tıklamak

tuşa basmak

sayfa açmak gibi şeyler.)
* HTML elemanlarını okuyabilir veya yazabilir.
* Kullanıcı ile bilgi alışverişinde bulunmamızı sağlar. Zira HTML formları JavaScript (VB Script) olmadan pek bir işe yaramaz.

HTML'e JavaScript Kodlarını Tanıtma

JavaScript HTML kodları arasında nasıl kullanılır? JavaScript kodlarını HTML'e tanıtmak için Java Script kodlarını <script language="JavaScript">...</script> HTML kodları arasına yazarız. Not: VBScript için language="VBScript" parametresi kullanılır.

Aşağıdaki uygulama ilk JavaScript örneğimiz:

Code:

 <html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
<script language="JavaScript"> 
  document.write("Merhaba") 
</script> 
</body> 
</html>

Burada <script language="JavaScript">...</script> arasında yazılı olan bir tane JavaScript kodu bulunmakta: document.write("..."). Bu kod

paran¤¤¤ içine yazılan HTML kodlarını uygular. Tabi bu uygulama için JavaScript koduna ihtiyacımız yok aslında

doğrudan Merhaba deseydik

yine Web Sayfamız saygıda kusur etmez

bize Merhaba derdi. Ama ileriki konularda bu koda ihtiyacımız olacak. Bu uygulamada HTML kodu olarak düz bir metin kullandık. Paran¤¤¤ içindeki HTML kodunu biraz daha zenginleştirebiliriz:

Code:

 <html> 
<head> 
<title>JavaScript Uygulaması 2</title> 
</head> 
<body> 

<script language="JavaScript"> 
document.write("<font size=6 color=blue>") 
document.write("Merhaba") 
document.write("</font>") 
</script> 

</body> 
</html>

JavaScript'in en sevmediğim özelliğini anlatmadan geçemem. JavaScript'te (VBScript'te herşeyi illâ ki harfi harfine yapacaksın. Küçücük bir hata

sayfanızın çıkmamasına ve pencerenin alt kısmında JavaScript hatası belirmesine neden olur. Bu zamana kadar HTML gibi esnek bir dille çalışıyorduk; bu nedenle bu sayfalarla ilgili örnekler yaparken biraz yorulabilirsiniz

JavaScript kodlarının HTML'deki Konumu

JavaScript yukarıdaki uygulamalarda olduğu gibi <body>...</body> kodları arasında yer alabileceği gibi; fonksiyon halinde

<head>...</head> arasında da yer alabilir:

Code:

 <html> 
<head> 
<title>JavaScript Uygulaması</title> 
<script language="JavaScript"> 
function selam() 
{ 
alert("Merhaba") 
} 
</script> 
</head> 
<body onload="selam()"> 

</body> 
</html>

Bu örnek hiçbir programlama dili bilmeyen birisi için anlaşılması biraz zor. Kabaca anlatayım; anlamayanlar için ileriki sayfalarda genişçe anlatacağım: Bu uygulamada JavaScript kodu <head> bölümünde fonksiyon halinde yer alıyor. function selam() ifadesi ile selam() isimli bir fonksiyon tanımlıyoruz. Bu fonksiyonun ne yaptığını süslü paran¤¤¤ler arasına yazarız. Örneğin selam() fonksiyonunun içeriğinde alert("...") kodu vardır. Bu JavaScript kodu

tırnak içindeki ifadeyi mesaj kutusuyla göstermeye yarar. Demek ki selam fonksiyonu

mesaj kutusuyla "Merhaba" demeye yarıyormuş. Dikkat ederseniz <body> koduna onload="..." (İngilizce'de "yüklendiği takdirde" demek) durumu atanmış. Yani sayfa yüklenildiğinde selam() mesajı veriliyor.

JavaScript kodu; CSS'de olduğu gibi

dış bir dosyayla da HTML'e tanıtılabilinir. CSS dosyası .css uzantılıydı. Dış JavaScript dosyası ise .js uzantılıdır. Aşağıdaki metin dosyasını selam.js ismiyle kaydettim:

Code:

document.write("<center>") 
document.write("<h1>Merhabalar!</h1>") 
document.write("</center>")

Şimdi bu dış JavaScript dosyasını HTML sayfasına tanıtıyorum:

Code:

<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 

<script src="selam.js"> 
</script> 

</body> 
</html>

**O'NEAL** · 23-02-2008, 18:38

Değişken

içinde değerler saklayabileceğiniz bir programlama aracıdır. Değişkenlerin sakladığı değer kod sayfaları boyunca değişebilir

birbirine aktarılabilir. Değişkene başka bir değer atayabilirsiniz veya değişkenin sakladığı değeri program içinde kullanabilirsiniz. Değişkenler genellikle programın başlangıcında isimlendirir; böylece bu isimlerle değişkeni çağırabilir

değişkenin taşıdığı değeri kullanabilirsiniz. Not: Değişkenin ismi program boyunca değişmez

ancak taşıdığı değer değişebilir.

Değişken İsimleri

Değişkenleri isimlendirirken dikkat etmemiz gereken bazı kurallar vardır:

* Değişken ismi harf

rakam veya "_" (altçizgi) karakterlerinden oluşabilir.
* Değişken isminin ilk karakteri bir harf veya "_" (alt çizgi) işareti olmalıdır. (vol_html23 gibi)
* JavaScript küçük harf

büyük harf ayrımı yapar. Mesela değişken isminiz DIAZ ise

bu değişkeni hep böyle büyük harflerle yazmak zorundasınız. diaz yazarsanız

gözatıcı bunu farklı bir değişken olarak okur.
* Değişken isimlerinin uzunluğu 255 karakter kadar olabilir.
* Değişken isimleri içinde diğer semboller (+

-

/

boşluk

vb.) yer alamaz.
* Değişken isimlerinde İngilizce'de olmayan karakterleri (ş

ç

ö

vb.) kullanmayınız. (Genellikle yeni kullanıcılar bu kuralı her zaman
anımsamıyorlar.

Değişkenlere Değer Verme

Değişkenlere değer verirken

değişken her zaman sol tarafta yer alır. Mesela sayi değişkenine 15 değerini vereceksek

şöyle yazarız:

sayi= 15

Değişkenler birbirinin değerini de alabilir. Her zaman sola yazılan ifade

sağdaki değeri alır. Örneğin şu iki değişkene bakalım:

sayı1= 5
sayı2= 10
sayı1= sayı2

Burada sayi1 ve sayi2 isimli iki değişken söz konusu. Önce sayi1 isimli değişkene 5 değeri veriliyor. Sonra sayi2 değişkenine 10 değeri veriliyor. Sonra sayi1 değişkenine sayi2'nin değeri verilerek

sayi1'in değeri değiştiriliyor. Böylece sayi1= 10

sayi2= 10 oluyor. Eğer sayi2 = sayi1 ifadesi olsaydı (sayi2 solda yeralsaydı)

sayi1'in değeri sayi2'ye verilmiş olacaktı. Bu durumda sonuç değişik olurdu: sayi1= 5

sayi2= 5

Yukarıdaki yazdıklarımızı bir uygulamayla gösterelim:
<html>
<head>
<title>JavaScript Uygulaması</title>
</head>
<body>

Code:

<script language="JavaScript"> 
sayi1=5 
sayi2=10 
sayi1= sayi2 
document.write(sayi1) 
document.write("<br>") 
document.write(sayi2) 
</script> 
 
</body> 
</html>

Dikkat ederseniz document.write(...) kodunun paran¤¤¤ arasına değişkenleri yazarken

tırnak işareti kullanmadık. Çünkü değişkenler HTML elemanı değil

JavaScript elemanı. Bu üç kod yerine şöyle yazabilirdik: document.write(sayi1 + "<br>" + sayi2). İsterseniz değişkenlerin yerini değiştirelim (sayi2 = sayi1 yapalım):

Code:

<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
 
<script language="JavaScript"> 
sayi1=5 
sayi2=10 
sayi2= sayi1 
document.write(sayi1 + "<br>" + sayi2) 
</script> 
 
</body> 
</html>

Değişken Tanımlama ve Değişken Türleri

Yukarıdaki uygulamalarımızda değişkenlere değer verdik ama onları tanımlamadık

tanımlamak zorunda da değiliz. Ancak bu değişkenleri var kodu ile baştan tanımlamak doğru bir yaklaşımdır. (Başka program bilenlere not: Eğer baştan tanımlamazsak

değişkenler global olur. Başka program bilmeyenlere not: Önceden tanımlamakta büyük kerametler var.) Aşağıdaki üç durum da aynı şeyi ifade ediyor:

var sayi1
var sayi2
sayi1=5
sayi2=10

veya

var sayi1

sayi2
sayi1=5
sayi2=10

veya

var sayi1=10

sayı2=5

Bu şekillerde değişkenleri tanımlayabiliyoruz. Şimdiye kadar değişkenlere hep sayısal değerler verdik. Oysa JavaScript değişkenleri 5 çeşit değer alabiliyor:

Sayısal Değerler : Aritmetik işlemler yapılabilen her türlü sayısal değer: tam sayı

ondalık sayı

negatif sayı. sayi = 32
Alfanümerik Değerler : Aritmetik işlemler yapılmayan

metinsel özellikler taşıyan değerler. sev = "Cameron Diaz"
Onay Değerleri : Sadece doğru veya yanlış değerlerini kabul eden değerler. Doğru ifadesi 1 ile

yanlış ifadesi 0 ile ifade ediliyor. cevap=1
Fonksiyon Değeri : Değişkenler tıpkı sayılar ve metinler gibi fonksiyonları da saklayabilmektedir. yap = selam()
Nesne Değeri : Değişkenler HTML nesnelerini (düğme

metin

resim

vb.) değer olarak saklayabilmektedir. eleman = dugme

Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 18:41

VB Script ile Java Script'in işlem işaretleri biraz farklı. Bu farklar Visual Basic ile Java (veya C) arasında da aynı şekildedir. Daha önce programcılık yapmamış arkadaşlar için kısaca işlem önceliğini de anlatmak zorundayım. Özetle bu sayfada aritmetik işlemler ve öncelik sıraları yeralacak.

Aritmetik İşlem İşaretleri ve Öncelik Sıralaması

+ Toplama işlemini yapar. sayi = 10 + 5 (Not: sayi=15 olur)

- Çıkartma işlemini yapar. sayi= 10 - 5 (Not: sayi=5 olur)

* Çarpma işlemini yapar. sayi = 10 * 3 (Not: sayi=30 olur)

/ Bölme işlemi yapar. sayi= 10 / 3 (Not: sayi=3.3333333333333335 olur)

% Tamsayılı bölme işlemi yapar ve kalanı verir. sayi=10 % 3 (Not: sayi=1 olur)

Bu işlemlerde çarpma

bölme ve kalanlı bölme işlemlerinin toplama ve çıkarma işlemine göre önceliği vardır. Bir işlemde eğer hiç paran¤¤¤ yoksa

soldan sağa doğru sırasıyla çarpma ve bölme işlemleri yapılır. Bu prensip her bilgisayar dilinde ve hesap makinelerinde de geçerlidir. Aşağıdaki örneklere bakalım.

sayi = 5 * 6 - 10 / 5
Bu işlemde çarpma önceliği - işaretine göre daha fazla olan * ve / işlemleri yapılır. (* ve / işlemlerinin önceliği aynıdır.) Bu durumda sayi = 30 - 2 = 28 olur.
sayi = 5 * 6 / 10 * 2 + 4 * 3
Bu işlemde önceliği aynı olan çarpma ve bölme işlemleri birarada yer alıyor. Bu durumda işlemler sırayla yapılır. Önce 5 ile 6 çarpılır

çıkan sonuç 10'a bölünür ve çıkan sonuç 2 ile çarpılır. Ve sayi = 6 + 12 = 18 sonucuna ulaşılır.
sayi = ((5 * 6) / (10 * 2) + 4) * 3
Bu işlemde paran¤¤¤ler söz konusu. Ve her zaman paran¤¤¤lerin önceliği vardır. İlk önce iki iç paran¤¤¤ içindeki işlemleri

sonra büyük paran¤¤¤ içindeki işlemleri yaparız. Böylece sayi = (30 / 20 + 4) * 3 = (5.5 + 4) * 3 = 9.5 * 3 = 28.5 sonucunu elde ederiz.

Değişken Değerini Taşıdığı Değere Göre Değiştirme

Bazen değişkenlerin değerini

kendisiyle işlem yaparak değiştirebiliriz. Örneğin:

var sayi = 5
sayi = sayi + 1
Bu durumda sayi = 5 + 1 = 6 olur.

var sayi = 4
sayi = sayi - 1
Bu durumda sayi = 4 - 1 = 3 olur.

var sayi = 6
sayi = sayi * 5
Bu durumda sayi = 6 * 5 = 30 olur.

var sayi = 10
sayi = sayi / 2
Bu durumda sayi = 10 / 2 = 5 olur.

var sayi = 10
sayi = sayi % 4
Bu durumda sayi = 10 % 4 = 2 olur.

Bu işlemleri şu işaretlerle de yapabiliriz: "+="

"-="

"*="

"/=" ve "%=". Aşağıdaki işlemler birbiriyle aynı sonucu verir.

sayi += 5 eşittir sayi = sayi + 5
sayi -= 4 eşittir sayi = sayi - 4
sayi *= 6 eşittir sayi = sayi * 6
sayi /= 2 eşittir sayi = sayi / 5
sayi %= 4 eşittir sayi = sayi % 4

Bu aritmetik işlemler C ve Java'da da aynı şekilde kullanılmaktadır. Bu işaretlerin yanında

özelleşmiş iki işaret daha vardır: ++

--.
sayi++ eşittir sayi = sayi + 1
sayi-- eşittir sayi = sayi - 1

Aritmetik işlemlerle ilgili bir uygulama yapalım.

Code:

 
<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 

<script language="JavaScript"> 
var en1=5, boy1=10, dortgen1 
var en2, boy2, dorgen2 
dortgen1= en1 * boy1 
boy1++ 
en1++ 
boy2 = boy1 
en2 = en1 
dortgen2= en2 * boy2 
document.write("Eni 5, boyu 10 cm olan bir dörtgenin alanı = " + dortgen1 +" cm<sup>2</sup> 'dir.<br>") 
document.write("Eni ve boyu 1'er cm artırılırsa dörtgenin alanı = " + dortgen2 +" cm<sup>2</sup> oluyor.") 
</script> 

</body> 
</html>

İşlem önceliğini daha iyi anlatan bir başka uygulama yapalım.

Code:

<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 

<script language="JavaScript"> 
var gelir=25000, maliyet=12000 
var vergiorani=0.15, amortismanorani=0.10 
var amortisman, vergi 
vergi = (gelir - maliyet) * (1 - amortismanorani) * vergiorani 
amortisman = (gelir - maliyet) * amortismanorani 
document.write("Şirketimizin yıllık vergisi = " + vergi +" TL'dir.<br>") 
document.write("Şirketimizin yıllık amortismanı = " + amortisman + "TL'dir.") 
</script> 

</body> 
</html>

Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 18:44

Bu sayfamızda JavaScript'in yazım kuralları üzerinde duracağız. JavaScript'te hata yapmanın bedeli çok ağırdır. Nerede hata yaptığınızı bulmak uzun zaman alır.

avaScript tıpkı HTML gibi bırakılan boşlukları dikkate almaz. Yani sayi=5 ile sayi = 5 arasında fark gözetmez.

JavaScript'te komutlar ; (noktalı virgül) işareti konularak yanyana yazılabilir. Aynı satırda olmasa da her komuttan sonra ; işareti koymak yararlıdır

kodlar arasında ayıraç vazifesi görür.

JavaScript Nesnelerine İsim Koyma

JavaScript nesnelerine isim koyarken aklımızdan çıkarmamamız gerekenlerin başında

JavaScript'in küçük harf

büyük harf ayrımı yaptığıdır. Mesela AritmetikOrtalama() isimli bir fonksiyonu daha sonra aritmetikortalama() ismiyle çağıramayız. JavaScript bu durumu iki ayrı fonksiyon gibi değerlendirir.

JavaScript nesnelerinin (değişken

fonksiyon vb.) ismi bir sayıyla başlamaz ama sonraki karakterler sayı olabilir; arada boşluk bırakılmaz

boşluk yerine _ işareti kullanılır. Bunları değişkenler konusunda anlatmıştık. JavaScript nesneleri bu kurallara uygun her kelimeyi isim olarak alması da söz konusu değil

JavaScript komutlarını

nesne ismi olarak kullanamayız. Bazı isimlerde daha sonra komut olarak JavaScript'e girer diye ayrılmıştır ve onlarda nesne ismi olarak kullanılamaz. Nesne ismi olarak kullanılamayan bu kodları atacagım 2. mesajda belirtecegim.

JavaScript'te Özel İşaret Gösterimi

JavaScript'te HTML nesnesini ifade ederken bazı özel işaretlerin önlerine \ işareti koymalıyız.

Code:

 
<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
 
<script language="JavaScript"> 
document.write ("Ali'nin köpeği "Hav hav!" dedi."); 
</script> 
 
</body> 
</html>

Bu uygulama çalışmaz ve JavaScript hatası verir. Bu kodda JavaScript içiçe tırnakları

ayrı ayrı tırnak işareti olarak görür. Doğrusu şöyle yazılır:

<html>
<head>
<title>JavaScript Uygulaması</title>
</head>
<body>

<script language="JavaScript">
document.write ("Ali'nin köpeği \"Hav hav!\" dedi.");
</script>

</body>
</html>

JavaScript'te ' (tek tırnak) işareti ile " (çift tırnak) işareti arasında işlevsel bakımdan bir fark yoktur. Ancak içiçe tırnak kullanılan durumlarda içtekini başka

dıştakini başka tırnak işaretiyle göstermek yararlıdır. Örneğin:

<input type="button" value="Bas" onclick="alert('Düğmeye Bastınız!');">

Burada " (çift tırnak) işaretiyle JavaScript ifadesi HTML parametresine tanıtılmış oluyor. ' (tek tırnak) ifadesi ile JavaScript kodunun yazdırdığı metin belirtilmiş oluyor. Böylece hangi tırnağın nerede bittiği konusunda herhangi bir karışıklık olmuyor.

Yorum Kodları

JavaScript ile yapacağımız programlar bazen o kadar büyük ve karmaşık olur ki

neler yaptığımızı biz bile unuturuz. Gerek sonradan hatırlamak için

gerekse bizden başka kodları okuyacak olanlara yardımcı olmak için

kodların arasına bazı notlar düşeriz. Bu tür notları doğrudan yazarsanız JavaScript hatasına sebep olur veya programınızın işlevini değiştirirsiniz. Bu notları düşmek için not satırı önüne // işaretini koyarız. Bu işaret bir satırlık not bırakmamızı sağlar ve JavaScript kodlarını etkilemez:

Code:

<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
 
<script language="JavaScript"> 
//Bu uygulama JavaScript yazım kuralları üzerinedir. 
document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); 
</script> 
 
</body> 
</html>

Bazen düşeceğimiz not birkaç satırdan oluşabilir. Bu durumda not /*...*/ işaretleri arasına yazılır.

Code:

<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
 
<script language="JavaScript"> 
/*Bu uygulama JavaScript yazım kuralları üzerinedir. 
İtiraf edeyim ki pek iyi bir uygulama olmadı, 
Ali'ymiş, yok efendim köpeği hav hav dermiş. 
İlkokul uygulamalarına benzedi.*/ 
document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); 
</script> 
 
</body> 
</html>

JavaScript'in gözatıcı (browser) tarafından derlendiğini daha önce söylemiştim. Ancak bazı kişisel gözatıcılar ve eski sürüm gözatıcılar JavaScript'i desteklemiyor ve sayfada hatalar veriyor. Bu tip gözatıcıların JavaScript kodlarını tanıması için elimizden gelen birşey yok. Ama hiç olmazsa sayfada hataya neden olmamak için HTML'in <!-- yorum kodu kullanılır. Ayrıca yeni sürümlerin kodu görebilmesi için // yorum kodları da gereklidir. Eski sürüm gözatıcılar veya JavaScript'i desteklemeyen kişisel gözatıcılar JavaScript kodlarını HTML yorumu olarak görür ve sayfada bozulmaya neden olmaz; kullanıcı JavaScript'in faydalarından yararlanamasa da

sayfayı düzgün bir şekilde görür. Aşağıda bunun nasıl yapıldığını görüyorsunuz.

Code:

 
<html> 
<head> 
<title>JavaScript Uygulaması</title> 
</head> 
<body> 
 
<script language="JavaScript"> 
<!-- Eski sürüm gözatıcılardan JS kodlarını saklayalım. 
//Şimdi normal kodları yazabiliriz. 
document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); 
//--> 
 
</script> 
</body> 
</html>

Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 18:48

En iyi yazılımcı

az kodla çok şey yapabilendir. Acemi yazılımcıların sayfalarca kod yazarak yaptığı programları

usta yazılımcılar yarım sayfada yapabilir. Bunun inceliklerini hem bu sayfada

hem de ileride yapacağımız ileri uygulamalarda göstereceğim.

Diyelim ki programda bir sürü işlem yapacağız ama öyle bir işlem var ki 50 defa yapacağız. (Mesela "Ali gel." yazdıracağız.) Programa bu işlemi 50 defa yaptırmak için o işlem kodunu 50 defa yazdırmak zorunda kalırız ve programımız sayfalarca sürebilir. Üstelik bu işlem kodlarının birkaç satır değil de yarım sayfa sürmesi söz konusu da olabilir. Bu durumda 50 defa o yarım sayfalık kodu yazmak zorunda mı kalacağız?

Hayır. O yarım sayfalık işlem kodunu bir fonksiyon haline getiririz ve 50 defa o fonksiyonu tek kelime olan fonksiyon ismi ile çağırırız. Bu durumda 30-40 sayfalık bir kodu 3-4 sayfaya indirmiş oluruz.

Peki bir işlem nasıl fonksiyon haline getirilir? İşte sayfamızın konusu bu.

Fonksiyon Yapısı

Fonksiyonlar <head>...</head> bölümünde yer alır. Bir fonksiyonun genel yapısı aşağıdaki gibidir:

function fonksiyonun adı (argüman1

argüman2

....

argümanN)
{
İŞLEMLER
}

Fonksiyonlara koyduğumuz isim

fonksiyonu çağırmak için gereklidir. Her fonksiyonun adı olmalıdır

zira fonksiyonlar bir olay (durum) karşısında çağrılabilsin diye yapılır. Bu olay bir düğmenin tıklanması

bir radyo veya kontrol kutusunun seçilmesi

bir HTML nesnesinin üzerine fare ile gelinmesi olabilir. (HTML'de form nesnelerini unutan arkadaşlarımıza tekrar bakmalarını salık veririm. Bu olaylara ilerdeki Olaylar sayfasında ayrıntılı olarak değineceğim. Ama şimdilik onclick (tıklanıldığı takdirde) olay parametresini kullanacağız. Bu parametre form araçlarına olduğu gibi

hiperlink

resim gibi diğer HTML nesnelerine de atanabilir. onclick = Fonksiyon Adı() şeklinde kullanılır.

Argümansız Fonksiyonlar

Fonksiyonlar çeşitli argümanları kullanarak işlem yapabilirler. Bu argümanlar değişken

nesne veya değer ifadesi olabilir. Bunun yanısıra fonksiyonların argüman kullanma zorunluluğu yoktur; aşağıdaki uygulama argümansız bir fonskiyon içermektedir.

Code:

 
<html> 
<head> 
<title>Argümansız Fonksiyon</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function mesaj() 
{ 
alert("Hiç bir mesajınız yok."); 
document.write("Mesaja baktınız..."); 
} 
</script> 
</head> 
<body> 

<form> 
Mesaja bakmak istiyorsanız, düğmeye basın.<br> 
<!--Düğmeye basıldığında fonksiyon çağrılır.--> 
<input type="button" onclick="mesaj()" value="Mesaj Kontrol"> 
</form> 

</body> 
</html>

Bu uygulamamızda mesaj() isimli argümansız bir fonksiyon kullandık. Bu fonksiyonu kullanmamız şart değildi elbette. Fonksiyon yaratmak yerine

kodları <body> bölümüne yazabilirdik. Ancak bu fonksiyonu buradaki gibi bir defa değil de beş-on yerde kullansaydık

fonksiyon sayesinde bir sürü kod yazmaktan kurtulacaktık.

Argümanlı Fonksiyonlar

Şimdi de argümanlı bir fonksiyon yapalım. Aşağıdaki uygulamada iki argümanlı bir fonksiyon göreceksiniz:

Code:

 
<html> 
<head> 
<title>Argümanlı Fonksiyon</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function puan(a, b) 
{ 
alert("Verdiğiniz notu göndermek için basın."); 
document.write(a + " isimli aktriste " + b + " notunu verdiniz."); 
} 
</script> 
</head> 
<body> 

<form> 
<input type="button" value="Notu Gönderin" onclick= "puan('Cameron Diaz', '100')"> 
</form> 

</body> 
</html>

Bu uygulamada fonksiyonumuzun iki tane argümanı var. Bunlar: 'Cameron Diaz' ve '100'. Yanlarındaki ' işaretleri bu argümanların bir metin ifadesi olduğunu anlatıyor.

Değer Atamalı Fonksiyonlar

Bir başka tür fonksiyon yapısı daha vardır. Buna değer atamlı fonksiyon diyoruz. Bu fonksiyon türü argümanlı veya argümansız olabilir. Ayırtedici özelliği yaptığı işlemleri bir değere dönüştürüp

bu değeri değişkenlere veya HTML nesnelerine aktarması. Bu fonksiyonun yapısı şöyledir:

function fonksiyonun adı (argüman1

argüman2

....

argümanN)
{
İŞLEMLER
return değer
}

Buradaki return kodu

işlemlerle bulunan bir değeri fonksiyona atamakta kullanılır. Aşağıdaki uygulamayla daha iyi anlayacaksınız.

Code:

<html> 
<head> 
<title>Değer Atamalı Fonksiyon</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function ustubes(x) 
{ 
x = x * x * x * x * x; 
return x 
} 
</script> 
</head> 
<body> 

<script language="JavaScript"> 
var a1, a2, a3, a4, a5, a6, a7, a8, a9; 
//Dokuz değişkeni ustubes() fonksiyonunu kullanarak değer atanıyor. 
a1 = ustubes(1); 
a2 = ustubes(2); 
a3 = ustubes(3); 
a4 = ustubes(4); 
a5 = ustubes(5); 
a6 = ustubes(6); 
a7 = ustubes(7); 
a8 = ustubes(8); 
a9 = ustubes(9); 
document.write 
("1,2,3,4,5,6,7,8 ve 9 sayılarının üstü beş hali sırasıyla aşağıda yazılmıştır.<br>"); 
document.write 
(a1 +", " + a2 +", " + a3 +", " + a4 +", " + a5 +", " + a6 +", " + a7 +", " + a8 +", " + a9); 
</script> 
</body> 
</html>

Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 18:50

Her programda olduğu gibi

JavaScript'te de koşul deyimleri vardır. Bu deyimler Java ve C'de aynen kullanılmakta olan if...else deyimi ve switch deyimi.

"if... else..." Koşul Deyimi

İlk koşul deyimimiz: if...else... (Türkçesi: eğer öyleyse...değilse...). Yazılımda veriler değerlendirilirken bir yol ayrımına

elemeye gidilebilir. Mesela belli bir değerin altındakiler için başka işlemler

üstündekiler için başka işlemler yapılabilir. Verileri böyle bir elemeye tabi tutmak için if...else... koşul deyimini kullanabiliriz. Bu deyimin genel yapısı şöyledir:

if (koşul ifadesi) işlem
else işlem

birden fazla işlem söz konusuysa

if (koşul ifadesi)
{
İŞLEMLER
}
else
{
İŞLEMLER
}

Koşul İfadeleri

Koşul ifadesi paran¤¤¤ içine yazılır. Koşul ifadesi verilerin izleyeceği akışı belirler. Bu koşula uyan verilere koşul ifadesinden sonraki işlemler

bu koşula uymayan verilere ise else ifadesinden sonraki işlemler uygulanır. Koşul ifadelerini belirtirken aşağıdaki işaretlerden yararlanırız:

== Eşitlik koşulunu sorgular.
degisken == 5
!= Eşit olmama koşulunu sorgular.
degisken != 5
> Büyük olma koşulunu sorgular.
degisken > 5
>= Büyük veya eşit olma koşulunu sorgular.
degisken >= 5
< Küçük olma koşulunu sorgular.
degisken < 5
<= Küçük veya eşit olma koşulunu sorgular.
degisken <= 5

Koşul deyimleri

koşul ifadesine uyanlara işlem yapar. Uymayanlara ise else kodundan sonraki işlem yapılır. else kodu kullanma zorunluluğu yoktur

kullanılmıyorsa koşul ifadesine uymayanlar

koşul deyimine nasıl girmişlerse öyle çıkarlar.

Code:

<html> 
<head> 
<title>Koşul Deyimleri</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function kabul() 
{ 
alert("İçeri girebilirsin."); 
document.write("<h1>Barımıza Hoşgeldiniz!</h1>"); 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function red() 
{ 
alert("Hoop ufaklık. Bas geri!"); 
document.write("<h1>18 yaşından küçükler giremez!</h1>"); 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var yas=13; 
if (yas >= 18) kabul() 
else red() 
</script> 
 
</body> 
</html>

Bu uygulamada iki fonksiyon var: kabul() ve red(). <body> bölümündeki JavaScript kodları arasında yas değişkenini ve if...else... koşul deyimini göreceksiniz. Koşul deyimi yas değişkeni 18'e eşit veya 18'den büyükse kabul() fonksiyonunu

değilse red fonksiyonunu çağırıyor. Burada yas değişkenini kod içinde 13 olarak tanımladık

bu durumda red() fonksiyonu çağrılır ve barın kapısından geri çevrilirsiniz.

"switch" Koşul Deyimi

if...else... koşul deyiminde yol ayrımı söz konusudur ve akış ikiye ayrılır. Şimdi göreceğimiz switch kodu ise akışı ikiden fazla sayıya ayırır. Yani birden fazla koşul sözkonusudur. switch koşul deyiminin genel yapısı şöyledir.

switch (ifade)
{
case değer1: işlem1
break
case değer2: işlem2
break
...
case değerN: işlemN
break
default: işlem
}

birden fazla işlem söz konusuysa

switch (ifade)
{
case değer1 :
{
işlemler
}
break
case değer2 :
{
işlemler
}
break
...
case değerN :
{
işlemler
}
break
default:
{
işlemler
}
}

Bu koşul eyleminde değişken switch(...) kısmına yazılır. Sonra değişkenin alabileceği değerler case: (durum) kodlarının yanlarına yazılarak koşul ifadesi yaratılır ve alttaki işlemler uygulanır. Eğer case: kodlarından hiçbiri değişkenin taşıdığı değeri tutmuyorsa

default: kodunun altındaki işlemler uygulanır. (default kodunun yazılması zorunlu değildir; else kodunun yazılmasının zorunlu olmadığı gibi) Buradaki break (kes) komutu önemlidir. İşlemlerin altına break kodu yazmazsak

bir alttaki case (durum) koşuluna ait işlemler de yapılır. break kodunu işlemlerin altına koyarsak

işlemler bitince bir alttaki case koşulunun işlemlerine geçilmez ve program switch deyiminin sonundan devam eder. Buradan hareketle aynı işlemlere tabi tutulacak koşul ifadelerini alt alta yazın ve bu ifadelerden en altında olanın işlemlerine break komutunu uygulayın. Aşağıdaki uygulama konunun anlaşılmasına yardımcı olacaktır.

Code:

<html> 
<head> 
<title>Koşul Deyimleri</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function karne(x) 
{ 
switch(x) 
{ 
case 10: 
case 9: harf="A" 
break 
case 8: harf="B" 
break 
case 7: 
case 6: harf="C" 
break 
case 5: harf="D" 
break 
default: harf="E" 
} 
return harf 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var isim = "Ali", puan = 8, y 
y = karne(puan) 
document.write(isim + " adlı öğrencinin aldığı not: " + y) 
</script> 
 
</body> 
</html>

Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 18:54

Bu sayfamızda döngü denetimini ve bu döngü oluşturan döngü deyimlerinin üzerinde duracağız. Bunlar while...

do...while... ve for....

"while" Döngü Deyimi

Öğreneceğimiz ilk döngü deyimi: while (Türkçesi: öyleyken). Bu deyimin yapısı şöyledir:

while (koşul ifadesi) işlem

birden fazla işlem söz konusuysa

while (koşul ifadesi)
{
İŞLEMLER
}

Bu deyimdeki koşul ifadesi sağlandığı sürece deyimdeki işlemler sürekli; bir döngü oluşturacak şekilde

kendisini tekrarlar. Bu işlemler öyle olmalıdır ki belli bir sayıda çevrimden sonra bu koşul ifadesini sağlamasın ve döngüden çıksın

aksi takdirde döngü sonsuza kadar devam eder.

Code:

 
<html> 
<head> 
<title>Döngü Deyimleri</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function mesaj() 
{ 
document.write("<h1>Cameron Diaz</h1>") 
} 
</script> 
</head> 
<body> 

<script language="JavaScript"> 
var a=1 
while (a == 1) mesaj() 
</script> 

</body> 
</html>

Heh he. Kötü şakaydı

kabul ediyorum. Öyle birşey yapmalısınız ki sonunda döngü sona ermeli ve kendini tekrar etmeyi bırakmalı. Mesela beş defa Cameron Diaz yazalım.

Code:

<html> 
<head> 
<title>Döngü Deyimleri</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function mesaj() 
{ 
document.write("<h1>Cameron Diaz</h1>") 
} 
</script> 
</head> 
<body> 

<script language="JavaScript"> 
var a=1 
while (a < 6) 
{ 
a++ 
mesaj() 
} 
</script> 

</body> 
</html>

Bu uygulamadaki while döngüsünü yakın plana alalım. Döngünün koşul ifadesi a değişkeninin 6'dan küçük olmasıdır. Yani a değişkeninin değeri 6'dan küçük olduğu sürece süslü paran¤¤¤ içindeki işlemler birbirini tekrar edip duracak. Ama bu sonlu bir döngü

bilgisayarımızı kilitleme tehlikesi yok. Çünkü işlemin içinde a'nın değeri her çevrimde 1 artıyor. Ayrıca her çevrimde bir kez "Cameron Diaz" yazılıyor. Beş çevrim sonunda a değişkeni 6 değerine ulaştığı için

6. çevrim yapılmaz ve döngü sona erer.

"do... while" Döngü Deyimi

do...while deyimi ile while deyimi arasında işlevsel olarak fark yok gibi görünür

ancak do...while deyiminde koşul ifadesi altta bulunur; ve koşul değerlendirmesi işlemi çevrimden önce değil

sonra yapılır. Deyiminin yapısı şöyledir:

do
İŞLEMLER
while (koşul ifadesi)

birden fazla işlem söz konusuysa

do
{
İŞLEMLER
}
while (koşul ifadesi)

Şu birden fazla işlem söz konusuysa

deyimini devam ettirmenin sanırım gereği kalmadı. Zekasına sonsuz saygı duyduğum okuyucular anlamıştır ki süslü paran¤¤¤ birden fazla işlemi; tek komutla harekete geçirmek için

bir araya toplamaya yarar.

Code:

<html> 
<head> 
<title>Döngü Deyimleri</title> 
<script language="JavaScript"> 
//Fonksiyonu hazırlıyoruz. 
function kare(sayi) 
{ 
y = sayi * sayi 
return y 
} 
</script> 
</head> 
<body> 

<script language="JavaScript"> 
var a=1 
do 
{ 
document.write("<b>" + a + "</b> sayısının karesi = <b>" + kare(a) + "</b><br>") 
a++ 
} 
while (a < 101) 
</script> 

</body> 
</html>

Yukarıdaki uygulama 1'den 100'e kadar tüm sayıların karesini buluyor. Sizler bu yazılımı hem görsel hem de işlevsel olarak geliştirebilirsiniz.

"for" Döngüsü

Şimdi sıra for... döngü deyimine geldi. Bu deyimin yapısı aşağıdaki gibidir:

for ( başlama noktası; koşul ifadesi; adım ifadesi)
{
İŞLEMLER
}

for döngüsünü belirleyen üç ifade var: başlama noktası

koşul ifadesi

adım ifadesi. Başlama noktası

döngünün hangi sayıdan başlayacağını belirler: i = 0 gibi. Koşul ifadesini daha önceki deyimlerden biliyoruz; koşul ifadesi aracılığıyla döngü devam eder: i <= 10 gibi. Adım ifadesi ise döngünün kaçar kaçar sayacağını belirleriz. Örneğin birer birer saymasını istiyorsak i++ değerini

ikişer ikişer saymasını istiyorsak i+=2 değerini kullanırız. Bu adımlar artırma (pozitif) yönlü olmak zorunda değil

azalma (negatif) yönlü de olabilir: i-- gibi.

Örneğin 75'den 1000'e kadar 25'er adımlı sayan bir yazılım geliştirelim.

Code:

<html> 
<head> 
<title>Döngü Deyimleri</title> 
</head> 
<body> 

<script language="JavaScript"> 
var i 
for (i = 75; i <= 1000; i += 25) 
{ 
document.write("Sayı = " + i + "<br>") 
} 
</script> 

</body> 
</html>

Şimdi de 1000'den geriye doğru 10'ar 10'ar -100'e kadar sayalım.

Code:

<html> 
<head> 
<title>Döngü Deyimleri</title> 
</head> 
<body> 

<script language="JavaScript"> 
var i 
for (i = 1000; i >= -100; i -= 10) 
{ 
document.write("Sayı = " + i + "<br>") 
} 
</script> 

</body> 
</html>

Koşul deyimlerini kullanarak bir döngü yaratmak da mümkün. Ama bunun için etiket kullanmalıyız. Etiketler yazılım kodları içindeki çeşitli başlama noktalarıdır. Etiketin ismi ve ":" işaretinden oluşur

örneğin BASLA: gibi. Yazılımın BASLA: ifadesine gitmesi ve oradan devam etmesini istiyorsak goto BASLA komut ve ifadesini kullanırız. Bir koşul deyimi ve etiketle nasıl döngü oluşturulduğunu aşağıdaki uygulamayla gösterebiliriz.

<html>
<head>
<title>Döngü

</title>
</head>
<body>

<script language="JavaScript">
var i=75
DONGU:
if (i <= 1000)
{
document.write("Sayı = " + i + "<br>")
i += 25
goto DONGU
}
</script>

</body>
</html>
Volkan Derinbay'a tşkler.

**O'NEAL** · 23-02-2008, 20:17

Akış denetimi ve döngü denetimi derslerimizde koşul ifadelerinin kullanıldığını gördük. Koşul deyimleri bu koşul ifadesine göre eleme yapıyor

döngü deyimleri bu koşul ifadesine göre çevrim oluşturuyordu. Ancak bu koşul ifadesi tek bir koşuldan oluşuyordu

acaba birden fazla koşulun sorgulanması mümkün müdür?

Elbette. Bunun için ilk yol

deyim içinde deyim kullanmaktır. Örneğin aşağıdaki uygulamada if koşul deyimi içiçe kullanılarak

sayının 25 ile 60 arasında olduğunu sorgulamaktadır:

Code:

<html> 
<head> 
<title>İkili Sorgulama</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function onay() 
{ 
document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function red() 
{ 
document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var x=38 
if (x < 60) 
{ 
if (x > 25) onay() 
else red() 
} 
else red() 
</script> 
 
</body> 
</html>

Burada içiçe if koşul deyimi kullanılmış ve önce sayının 60'dan küçük olması sorgulanıyor. Sayının 60'dan küçük olması halinde

bu sefer de sayının 25'ten büyük olması sorgulanıyor. Yani 60'tan küçük olan sayıların 25'ten büyük olması sorgulanıyor. Böylece sayının 60'dan küçük ve 25'ten büyük olması sorgulanmış oluyor.

JavaScript'te "ve" Operatörü: "&&"

İçiçe deyim kullanmak da güzel bir yol ama daha kısa bir yolumuz var: Mantıksal İşlemler. Sayının hem 25'ten büyük olmasını

hem de 60'tan küçük olmasını istiyorsak ve anlamına gelen && mantıksal işlem işareti ile iki koşulu tek bir koşul ifadesi haline dönüştürebiliriz:

Code:

 
<html> 
<head> 
<title>Mantıksal İşlemler</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function onay() 
{ 
document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function red() 
{ 
document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var x=65 
if (x < 60 && x > 25) onay() 
else red() 
</script> 
 
</body> 
</html>

Bu sefer && (ve) işaretini kullanarak sayının 60'tan küçük olmasını ve sayının 25'ten büyük olmasını sorguladık. Buradaki ve kavramını Matematik konusunun mantık (logic) dersinden hatırlıyorsunuzdur. (Matematiği anlamakta zorlananlar programcılığa hiç başlamasınlar.) Özetle ve ifadesinin sorgulama sonuçları şöyleydi:

Doğru && Doğru = Doğru
Doğru && Yanlış = Yanlış
Yanlış && Doğru = Yanlış
Yanlış && Yanlış = Yanlış

&& operatörüyle yapılan sorgulamanın onaylanması için

her iki koşulun da sağlanması gerekir. Aksi takdirde sorgulama onaylanmayacaktır.

JavaScript'te "veya" Operatörü: "||"

Bir başka mantıksal işlem operatörü: || (veya anlamındadır; bu işareti oluşturmak için iki defa ALTGR + "tire" tuşuna basın. "tire" tuşu backspace (geri al) tuşunun solunda bulunur. Eminim matematik bilgilerinden hiç kuşku duymadığım okuyucular bu operatörün sorgulama sistemini hemen hatırlamışlardır ama ben yine de yazayım.

Doğru || Doğru = Doğru
Doğru || Yanlış = Doğru
Yanlış || Doğru = Doğru
Yanlış || Yanlış = Yanlış

|| (veya) operatörünün && (ve) operatöründen farkı görülüyor. Bir sorgulamada || operatörü kullanılmışsa

koşullardan bir tanesinin gerçekleşmesi onay için yeterlidir. Son uygulamamızda 65 sayısını && operatörü ile sorgulamıştık:

(65 < 60) && (65 > 25)

Bu koşulun ilk kısmı yanlış

ikinci kısmı ise doğruydu. Yanlış && doğru = yanlış olduğundan sorgulama sonucu red fonksiyonuna gönderilmişti. Aynı koşul ifadelerini || operatörü ile sorgulasaydık sonuç başka olacaktı:

(65 < 60) || (65 > 25)

Buradaki işlem: Yanlış || doğru = doğru işlemidir. Ve koşul ifadesi kabul görür. Bu nedenle && ile || ifadelerini ne zaman kullanacağımıza dikkat etmeliyiz. Şimdi || operatörü için başka bir uygulama geliştirelim: Bu uygulamamız öncekiyle aynı sonucu versin. Yanlız bunun için koşul ifadesini ve koşul işlemlerini değiştireceğim

aradaki farka dikkat ediniz.

Code:

 
<html> 
<head> 
<title>Mantıksal İşlemler</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function onay() 
{ 
document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function red() 
{ 
document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var x=65 
if (x > 60 || x < 25) red() 
else onay() 
</script> 
 
</body> 
</html>

Aradaki farkı anlayanlar bu işi kapmış demektir.

JavaScript'te "değil" Operatörü: "!"

Bir diğer mantıksal işlem operatörü: ! (değil) operatörüdür. Bu operatör koşul ifadesinin solunda yer alır ve o ifadenin olmamasını sorgular. Uygulamayla gösterelim:

Code:

 
<html> 
<head> 
<title>Mantıksal İşlemler</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function negatif() 
{ 
document.write("<h1>Negatif sayı.</h1>") 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function pozitif() 
{ 
document.write("<h1>Pozitif sayı.</h1>") 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var x=12 
if (!(x >= 0)) negatif() 
else pozitif() 
</script> 
 
</body> 
</html>

Uygulamamızda 12 değeri verilen x değişkeninin 0'dan küçük olup olmadığı sorgulanmakta. Eğer sıfırdan büyük değilse negatif()

aksi takdirde pozitif() fonksiyonları çağrılmaktadır.

Değişkenlere Mantıksal Değer Atama

Sayfamızda aynı koşul ifadelerini birçok kez sorguluyorsak veya koşul ifadesi çok uzunsa

değişkenlere atamayı tercih edebiliriz. Yapı olarak değişkene normal bir değer vermekten farkı yoktur. Örneğin üstteki uygulamayı şu hale dönüştürebiliriz:

Code:

 
<html> 
<head> 
<title>Değişkenlere Mantıksal Değer Atama</title> 
<script language="JavaScript"> 
//İlk fonksiyonu hazırlıyoruz. 
function negatif() 
{ 
document.write("<h1>Negatif sayı.</h1>") 
} 
//İkinci fonksiyonu hazırlıyoruz. 
function pozitif() 
{ 
document.write("<h1>Pozitif sayı.</h1>") 
} 
</script> 
</head> 
<body> 
 
<script language="JavaScript"> 
var x=12 
var y=((x > 0) || (x == 0)) 
if (!y) negatif() 
else pozitif() 
</script> 
 
</body> 
</html>

Bu uygulamamızda ((x > 0) || (x == 0)) mantıksal değerini y değişkenine atadık.

Volkan Derinbay'a tşkler.

23-02-2008, 18:36	#1 (permalink)
O'NEAL	Java Script Dersleri JavaScript ile VBScript arasında işlev ve yapı bakımından fark yoktur. Kod yazmak için ikisini birden öğrenmeniz şart değil elbette. Ama başkalarının kodlarını araştırmak ve bir şeyler öğrenmeye çalışmak gibi harika bir hobiniz varsa neden ikisini birden öğrenmeyesiniz? Bazı sayfalarda "Şöyleyse VBScript böyleyse JavaScript öğrenmenizi tavsiye ederim" gibilerinden laflar ediliyor. Ben böyle bir tavsiyede bulunamam açıkçası. Ama şunu bilin VBScript biraz daha kolay öğreniliyor gibi. Bununla birlikte JavaScript'in çok daha yaygın olduğu da bir gerçek. Visual Basic bilenler VBScript'i daha kolay C veya Java bilenler JavaScript'i daha kolay öğrenecektir. Son söyleyeceğim şey ikisi de basit dilerseniz her ikisini birden rahatlıkla öğrenebilirsiniz. JavaScript (VBScript) HTML'in bir parçasıdır aslında; derleyici bir programa ihtiyaç duymaz HTML kodlarıyla beraber yazılır ve gözatıcı (browser) tarafından yorumlanır. JavaScript'in (VBScript'in) işlevleri yazmakla bitmez ya ben aklıma geldiğince listeledim: * HTML tasarımcılarına bir programlama desteği sağlar bünyesinde değişkenler fonksiyonlar döngüler yordamlar bulundurur. * HTML sayfalarına hareketli HTML nesneleri (metin resim vb.) koyabilmemizi sağlar. * Olaylara tepki verir. (Olaydan kastettiğim şey: tıklamak tuşa basmak sayfa açmak gibi şeyler.) * HTML elemanlarını okuyabilir veya yazabilir. * Kullanıcı ile bilgi alışverişinde bulunmamızı sağlar. Zira HTML formları JavaScript (VB Script) olmadan pek bir işe yaramaz. HTML'e JavaScript Kodlarını Tanıtma JavaScript HTML kodları arasında nasıl kullanılır? JavaScript kodlarını HTML'e tanıtmak için Java Script kodlarını <script language="JavaScript">...</script> HTML kodları arasına yazarız. Not: VBScript için language="VBScript" parametresi kullanılır. Aşağıdaki uygulama ilk JavaScript örneğimiz: Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> document.write("Merhaba") </script> </body> </html> Burada <script language="JavaScript">...</script> arasında yazılı olan bir tane JavaScript kodu bulunmakta: document.write("..."). Bu kod paran¤¤¤ içine yazılan HTML kodlarını uygular. Tabi bu uygulama için JavaScript koduna ihtiyacımız yok aslında doğrudan Merhaba deseydik yine Web Sayfamız saygıda kusur etmez bize Merhaba derdi. Ama ileriki konularda bu koda ihtiyacımız olacak. Bu uygulamada HTML kodu olarak düz bir metin kullandık. Paran¤¤¤ içindeki HTML kodunu biraz daha zenginleştirebiliriz: Code: <html> <head> <title>JavaScript Uygulaması 2</title> </head> <body> <script language="JavaScript"> document.write("<font size=6 color=blue>") document.write("Merhaba") document.write("</font>") </script> </body> </html> JavaScript'in en sevmediğim özelliğini anlatmadan geçemem. JavaScript'te (VBScript'te herşeyi illâ ki harfi harfine yapacaksın. Küçücük bir hata sayfanızın çıkmamasına ve pencerenin alt kısmında JavaScript hatası belirmesine neden olur. Bu zamana kadar HTML gibi esnek bir dille çalışıyorduk; bu nedenle bu sayfalarla ilgili örnekler yaparken biraz yorulabilirsiniz JavaScript kodlarının HTML'deki Konumu JavaScript yukarıdaki uygulamalarda olduğu gibi <body>...</body> kodları arasında yer alabileceği gibi; fonksiyon halinde <head>...</head> arasında da yer alabilir: Code: <html> <head> <title>JavaScript Uygulaması</title> <script language="JavaScript"> function selam() { alert("Merhaba") } </script> </head> <body onload="selam()"> </body> </html> Bu örnek hiçbir programlama dili bilmeyen birisi için anlaşılması biraz zor. Kabaca anlatayım; anlamayanlar için ileriki sayfalarda genişçe anlatacağım: Bu uygulamada JavaScript kodu <head> bölümünde fonksiyon halinde yer alıyor. function selam() ifadesi ile selam() isimli bir fonksiyon tanımlıyoruz. Bu fonksiyonun ne yaptığını süslü paran¤¤¤ler arasına yazarız. Örneğin selam() fonksiyonunun içeriğinde alert("...") kodu vardır. Bu JavaScript kodu tırnak içindeki ifadeyi mesaj kutusuyla göstermeye yarar. Demek ki selam fonksiyonu mesaj kutusuyla "Merhaba" demeye yarıyormuş. Dikkat ederseniz <body> koduna onload="..." (İngilizce'de "yüklendiği takdirde" demek) durumu atanmış. Yani sayfa yüklenildiğinde selam() mesajı veriliyor. JavaScript kodu; CSS'de olduğu gibi dış bir dosyayla da HTML'e tanıtılabilinir. CSS dosyası .css uzantılıydı. Dış JavaScript dosyası ise .js uzantılıdır. Aşağıdaki metin dosyasını selam.js ismiyle kaydettim: Code: document.write("<center>") document.write("<h1>Merhabalar!</h1>") document.write("</center>") Şimdi bu dış JavaScript dosyasını HTML sayfasına tanıtıyorum: Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script src="selam.js"> </script> </body> </html>

23-02-2008, 18:38	#2 (permalink)
O'NEAL	Değişkenler Değişken içinde değerler saklayabileceğiniz bir programlama aracıdır. Değişkenlerin sakladığı değer kod sayfaları boyunca değişebilir birbirine aktarılabilir. Değişkene başka bir değer atayabilirsiniz veya değişkenin sakladığı değeri program içinde kullanabilirsiniz. Değişkenler genellikle programın başlangıcında isimlendirir; böylece bu isimlerle değişkeni çağırabilir değişkenin taşıdığı değeri kullanabilirsiniz. Not: Değişkenin ismi program boyunca değişmez ancak taşıdığı değer değişebilir. Değişken İsimleri Değişkenleri isimlendirirken dikkat etmemiz gereken bazı kurallar vardır: * Değişken ismi harf rakam veya "_" (altçizgi) karakterlerinden oluşabilir. * Değişken isminin ilk karakteri bir harf veya "_" (alt çizgi) işareti olmalıdır. (vol_html23 gibi) * JavaScript küçük harf büyük harf ayrımı yapar. Mesela değişken isminiz DIAZ ise bu değişkeni hep böyle büyük harflerle yazmak zorundasınız. diaz yazarsanız gözatıcı bunu farklı bir değişken olarak okur. * Değişken isimlerinin uzunluğu 255 karakter kadar olabilir. * Değişken isimleri içinde diğer semboller (+ - / boşluk vb.) yer alamaz. * Değişken isimlerinde İngilizce'de olmayan karakterleri (ş ç ö vb.) kullanmayınız. (Genellikle yeni kullanıcılar bu kuralı her zaman anımsamıyorlar. Değişkenlere Değer Verme Değişkenlere değer verirken değişken her zaman sol tarafta yer alır. Mesela sayi değişkenine 15 değerini vereceksek şöyle yazarız: sayi= 15 Değişkenler birbirinin değerini de alabilir. Her zaman sola yazılan ifade sağdaki değeri alır. Örneğin şu iki değişkene bakalım: sayı1= 5 sayı2= 10 sayı1= sayı2 Burada sayi1 ve sayi2 isimli iki değişken söz konusu. Önce sayi1 isimli değişkene 5 değeri veriliyor. Sonra sayi2 değişkenine 10 değeri veriliyor. Sonra sayi1 değişkenine sayi2'nin değeri verilerek sayi1'in değeri değiştiriliyor. Böylece sayi1= 10 sayi2= 10 oluyor. Eğer sayi2 = sayi1 ifadesi olsaydı (sayi2 solda yeralsaydı) sayi1'in değeri sayi2'ye verilmiş olacaktı. Bu durumda sonuç değişik olurdu: sayi1= 5 sayi2= 5 Yukarıdaki yazdıklarımızı bir uygulamayla gösterelim: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> Code: <script language="JavaScript"> sayi1=5 sayi2=10 sayi1= sayi2 document.write(sayi1) document.write("<br>") document.write(sayi2) </script> </body> </html> Dikkat ederseniz document.write(...) kodunun paran¤¤¤ arasına değişkenleri yazarken tırnak işareti kullanmadık. Çünkü değişkenler HTML elemanı değil JavaScript elemanı. Bu üç kod yerine şöyle yazabilirdik: document.write(sayi1 + "<br>" + sayi2). İsterseniz değişkenlerin yerini değiştirelim (sayi2 = sayi1 yapalım): Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> sayi1=5 sayi2=10 sayi2= sayi1 document.write(sayi1 + "<br>" + sayi2) </script> </body> </html> Değişken Tanımlama ve Değişken Türleri Yukarıdaki uygulamalarımızda değişkenlere değer verdik ama onları tanımlamadık tanımlamak zorunda da değiliz. Ancak bu değişkenleri var kodu ile baştan tanımlamak doğru bir yaklaşımdır. (Başka program bilenlere not: Eğer baştan tanımlamazsak değişkenler global olur. Başka program bilmeyenlere not: Önceden tanımlamakta büyük kerametler var.) Aşağıdaki üç durum da aynı şeyi ifade ediyor: var sayi1 var sayi2 sayi1=5 sayi2=10 veya var sayi1 sayi2 sayi1=5 sayi2=10 veya var sayi1=10 sayı2=5 Bu şekillerde değişkenleri tanımlayabiliyoruz. Şimdiye kadar değişkenlere hep sayısal değerler verdik. Oysa JavaScript değişkenleri 5 çeşit değer alabiliyor: Sayısal Değerler : Aritmetik işlemler yapılabilen her türlü sayısal değer: tam sayı ondalık sayı negatif sayı. sayi = 32 Alfanümerik Değerler : Aritmetik işlemler yapılmayan metinsel özellikler taşıyan değerler. sev = "Cameron Diaz" Onay Değerleri : Sadece doğru veya yanlış değerlerini kabul eden değerler. Doğru ifadesi 1 ile yanlış ifadesi 0 ile ifade ediliyor. cevap=1 Fonksiyon Değeri : Değişkenler tıpkı sayılar ve metinler gibi fonksiyonları da saklayabilmektedir. yap = selam() Nesne Değeri : Değişkenler HTML nesnelerini (düğme metin resim vb.) değer olarak saklayabilmektedir. eleman = dugme Volkan Derinbay'a tşkler.

23-02-2008, 18:41	#3 (permalink)
O'NEAL	Aritmetik İşlemler VB Script ile Java Script'in işlem işaretleri biraz farklı. Bu farklar Visual Basic ile Java (veya C) arasında da aynı şekildedir. Daha önce programcılık yapmamış arkadaşlar için kısaca işlem önceliğini de anlatmak zorundayım. Özetle bu sayfada aritmetik işlemler ve öncelik sıraları yeralacak. Aritmetik İşlem İşaretleri ve Öncelik Sıralaması + Toplama işlemini yapar. sayi = 10 + 5 (Not: sayi=15 olur) - Çıkartma işlemini yapar. sayi= 10 - 5 (Not: sayi=5 olur) * Çarpma işlemini yapar. sayi = 10 * 3 (Not: sayi=30 olur) / Bölme işlemi yapar. sayi= 10 / 3 (Not: sayi=3.3333333333333335 olur) % Tamsayılı bölme işlemi yapar ve kalanı verir. sayi=10 % 3 (Not: sayi=1 olur) Bu işlemlerde çarpma bölme ve kalanlı bölme işlemlerinin toplama ve çıkarma işlemine göre önceliği vardır. Bir işlemde eğer hiç paran¤¤¤ yoksa soldan sağa doğru sırasıyla çarpma ve bölme işlemleri yapılır. Bu prensip her bilgisayar dilinde ve hesap makinelerinde de geçerlidir. Aşağıdaki örneklere bakalım. *sayi = 5 6 - 10 / 5** Bu işlemde çarpma önceliği - işaretine göre daha fazla olan * ve / işlemleri yapılır. (* ve / işlemlerinin önceliği aynıdır.) Bu durumda sayi = 30 - 2 = 28 olur. *sayi = 5 6 / 10 * 2 + 4 * 3 Bu işlemde önceliği aynı olan çarpma ve bölme işlemleri birarada yer alıyor. Bu durumda işlemler sırayla yapılır. Önce 5 ile 6 çarpılır çıkan sonuç 10'a bölünür ve çıkan sonuç 2 ile çarpılır. Ve sayi = 6 + 12 = 18 sonucuna ulaşılır. sayi = ((5 * 6) / (10 * 2) + 4) * 3** Bu işlemde paran¤¤¤ler söz konusu. Ve her zaman paran¤¤¤lerin önceliği vardır. İlk önce iki iç paran¤¤¤ içindeki işlemleri sonra büyük paran¤¤¤ içindeki işlemleri yaparız. Böylece sayi = (30 / 20 + 4) * 3 = (5.5 + 4) * 3 = 9.5 * 3 = 28.5 sonucunu elde ederiz. Değişken Değerini Taşıdığı Değere Göre Değiştirme Bazen değişkenlerin değerini kendisiyle işlem yaparak değiştirebiliriz. Örneğin: var sayi = 5 sayi = sayi + 1 Bu durumda sayi = 5 + 1 = 6 olur. var sayi = 4 sayi = sayi - 1 Bu durumda sayi = 4 - 1 = 3 olur. var sayi = 6 sayi = sayi * 5 Bu durumda sayi = 6 * 5 = 30 olur. var sayi = 10 sayi = sayi / 2 Bu durumda sayi = 10 / 2 = 5 olur. var sayi = 10 sayi = sayi % 4 Bu durumda sayi = 10 % 4 = 2 olur. Bu işlemleri şu işaretlerle de yapabiliriz: "+=" "-=" "=" "/=" ve "%=". Aşağıdaki işlemler birbiriyle aynı sonucu verir. sayi += 5 eşittir sayi = sayi + 5 sayi -= 4 eşittir sayi = sayi - 4 sayi = 6 eşittir sayi = sayi * 6 sayi /= 2 eşittir sayi = sayi / 5 sayi %= 4 eşittir sayi = sayi % 4 Bu aritmetik işlemler C ve Java'da da aynı şekilde kullanılmaktadır. Bu işaretlerin yanında özelleşmiş iki işaret daha vardır: ++ --. sayi++ eşittir sayi = sayi + 1 sayi-- eşittir sayi = sayi - 1 Aritmetik işlemlerle ilgili bir uygulama yapalım. Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> var en1=5, boy1=10, dortgen1 var en2, boy2, dorgen2 dortgen1= en1 * boy1 boy1++ en1++ boy2 = boy1 en2 = en1 dortgen2= en2 * boy2 document.write("Eni 5, boyu 10 cm olan bir dörtgenin alanı = " + dortgen1 +" cm<sup>2</sup> 'dir.<br>") document.write("Eni ve boyu 1'er cm artırılırsa dörtgenin alanı = " + dortgen2 +" cm<sup>2</sup> oluyor.") </script> </body> </html> İşlem önceliğini daha iyi anlatan bir başka uygulama yapalım. Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> var gelir=25000, maliyet=12000 var vergiorani=0.15, amortismanorani=0.10 var amortisman, vergi vergi = (gelir - maliyet) * (1 - amortismanorani) * vergiorani amortisman = (gelir - maliyet) * amortismanorani document.write("Şirketimizin yıllık vergisi = " + vergi +" TL'dir.<br>") document.write("Şirketimizin yıllık amortismanı = " + amortisman + "TL'dir.") </script> </body> </html> Volkan Derinbay'a tşkler.

23-02-2008, 18:44	#4 (permalink)
O'NEAL	Yazım Kuralları Bu sayfamızda JavaScript'in yazım kuralları üzerinde duracağız. JavaScript'te hata yapmanın bedeli çok ağırdır. Nerede hata yaptığınızı bulmak uzun zaman alır. avaScript tıpkı HTML gibi bırakılan boşlukları dikkate almaz. Yani sayi=5 ile sayi = 5 arasında fark gözetmez. JavaScript'te komutlar ; (noktalı virgül) işareti konularak yanyana yazılabilir. Aynı satırda olmasa da her komuttan sonra ; işareti koymak yararlıdır kodlar arasında ayıraç vazifesi görür. JavaScript Nesnelerine İsim Koyma JavaScript nesnelerine isim koyarken aklımızdan çıkarmamamız gerekenlerin başında JavaScript'in küçük harf büyük harf ayrımı yaptığıdır. Mesela AritmetikOrtalama() isimli bir fonksiyonu daha sonra aritmetikortalama() ismiyle çağıramayız. JavaScript bu durumu iki ayrı fonksiyon gibi değerlendirir. JavaScript nesnelerinin (değişken fonksiyon vb.) ismi bir sayıyla başlamaz ama sonraki karakterler sayı olabilir; arada boşluk bırakılmaz boşluk yerine _ işareti kullanılır. Bunları değişkenler konusunda anlatmıştık. JavaScript nesneleri bu kurallara uygun her kelimeyi isim olarak alması da söz konusu değil JavaScript komutlarını nesne ismi olarak kullanamayız. Bazı isimlerde daha sonra komut olarak JavaScript'e girer diye ayrılmıştır ve onlarda nesne ismi olarak kullanılamaz. Nesne ismi olarak kullanılamayan bu kodları atacagım 2. mesajda belirtecegim. JavaScript'te Özel İşaret Gösterimi JavaScript'te HTML nesnesini ifade ederken bazı özel işaretlerin önlerine \ işareti koymalıyız. Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> document.write ("Ali'nin köpeği "Hav hav!" dedi."); </script> </body> </html> Bu uygulama çalışmaz ve JavaScript hatası verir. Bu kodda JavaScript içiçe tırnakları ayrı ayrı tırnak işareti olarak görür. Doğrusu şöyle yazılır: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); </script> </body> </html> JavaScript'te ' (tek tırnak) işareti ile " (çift tırnak) işareti arasında işlevsel bakımdan bir fark yoktur. Ancak içiçe tırnak kullanılan durumlarda içtekini başka dıştakini başka tırnak işaretiyle göstermek yararlıdır. Örneğin: <input type="button" value="Bas" onclick="alert('Düğmeye Bastınız!');"> Burada " (çift tırnak) işaretiyle JavaScript ifadesi HTML parametresine tanıtılmış oluyor. ' (tek tırnak) ifadesi ile JavaScript kodunun yazdırdığı metin belirtilmiş oluyor. Böylece hangi tırnağın nerede bittiği konusunda herhangi bir karışıklık olmuyor. Yorum Kodları JavaScript ile yapacağımız programlar bazen o kadar büyük ve karmaşık olur ki neler yaptığımızı biz bile unuturuz. Gerek sonradan hatırlamak için gerekse bizden başka kodları okuyacak olanlara yardımcı olmak için kodların arasına bazı notlar düşeriz. Bu tür notları doğrudan yazarsanız JavaScript hatasına sebep olur veya programınızın işlevini değiştirirsiniz. Bu notları düşmek için not satırı önüne // işaretini koyarız. Bu işaret bir satırlık not bırakmamızı sağlar ve JavaScript kodlarını etkilemez: Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> //Bu uygulama JavaScript yazım kuralları üzerinedir. document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); </script> </body> </html> Bazen düşeceğimiz not birkaç satırdan oluşabilir. Bu durumda not /.../ işaretleri arasına yazılır. Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> /Bu uygulama JavaScript yazım kuralları üzerinedir. İtiraf edeyim ki pek iyi bir uygulama olmadı, Ali'ymiş, yok efendim köpeği hav hav dermiş. İlkokul uygulamalarına benzedi./ document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); </script> </body> </html> JavaScript'in gözatıcı (browser) tarafından derlendiğini daha önce söylemiştim. Ancak bazı kişisel gözatıcılar ve eski sürüm gözatıcılar JavaScript'i desteklemiyor ve sayfada hatalar veriyor. Bu tip gözatıcıların JavaScript kodlarını tanıması için elimizden gelen birşey yok. Ama hiç olmazsa sayfada hataya neden olmamak için HTML'in <!-- yorum kodu kullanılır. Ayrıca yeni sürümlerin kodu görebilmesi için // yorum kodları da gereklidir. Eski sürüm gözatıcılar veya JavaScript'i desteklemeyen kişisel gözatıcılar JavaScript kodlarını HTML yorumu olarak görür ve sayfada bozulmaya neden olmaz; kullanıcı JavaScript'in faydalarından yararlanamasa da sayfayı düzgün bir şekilde görür. Aşağıda bunun nasıl yapıldığını görüyorsunuz. Code: <html> <head> <title>JavaScript Uygulaması</title> </head> <body> <script language="JavaScript"> <!-- Eski sürüm gözatıcılardan JS kodlarını saklayalım. //Şimdi normal kodları yazabiliriz. document.write ("Ali'nin köpeği \"Hav hav!\" dedi."); //--> </script> </body> </html> Volkan Derinbay'a tşkler.

23-02-2008, 18:48	#5 (permalink)
O'NEAL	Fonksiyonlar En iyi yazılımcı az kodla çok şey yapabilendir. Acemi yazılımcıların sayfalarca kod yazarak yaptığı programları usta yazılımcılar yarım sayfada yapabilir. Bunun inceliklerini hem bu sayfada hem de ileride yapacağımız ileri uygulamalarda göstereceğim. Diyelim ki programda bir sürü işlem yapacağız ama öyle bir işlem var ki 50 defa yapacağız. (Mesela "Ali gel." yazdıracağız.) Programa bu işlemi 50 defa yaptırmak için o işlem kodunu 50 defa yazdırmak zorunda kalırız ve programımız sayfalarca sürebilir. Üstelik bu işlem kodlarının birkaç satır değil de yarım sayfa sürmesi söz konusu da olabilir. Bu durumda 50 defa o yarım sayfalık kodu yazmak zorunda mı kalacağız? Hayır. O yarım sayfalık işlem kodunu bir fonksiyon haline getiririz ve 50 defa o fonksiyonu tek kelime olan fonksiyon ismi ile çağırırız. Bu durumda 30-40 sayfalık bir kodu 3-4 sayfaya indirmiş oluruz. Peki bir işlem nasıl fonksiyon haline getirilir? İşte sayfamızın konusu bu. Fonksiyon Yapısı Fonksiyonlar <head>...</head> bölümünde yer alır. Bir fonksiyonun genel yapısı aşağıdaki gibidir: function fonksiyonun adı (argüman1 argüman2....argümanN) { İŞLEMLER } Fonksiyonlara koyduğumuz isim fonksiyonu çağırmak için gereklidir. Her fonksiyonun adı olmalıdır zira fonksiyonlar bir olay (durum) karşısında çağrılabilsin diye yapılır. Bu olay bir düğmenin tıklanması bir radyo veya kontrol kutusunun seçilmesi bir HTML nesnesinin üzerine fare ile gelinmesi olabilir. (HTML'de form nesnelerini unutan arkadaşlarımıza tekrar bakmalarını salık veririm. Bu olaylara ilerdeki Olaylar sayfasında ayrıntılı olarak değineceğim. Ama şimdilik onclick (tıklanıldığı takdirde) olay parametresini kullanacağız. Bu parametre form araçlarına olduğu gibi hiperlink resim gibi diğer HTML nesnelerine de atanabilir. onclick = Fonksiyon Adı() şeklinde kullanılır. Argümansız Fonksiyonlar Fonksiyonlar çeşitli argümanları kullanarak işlem yapabilirler. Bu argümanlar değişken nesne veya değer ifadesi olabilir. Bunun yanısıra fonksiyonların argüman kullanma zorunluluğu yoktur; aşağıdaki uygulama argümansız bir fonskiyon içermektedir. Code: <html> <head> <title>Argümansız Fonksiyon</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function mesaj() { alert("Hiç bir mesajınız yok."); document.write("Mesaja baktınız..."); } </script> </head> <body> <form> Mesaja bakmak istiyorsanız, düğmeye basın.<br> <!--Düğmeye basıldığında fonksiyon çağrılır.--> <input type="button" onclick="mesaj()" value="Mesaj Kontrol"> </form> </body> </html> Bu uygulamamızda mesaj() isimli argümansız bir fonksiyon kullandık. Bu fonksiyonu kullanmamız şart değildi elbette. Fonksiyon yaratmak yerine kodları <body> bölümüne yazabilirdik. Ancak bu fonksiyonu buradaki gibi bir defa değil de beş-on yerde kullansaydık fonksiyon sayesinde bir sürü kod yazmaktan kurtulacaktık. Argümanlı Fonksiyonlar Şimdi de argümanlı bir fonksiyon yapalım. Aşağıdaki uygulamada iki argümanlı bir fonksiyon göreceksiniz: Code: <html> <head> <title>Argümanlı Fonksiyon</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function puan(a, b) { alert("Verdiğiniz notu göndermek için basın."); document.write(a + " isimli aktriste " + b + " notunu verdiniz."); } </script> </head> <body> <form> <input type="button" value="Notu Gönderin" onclick= "puan('Cameron Diaz', '100')"> </form> </body> </html> Bu uygulamada fonksiyonumuzun iki tane argümanı var. Bunlar: 'Cameron Diaz' ve '100'. Yanlarındaki ' işaretleri bu argümanların bir metin ifadesi olduğunu anlatıyor. Değer Atamalı Fonksiyonlar Bir başka tür fonksiyon yapısı daha vardır. Buna değer atamlı fonksiyon diyoruz. Bu fonksiyon türü argümanlı veya argümansız olabilir. Ayırtedici özelliği yaptığı işlemleri bir değere dönüştürüp bu değeri değişkenlere veya HTML nesnelerine aktarması. Bu fonksiyonun yapısı şöyledir: function fonksiyonun adı (argüman1 argüman2....argümanN) { İŞLEMLER return değer } Buradaki return kodu işlemlerle bulunan bir değeri fonksiyona atamakta kullanılır. Aşağıdaki uygulamayla daha iyi anlayacaksınız. Code: <html> <head> <title>Değer Atamalı Fonksiyon</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function ustubes(x) { x = x * x * x * x * x; return x } </script> </head> <body> <script language="JavaScript"> var a1, a2, a3, a4, a5, a6, a7, a8, a9; //Dokuz değişkeni ustubes() fonksiyonunu kullanarak değer atanıyor. a1 = ustubes(1); a2 = ustubes(2); a3 = ustubes(3); a4 = ustubes(4); a5 = ustubes(5); a6 = ustubes(6); a7 = ustubes(7); a8 = ustubes(8); a9 = ustubes(9); document.write ("1,2,3,4,5,6,7,8 ve 9 sayılarının üstü beş hali sırasıyla aşağıda yazılmıştır.<br>"); document.write (a1 +", " + a2 +", " + a3 +", " + a4 +", " + a5 +", " + a6 +", " + a7 +", " + a8 +", " + a9); </script> </body> </html> Volkan Derinbay'a tşkler.

23-02-2008, 18:50	#6 (permalink)
O'NEAL	Akış Denetimi Her programda olduğu gibi JavaScript'te de koşul deyimleri vardır. Bu deyimler Java ve C'de aynen kullanılmakta olan if...else deyimi ve switch deyimi. "if... else..." Koşul Deyimi İlk koşul deyimimiz: if...else... (Türkçesi: eğer öyleyse...değilse...). Yazılımda veriler değerlendirilirken bir yol ayrımına elemeye gidilebilir. Mesela belli bir değerin altındakiler için başka işlemler üstündekiler için başka işlemler yapılabilir. Verileri böyle bir elemeye tabi tutmak için if...else... koşul deyimini kullanabiliriz. Bu deyimin genel yapısı şöyledir: if (koşul ifadesi) işlem else işlem birden fazla işlem söz konusuysa if (koşul ifadesi) { İŞLEMLER } else { İŞLEMLER } Koşul İfadeleri Koşul ifadesi paran¤¤¤ içine yazılır. Koşul ifadesi verilerin izleyeceği akışı belirler. Bu koşula uyan verilere koşul ifadesinden sonraki işlemler bu koşula uymayan verilere ise else ifadesinden sonraki işlemler uygulanır. Koşul ifadelerini belirtirken aşağıdaki işaretlerden yararlanırız: == Eşitlik koşulunu sorgular. degisken == 5 != Eşit olmama koşulunu sorgular. degisken != 5 > Büyük olma koşulunu sorgular. degisken > 5 >= Büyük veya eşit olma koşulunu sorgular. degisken >= 5 < Küçük olma koşulunu sorgular. degisken < 5 <= Küçük veya eşit olma koşulunu sorgular. degisken <= 5 Koşul deyimleri koşul ifadesine uyanlara işlem yapar. Uymayanlara ise else kodundan sonraki işlem yapılır. else kodu kullanma zorunluluğu yoktur kullanılmıyorsa koşul ifadesine uymayanlar koşul deyimine nasıl girmişlerse öyle çıkarlar. Code: <html> <head> <title>Koşul Deyimleri</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function kabul() { alert("İçeri girebilirsin."); document.write("<h1>Barımıza Hoşgeldiniz!</h1>"); } //İkinci fonksiyonu hazırlıyoruz. function red() { alert("Hoop ufaklık. Bas geri!"); document.write("<h1>18 yaşından küçükler giremez!</h1>"); } </script> </head> <body> <script language="JavaScript"> var yas=13; if (yas >= 18) kabul() else red() </script> </body> </html> Bu uygulamada iki fonksiyon var: kabul() ve red(). <body> bölümündeki JavaScript kodları arasında yas değişkenini ve if...else... koşul deyimini göreceksiniz. Koşul deyimi yas değişkeni 18'e eşit veya 18'den büyükse kabul() fonksiyonunu değilse red fonksiyonunu çağırıyor. Burada yas değişkenini kod içinde 13 olarak tanımladık bu durumda red() fonksiyonu çağrılır ve barın kapısından geri çevrilirsiniz. "switch" Koşul Deyimi if...else... koşul deyiminde yol ayrımı söz konusudur ve akış ikiye ayrılır. Şimdi göreceğimiz switch kodu ise akışı ikiden fazla sayıya ayırır. Yani birden fazla koşul sözkonusudur. switch koşul deyiminin genel yapısı şöyledir. switch (ifade) { case değer1: işlem1 break case değer2: işlem2 break ... case değerN: işlemN break default: işlem } birden fazla işlem söz konusuysa switch (ifade) { case değer1 : { işlemler } break case değer2 : { işlemler } break ... case değerN : { işlemler } break default: { işlemler } } Bu koşul eyleminde değişken switch(...) kısmına yazılır. Sonra değişkenin alabileceği değerler case: (durum) kodlarının yanlarına yazılarak koşul ifadesi yaratılır ve alttaki işlemler uygulanır. Eğer case: kodlarından hiçbiri değişkenin taşıdığı değeri tutmuyorsa default: kodunun altındaki işlemler uygulanır. (default kodunun yazılması zorunlu değildir; else kodunun yazılmasının zorunlu olmadığı gibi) Buradaki break (kes) komutu önemlidir. İşlemlerin altına break kodu yazmazsak bir alttaki case (durum) koşuluna ait işlemler de yapılır. break kodunu işlemlerin altına koyarsak işlemler bitince bir alttaki case koşulunun işlemlerine geçilmez ve program switch deyiminin sonundan devam eder. Buradan hareketle aynı işlemlere tabi tutulacak koşul ifadelerini alt alta yazın ve bu ifadelerden en altında olanın işlemlerine break komutunu uygulayın. Aşağıdaki uygulama konunun anlaşılmasına yardımcı olacaktır. Code: <html> <head> <title>Koşul Deyimleri</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function karne(x) { switch(x) { case 10: case 9: harf="A" break case 8: harf="B" break case 7: case 6: harf="C" break case 5: harf="D" break default: harf="E" } return harf } </script> </head> <body> <script language="JavaScript"> var isim = "Ali", puan = 8, y y = karne(puan) document.write(isim + " adlı öğrencinin aldığı not: " + y) </script> </body> </html> Volkan Derinbay'a tşkler.

23-02-2008, 18:54	#7 (permalink)
O'NEAL	Döngü Denetimi Bu sayfamızda döngü denetimini ve bu döngü oluşturan döngü deyimlerinin üzerinde duracağız. Bunlar while... do...while... ve for.... "while" Döngü Deyimi Öğreneceğimiz ilk döngü deyimi: while (Türkçesi: öyleyken). Bu deyimin yapısı şöyledir: while (koşul ifadesi) işlem birden fazla işlem söz konusuysa while (koşul ifadesi) { İŞLEMLER } Bu deyimdeki koşul ifadesi sağlandığı sürece deyimdeki işlemler sürekli; bir döngü oluşturacak şekilde kendisini tekrarlar. Bu işlemler öyle olmalıdır ki belli bir sayıda çevrimden sonra bu koşul ifadesini sağlamasın ve döngüden çıksın aksi takdirde döngü sonsuza kadar devam eder. Code: <html> <head> <title>Döngü Deyimleri</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function mesaj() { document.write("<h1>Cameron Diaz</h1>") } </script> </head> <body> <script language="JavaScript"> var a=1 while (a == 1) mesaj() </script> </body> </html> Heh he. Kötü şakaydı kabul ediyorum. Öyle birşey yapmalısınız ki sonunda döngü sona ermeli ve kendini tekrar etmeyi bırakmalı. Mesela beş defa Cameron Diaz yazalım. Code: <html> <head> <title>Döngü Deyimleri</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function mesaj() { document.write("<h1>Cameron Diaz</h1>") } </script> </head> <body> <script language="JavaScript"> var a=1 while (a < 6) { a++ mesaj() } </script> </body> </html> Bu uygulamadaki while döngüsünü yakın plana alalım. Döngünün koşul ifadesi a değişkeninin 6'dan küçük olmasıdır. Yani a değişkeninin değeri 6'dan küçük olduğu sürece süslü paran¤¤¤ içindeki işlemler birbirini tekrar edip duracak. Ama bu sonlu bir döngü bilgisayarımızı kilitleme tehlikesi yok. Çünkü işlemin içinde a'nın değeri her çevrimde 1 artıyor. Ayrıca her çevrimde bir kez "Cameron Diaz" yazılıyor. Beş çevrim sonunda a değişkeni 6 değerine ulaştığı için 6. çevrim yapılmaz ve döngü sona erer. "do... while" Döngü Deyimi do...while deyimi ile while deyimi arasında işlevsel olarak fark yok gibi görünür ancak do...while deyiminde koşul ifadesi altta bulunur; ve koşul değerlendirmesi işlemi çevrimden önce değil sonra yapılır. Deyiminin yapısı şöyledir: do İŞLEMLER while (koşul ifadesi) birden fazla işlem söz konusuysa do { İŞLEMLER } while (koşul ifadesi) Şu birden fazla işlem söz konusuysa deyimini devam ettirmenin sanırım gereği kalmadı. Zekasına sonsuz saygı duyduğum okuyucular anlamıştır ki süslü paran¤¤¤ birden fazla işlemi; tek komutla harekete geçirmek için bir araya toplamaya yarar. Code: <html> <head> <title>Döngü Deyimleri</title> <script language="JavaScript"> //Fonksiyonu hazırlıyoruz. function kare(sayi) { y = sayi * sayi return y } </script> </head> <body> <script language="JavaScript"> var a=1 do { document.write("<b>" + a + "</b> sayısının karesi = <b>" + kare(a) + "</b><br>") a++ } while (a < 101) </script> </body> </html> Yukarıdaki uygulama 1'den 100'e kadar tüm sayıların karesini buluyor. Sizler bu yazılımı hem görsel hem de işlevsel olarak geliştirebilirsiniz. "for" Döngüsü Şimdi sıra for... döngü deyimine geldi. Bu deyimin yapısı aşağıdaki gibidir: for ( başlama noktası; koşul ifadesi; adım ifadesi) { İŞLEMLER } for döngüsünü belirleyen üç ifade var: başlama noktası koşul ifadesi adım ifadesi. Başlama noktası döngünün hangi sayıdan başlayacağını belirler: i = 0 gibi. Koşul ifadesini daha önceki deyimlerden biliyoruz; koşul ifadesi aracılığıyla döngü devam eder: i <= 10 gibi. Adım ifadesi ise döngünün kaçar kaçar sayacağını belirleriz. Örneğin birer birer saymasını istiyorsak i++ değerini ikişer ikişer saymasını istiyorsak i+=2 değerini kullanırız. Bu adımlar artırma (pozitif) yönlü olmak zorunda değil azalma (negatif) yönlü de olabilir: i-- gibi. Örneğin 75'den 1000'e kadar 25'er adımlı sayan bir yazılım geliştirelim. Code: <html> <head> <title>Döngü Deyimleri</title> </head> <body> <script language="JavaScript"> var i for (i = 75; i <= 1000; i += 25) { document.write("Sayı = " + i + "<br>") } </script> </body> </html> Şimdi de 1000'den geriye doğru 10'ar 10'ar -100'e kadar sayalım. Code: <html> <head> <title>Döngü Deyimleri</title> </head> <body> <script language="JavaScript"> var i for (i = 1000; i >= -100; i -= 10) { document.write("Sayı = " + i + "<br>") } </script> </body> </html> Koşul deyimlerini kullanarak bir döngü yaratmak da mümkün. Ama bunun için etiket kullanmalıyız. Etiketler yazılım kodları içindeki çeşitli başlama noktalarıdır. Etiketin ismi ve ":" işaretinden oluşur örneğin BASLA: gibi. Yazılımın BASLA: ifadesine gitmesi ve oradan devam etmesini istiyorsak goto BASLA komut ve ifadesini kullanırız. Bir koşul deyimi ve etiketle nasıl döngü oluşturulduğunu aşağıdaki uygulamayla gösterebiliriz. <html> <head> <title>Döngü</title> </head> <body> <script language="JavaScript"> var i=75 DONGU: if (i <= 1000) { document.write("Sayı = " + i + "<br>") i += 25 goto DONGU } </script> </body> </html> Volkan Derinbay'a tşkler.

23-02-2008, 20:17	#8 (permalink)
O'NEAL	Mantıksal İşlemler Akış denetimi ve döngü denetimi derslerimizde koşul ifadelerinin kullanıldığını gördük. Koşul deyimleri bu koşul ifadesine göre eleme yapıyor döngü deyimleri bu koşul ifadesine göre çevrim oluşturuyordu. Ancak bu koşul ifadesi tek bir koşuldan oluşuyordu acaba birden fazla koşulun sorgulanması mümkün müdür? Elbette. Bunun için ilk yol deyim içinde deyim kullanmaktır. Örneğin aşağıdaki uygulamada if koşul deyimi içiçe kullanılarak sayının 25 ile 60 arasında olduğunu sorgulamaktadır: Code: <html> <head> <title>İkili Sorgulama</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function onay() { document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") } //İkinci fonksiyonu hazırlıyoruz. function red() { document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") } </script> </head> <body> <script language="JavaScript"> var x=38 if (x < 60) { if (x > 25) onay() else red() } else red() </script> </body> </html> Burada içiçe if koşul deyimi kullanılmış ve önce sayının 60'dan küçük olması sorgulanıyor. Sayının 60'dan küçük olması halinde bu sefer de sayının 25'ten büyük olması sorgulanıyor. Yani 60'tan küçük olan sayıların 25'ten büyük olması sorgulanıyor. Böylece sayının 60'dan küçük ve 25'ten büyük olması sorgulanmış oluyor. JavaScript'te "ve" Operatörü: "&&" İçiçe deyim kullanmak da güzel bir yol ama daha kısa bir yolumuz var: Mantıksal İşlemler. Sayının hem 25'ten büyük olmasını hem de 60'tan küçük olmasını istiyorsak ve anlamına gelen && mantıksal işlem işareti ile iki koşulu tek bir koşul ifadesi haline dönüştürebiliriz: Code: <html> <head> <title>Mantıksal İşlemler</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function onay() { document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") } //İkinci fonksiyonu hazırlıyoruz. function red() { document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") } </script> </head> <body> <script language="JavaScript"> var x=65 if (x < 60 && x > 25) onay() else red() </script> </body> </html> Bu sefer && (ve) işaretini kullanarak sayının 60'tan küçük olmasını ve sayının 25'ten büyük olmasını sorguladık. Buradaki ve kavramını Matematik konusunun mantık (logic) dersinden hatırlıyorsunuzdur. (Matematiği anlamakta zorlananlar programcılığa hiç başlamasınlar.) Özetle ve ifadesinin sorgulama sonuçları şöyleydi: Doğru && Doğru = Doğru Doğru && Yanlış = Yanlış Yanlış && Doğru = Yanlış Yanlış && Yanlış = Yanlış && operatörüyle yapılan sorgulamanın onaylanması için her iki koşulun da sağlanması gerekir. Aksi takdirde sorgulama onaylanmayacaktır. JavaScript'te "veya" Operatörü: "\|\|" Bir başka mantıksal işlem operatörü: \|\| (veya anlamındadır; bu işareti oluşturmak için iki defa ALTGR + "tire" tuşuna basın. "tire" tuşu backspace (geri al) tuşunun solunda bulunur. Eminim matematik bilgilerinden hiç kuşku duymadığım okuyucular bu operatörün sorgulama sistemini hemen hatırlamışlardır ama ben yine de yazayım. Doğru \|\| Doğru = Doğru Doğru \|\| Yanlış = Doğru Yanlış \|\| Doğru = Doğru Yanlış \|\| Yanlış = Yanlış \|\| (veya) operatörünün && (ve) operatöründen farkı görülüyor. Bir sorgulamada \|\| operatörü kullanılmışsa koşullardan bir tanesinin gerçekleşmesi onay için yeterlidir. Son uygulamamızda 65 sayısını && operatörü ile sorgulamıştık: (65 < 60) && (65 > 25) Bu koşulun ilk kısmı yanlış ikinci kısmı ise doğruydu. Yanlış && doğru = yanlış olduğundan sorgulama sonucu red fonksiyonuna gönderilmişti. Aynı koşul ifadelerini \|\| operatörü ile sorgulasaydık sonuç başka olacaktı: (65 < 60) \|\| (65 > 25) Buradaki işlem: Yanlış \|\| doğru = doğru işlemidir. Ve koşul ifadesi kabul görür. Bu nedenle && ile \|\| ifadelerini ne zaman kullanacağımıza dikkat etmeliyiz. Şimdi \|\| operatörü için başka bir uygulama geliştirelim: Bu uygulamamız öncekiyle aynı sonucu versin. Yanlız bunun için koşul ifadesini ve koşul işlemlerini değiştireceğim aradaki farka dikkat ediniz. Code: <html> <head> <title>Mantıksal İşlemler</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function onay() { document.write("<h1>Sayı 25 ile 60 arasındadır.</h1>") } //İkinci fonksiyonu hazırlıyoruz. function red() { document.write("<h1>Sayı 25 ile 60 arasında değildir.</h1>") } </script> </head> <body> <script language="JavaScript"> var x=65 if (x > 60 \|\| x < 25) red() else onay() </script> </body> </html> Aradaki farkı anlayanlar bu işi kapmış demektir. JavaScript'te "değil" Operatörü: "!" Bir diğer mantıksal işlem operatörü: ! (değil) operatörüdür. Bu operatör koşul ifadesinin solunda yer alır ve o ifadenin olmamasını sorgular. Uygulamayla gösterelim: Code: <html> <head> <title>Mantıksal İşlemler</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function negatif() { document.write("<h1>Negatif sayı.</h1>") } //İkinci fonksiyonu hazırlıyoruz. function pozitif() { document.write("<h1>Pozitif sayı.</h1>") } </script> </head> <body> <script language="JavaScript"> var x=12 if (!(x >= 0)) negatif() else pozitif() </script> </body> </html> Uygulamamızda 12 değeri verilen x değişkeninin 0'dan küçük olup olmadığı sorgulanmakta. Eğer sıfırdan büyük değilse negatif() aksi takdirde pozitif() fonksiyonları çağrılmaktadır. Değişkenlere Mantıksal Değer Atama Sayfamızda aynı koşul ifadelerini birçok kez sorguluyorsak veya koşul ifadesi çok uzunsa değişkenlere atamayı tercih edebiliriz. Yapı olarak değişkene normal bir değer vermekten farkı yoktur. Örneğin üstteki uygulamayı şu hale dönüştürebiliriz: Code: <html> <head> <title>Değişkenlere Mantıksal Değer Atama</title> <script language="JavaScript"> //İlk fonksiyonu hazırlıyoruz. function negatif() { document.write("<h1>Negatif sayı.</h1>") } //İkinci fonksiyonu hazırlıyoruz. function pozitif() { document.write("<h1>Pozitif sayı.</h1>") } </script> </head> <body> <script language="JavaScript"> var x=12 var y=((x > 0) \|\| (x == 0)) if (!y) negatif() else pozitif() </script> </body> </html> Bu uygulamamızda ((x > 0) \|\| (x == 0)) mantıksal değerini y değişkenine atadık. Volkan Derinbay'a tşkler. Konu O'NEAL tarafından (23-02-2008 Saat 20:29 ) de değiştirilmiştir..