Makale Özeti

Asp.Net te veya herhangi bir şekilde Web Programcılığı yapıyorsanız bilmeniz gereken JavaScript i hızlı öğrenmeniz için bir döküman

Makale

Merhabalar,

Gerek Asp.Net olsun gerek Asp, PHP, JSP hiç farketmez herhangi bir şekilde Web Uygulamaları geliştiriyorsanız bir şekilde JavaScript e işiniz düşecektir,  her ne kadar Microsoft Asp.Net ile JavaScript bilme gerekliliğini azatsada iyi bir Web programcısının mutlaka JavaScript bilmesi gerekmektedir, aşağıdaki daha önceden, öğrencilerime vermek amacıyla yazdığım bir JavaScript dökümanıdır, içinde JavaScipt ile alakalı bir çok konu bulunmaktadır, son bölümler özellikle örneklere ayrılmıştır, ancak bu döküman temel olarak JavaScipt i anlatmaktadır. Bundan dolayı bu döküman sadece JavaScipt e başlayacak arkadaşlara bir klavuz niteliğindedir.

 JavaScript Nedir?

 JavaScript genel olarak istemci taraflı (Client-Side) sayfalarda çalışmak üzere geliştirilmiş, belli yetenekleri(String işleme, Matematiksel işlemler) ve sınırları olan (Çalıştığı Tarayıcı) Java dilinin yazım kurallarına benzediği için JavaScript denilen bir dildir.  JavaScript in en çok kullanıldığı alan istemci taraflı sistemlerdir. Ama JavaScript Sunucu Taraflı (Server-Side) Sistemlerdede kullanılabilir(ASP gibi.). Fakat JS nin Sunucu sistemlerinde kullanılmasının bazı zorlukları ve dezavantajları vardır. (Örneğin : JS Uyumlu web sunucusu ) JS olarak  OOP (Object Oriented Programing) i destekler.

 Ne Değildir?

 JavaScript kesinlikle Java değildir. Java ile gerçek programlar yazarsınız. Ancak program yazmakla uğraşmadan güzel şeyler yaratmak istenildiğinden ve ağır çalıştığından dolayı Java çok yaygınlaşmamıştır. JavaScript, ayrı bir programlama dilinden çok HTMLnin bir uzantısıdır denebilir.

 Nasıl Doğdu?

 Netscape HTML dilinin yetersizliğini gördüğünde browserinin ikinci sürümünü piyasaya sürmek üzreydi. HTML ile bir web sayfasına iş yaptırmak mümkün değildi... Örneğin bir kullanıcıya saati göstermek için CGI (Common Gateway Interface) denilen sunucu taraflı ve karışık kodlar yazmak gerekiyordu. Bunu gören Netscape 2 sürümü ile JS istemci taraflı programlama dilini yarattı. İlk zamanlar sadece Netscape nin destek verdiği JS daha sonraları hemen hemen bütün tarayıcılarda standart haline gelmeye başladı.  JScript ise Microsoftun JavaScript uyaralamasıdır.  JavaScript’in özelliklerinin yanında Internet Explorer’ın bazı kaynaklarından da yararlanır.

 JS nin Amacı Nedir?

 JS, HTML in yapamadığı dinamik sayfaları yaratmaya yardımcı olur. Ayrıca JS istemci tabanlı bir dil olduğundan CGI ve / veya diğer Web programları gibi web sunucusunun kaynaklarını kullanmayarak sunucunun yükünü azaltır. Diğer bir artısıda Web sayfalarındaki formları sunucuya gitmeden önce kontrol ederek kaynaklardan ve zamandan kazandırmasıdır.

 JS nin Kötü Yanları Nelerdir?

 Her dilin eksileri olabileceği gibi JS ninde eksi ve kötü yanları vardır... Örneğin JS tamamen istemcinin bilgisayarındaki tarayıcıya bağlı çalışmaktadır... Eski versiyon tarayıcılar ve ya Internet Explorer ve Netscape dışındaki tarayıcıların hatalı çalıştırmaları olasığdır.

 Bunun yanında demin de belirttiğimiz gibi JS kullanıcının bilgisayarının kaynaklarını kullanır...Eğer kullanıcının bilgisayarı güçsüz veya kaynakları az ise JS nin çalışmasında problemler olabilir...

Birde JS bir olayın oluşması durumunda çalışmaya başlar. (Örneğin Fare ile tıklanması, Sayfanın yüklenmesi gibi.)

 Netscape JavaScript in kodunu bir yıla yakın Microsoft un İE ı ile paylaşmaya yanaşmayınca Microsoft, Netscape in Javascript yorumlama kodunu almadan, IE’i Javascript’i anlar hale getirdi; fakat ortaya çıkan dile JScript adını verdi. Jscript 1.0 ile Javascript 1.0 tümüyle aynı idi ve her iki program da hem Javascript, hem de JScript anlayabiliyordu. Fakat bu durum çok uzun sürmedi; her iki firma da kendi Script diline diğer programın tanımadığı özellikler kazandırdılar. Bu arada Microsoft, IE’ye, JScript’te de, Javascript’te de olmayan becerilerle donattığı VBScript’i tanıma özelliği kazandırdı.

Avrupa Birliği standartlaştırma grubu bu iki hemen hemen aynı dili standartlaştırmak istediğinde Microsoft ve Netscape ile anlaşarak ikisinide temel alan ve tarayıcı farklılığını ortadan kaldırıcak olan ECMAScript i sundu.

Şu Anda Microsoft JScript in 5.6 versiyonunu kullanıyor.

Ayrıntılı Bilgi : http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jsoriJScript.asp

JavaScript in ise şu anda Netscape (Mozilla) tarafından 1.5 Beta (ECMA-262, revision 3) sürümü çıkmıştır.

Ayrıntılı bilgi : http://www.mozilla.org/js/

JS nin Çalıştığı bilinen browserler ve çalıştırma versiyonları aşşağıda verilmiştir

Tarayıcı Versiyonu

JavaScript Desteği

Netscape 2.0

1.0

Netscape 3.0

1.1

Netscape 4.0

1.2

Netscape 7.0 (Beta)

1.4

Internet Explorer 3.0

JScript 1.0 (approx. 1.0)

Internet Explorer 4.0

JScript 2.0 (approx. 1.1 + full DOM)

Internet Explorer 5.0

JScript 5.0

Internet Explorer 6.0

JScript 5.6

Opera 7.0

JavaScript 1.3

 JavaScript’ in kullanılması

 Bir tarayıcının temel olarak sadece HTML dilinden anladığı için JS nin HTML kodunun içinde yazılması gerekir...HTML kodlarında JS <script> ve </script> içine yazılır.

 <html>

<script>

...

JS kodları

...

</script>

</html>

 

Örnek :

<html>

<body>

<script>

document.write("Merhaba Dünya");

</script>

</body>

</html>

 JS yi HTML belgesinde nasıl kullanacağız ?

 JS HTML belgesine 2 yöntem ile eklenir.

 1. HMTL kodunun içine yazılarak.

JS nin HTML kodunun içinde yazılması iki yöntem ile incelenebilir. İlki yöntem “<script>” taglarını kullanarak aralarına yazılması diğer yöntem ise bir tagin içine yazılması (mesela <a href=”#” onClick=”alert(‘dikkat’);”>)

Örnek :

 <html>

<head>

<title>JS Denemesi</title>

<script language="JavaScript1.2">

<!-- Eski sürüm Tarayıcılardan Kodu Gizleyelim

function uyari(){

alert(JavaScript);

}

//yazdığımız Js nin bitimi-->

</script>

</head>

<body>

<a href="#" onClick="JavaScript:uyari();">Buraya Basın</a>

</body>

</html>

 2. Ayrı bir dosyada yazılıp HTMl dosyasına dahil etmek.

Bu yöntemde ise JS kodları başka bir text dosyasına yazılır ve dokuman içinde “<head>” etiketleri arasında dosyaya dahil edilir. (örneğin <script src="dosya.js" language="JavaScript">)

Örnek :

function yonlendir(){

window.location = "http://www.bilgeadam.com";

}

 index.html :

<html>

<head>

<title>JS Denemesi</title>

<script src="dosya.js" language="javascript"></script>

</head>

<body>

<a href="JavaScript:yonlendir();" >Bilge Adamın Sitesine Gitmek İçin</a>

</body>

</html>

 Bu iki yöntem birliktede kullanılabilir.

Örnek :

dosya.js aynı

index.html

<html>

<head>

<title>JS Denemesi</title>

<script src="dosya.js" language="javascript"></script>

<script>

<!--

function asagiBak(yazi){

window.status = yazi;

}

//-->

</script>

</head>

<body>

<p onClick="JavaScript:yonlendir();" onMouseOver="JavaScript:asagiBak(Bilge Adamın Web Sitesi);">Bilge Adamın Sitesine Gitmek İçin</p>

</body>

</html>

 Java Script Dilinin Temel Özellikleri ?

 İşlem Sırası :

JS kodu yukarıdan aşşağıya doğru işler fakat genelde bir olayın oluşması durumunda çalışırlar (örneğin : onClick olayının oluşması durumu gibi.)

Değişkenler :

Bütün dillerde olduğu gibi JS dede değişkenler çok önemlidir

Değişkenler kendilerine tanımlanan değerleri tutarlar.

Örnek :

 var sayi = 5;

 Değişkenlerin seçilmesinde dikkat edilecek hususlar

* Boşluk içermek.

* 255 karakteri geçemez.

* Kapsama alanında tek olmalıdır.

* "-" işareti kullanılabilir.

* Türkçe karakterler kullanılmaz.

Değişken türleri ise

Numbers 

Integer ve kayan noktalı sayılar içerir. Positif, 0 ya da negatif olabilir. 

Booleans 

True ya da False.

Strings 

Karakter bilgi içeren bir değişkendir. 

Objects 

nesne= new Object();

Null 

Değersiz. 

Undefined 

Bir değişken yaratıldıktan sonra içerdiği tanımsız değer.

Dizi Değişkenleri?

Bir yada Bir kaç değişkeni bir değişken adı altında toplamaya yarar. JS de dizi değişkenleri nesne olarak ele alınır ve dizilerin bazı özellikleri vardır.

Örnek :

var bilisayarDonanimi = new Array(‘Monitör’,’Kasa’,’Fare’,’Klavye’);

bilgisayarDonanimi.lenght; //dizinin uzunluğunu verir.

İşlemler

Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin yapılmasını sağlarlar. İşleçler +, *, /, - gibi işaretlerle kullanılır.

İfadeler

Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade derin.

Örnek: "bolum = bolunen / bolen" formülü bir ifadedir.

Deyimler

Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubuna verilen addır. Örneğin bir komut ya da bir “if” yapısı deyimi oluşturur:

Örnek :

if (sayi>50) {deyimler;} else {deyimler;}

Nesneler (Objects)

Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne (object) denir. JavaScript dilinde çok sayıda yerleşik nesne vardır.

Fonksiyonlar (Functions)

Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordam ya da bir alt yordam anlamına gelir. Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür. Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler.

function adi( ) {
deyim 1
deyim 2
...
deyim N
}

Büyük Küçük Harf Duyarlılığı :

JavaScript case sensitive (büyük küçük harf duyarlı) bir dildir. Değişkenler ve diğer öğeler küçük ya da büyük yazılabilirler. Ancak A değişkeni ile a değişkeni birbirinden farklıdır.

<SCRIPT LANGUAGE="JavaScript">
<!--
test= "küçük harf";
TEST= "BÜYÜK HARF";
document.writeln("test = "+test+"<BR>");
document.writeln("TEST = "+TEST+"<BR>");
//-->
</SCRIPT>

Açıklama Yapmak :

Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScriptte bu <!- ve //-->. işaretlerinin arasıdır.

Örnek :

<!-bu bir açıklamadır //-->.

Bunun yanında bir function un içinde yada ayrı bir dosyada tutuyorsak JS kodumuzu bunların arasında “//” ile satir açıklaması

Örnek :

function foksiyon(){

// açıklama satırı

...

}

çok satırlı açıklama yapmak için ise “/*” açıklama yapılıcak yerin başına konur. Sonuna ise “*/” konarak açıklama alanı bitirilir.

Örnek :

function fonksiyon(){

/*açıklamanın birinci satırı

açıklamanın ikinci satırı*/

...

}

Makale ile ilgili her türlü sorularınız için aşağıdaki mailimi kullanabilirsiniz.

Levent Cenk Çağlar

cenkc@yazgelistir.com