01 Mart 2009, 11:16. 0 fav. e-destek.
Etiketler:
javascript nedir
Dersin sonunda yapabilecekleriniz:
-JavaScript dilinin temellerini açıklamak.
-JavaScript'in Web sayfalarında nerede kullanılacağını açıklamak.
-Temel bileşenler hakkında genel bilgiler vermek.
Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılır.
İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript, daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir. Şu anda Navigator 4.0 tarafından desteklenen JavaScript 1.2 sürümü vardır. Microsoft Internet Explorer 3.0 ile JavaScript 1.0'ı desteklemektedir.
İPUCU: HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına .js uzantılı JavaScript kodları da yazılabilir.
JavaScript, Java dilinin bir Light versiyonu değildir. JavaScript kendi başına bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır.
Tablo: Tarayıcılar ve JavaScript desteği.
Tarayıcı Versiyonu JavaScript Desteği
Netscape 2.0 1.0
Netscape 3.0 1.1
Netscape 4.0 1.2
Internet Explorer3.0 JScript 1.0 (approx. 1.0)
Internet Explorer4.0 JScript 2.0 (approx. 1.1 + full DOM)
JavaScript kullanımının iki ana alanı vardır: istemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır.
Sunucu taraflı JavaScript, aynı ASP gibi çalışmaktadır.
Sunucu Taraflı JavaScript
Sunucu taraflı JavaScript (SSJS) ise temel JavaScript'e ek olarak nesneler ve işlevler katılarak veritabanlarına erişim, e-mail gönderme ve diğer işlemlerin yapılması sağlanır. SSJS, veritabanı temelli Web uygulamalarının yaratılmasını sağlar.
Bir tarayıcının anlayacağı temel dil HTML'dir. JavaScript dilinin HTML belgesi içinde yazılabilmesi için <SCRIPT> etiketleri kullanılır.
<HTML>
<SCRIPT>
...
JavaScript kodu
....
</SCRIPT>
</HTML>
Örnek:
<HTML>
<SCRIPT>
document.write ("Merhaba");
</SCRIPT>
</HTML>
Bir Web sayfası organizasyonunda JavaScript'leri Web sayfasına eklemek için değişik yollar vardır:
. HEAD bölümünde
. BODY bölümünde
. BODY içinde URL olarak.
<HEAD> İçinde:
Bir HTML belgesinde HEAD bölümü içinde <SCRIPT> etiketi kullanarak istediğiniz JavaScrip kodunu HTML belgesine ekleyebilirsiniz. Bu kodlar HTML sayfasının BODY kısmı yüklendikten sonra kullanıma hazır hale gelir.
Örnek:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function AlertTest( )
{
alert("Dikkat!");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<BODY> İçinde
HTML belgesinin BODY kısmında JavaScript kullanmak için iki yol vardır:
Doğrudan çalışacak kodlar ve kullanıcı tarafından çalışacak kodlar:
Doğrudan çalışacak JavaScript kodları <SCRIPT> etiketi kullanılarak HTML belgesinin istenilen yerine yazılır. Bu cümleler tarayıcı tarafından okunduğu anda yerine getirilir:
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Son okunma tarihi" + document.lastModified)
//-->
</SCRIPT>
Daha çok kullanılan diğer bir yöntem ise kullanıcı tarafından bir olayın başlatılmasıyla bir JavaScript kodunun çalıştırılmasıdır. Örneğin bir düğmeye tıklamak gibi:
<FORM>
<INPUT TYPE="BUTTON" NAME="TestButton"
VALUE="Tıkla" onClick="AlertTest()">
</FORM>
Örnek:
<SCRIPT Language="JavaScript">
function Onceki() {
if (xmldso.recordset.bof){
alert("Dosya başındasınız.");
}else{
xmldso.recordset.movePrevious()
if (xmldso.recordset.bof){
xmldso.recordset.moveFirst();
alert("Bu ilk kayıt.");
}
}
}
function Sonraki() {
if (xmldso.recordset.eof){
alert("Dosya sonundasınız.")
}else{
xmldso.recordset.moveNext()
if (xmldso.recordset.eof){
xmldso.recordset.moveLast();
alert("Bu son kayıt.");
}
}
}
</SCRIPT>
<BODY> İçinde URL Olarak
JavaScript kodu URL olarak da kullanmak mümkündür:
<A HREF="javascript: alert('Son!')">Siteden Çık</A>
UYGULAMA: Belgenin arka rengini değiştirmek:
JavaScript dilinin temel gramer yapısına bir bakalım:
İşletme Sırası:
HTML belgesinde JavaScript eklendiğinde, kodun işletimi sırasıyla yapılır. Ancak fonksiyon ve belli bir olaya (ONCLICK gibi) bağlı olan JavaScript kodlarının işletimi o anda yapılır.
Değişkenler:
Bir değeri içeren bellek adlarını ifade ederler.
İşleçler (Operators):
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 (Expression):
Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade derin. Örneğin: "Ucret = Gün * Yevmiye" formülü bir ifadedir.
Deyimler (Statements):
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:
if (toplam>20) {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
}
Case Sensitivity
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çıklamalar
Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScript'te bu <!- ve //-->. işaretlerinin arasıdır.
<!-bu bir açıklamadır //-->.
JavaScript kodu diğer programlama dillerinde olduğu gibi deyimlerden (statements) oluşur. Bu deyimler atama, değerleri karşılaştırma ve işlemlerin yapılması için komutlar anlamına gelmektedir.
Değişkenler verileri saklarlar ve onlara erişimi sağlarlar. Bir değişken bir değeri işaret eder. Örneğin Ucret adlı değişkene bir kişinin ücret bilgisi konur. Değişkenler adlarıyla işaret edilirler. Bir JavaScript değişkeni belli kurallara uymak zorundadır:
Kapsam
Bir değişkene bir değer verildiğinde bu değer ne kadar zaman geçerli olacak? Bu sorunun yanıtı kapsam (scope) kavramını ortaya çıkarır. Bir değişkenin kapsamı global ya da lokal olabilir. Bir global değişkene sayfa üzerinde herhangi bir JavaScript'ten erişilebilir. Lokal değişken ise değerin atandığı yordam içinde geçerlidir.
Bir değişkene kendisine atama yaparak değer verilir:
Ucret= 1000000;
Bir fonksiyon yazıyorsanız, yerel bir değişken yaratmak istersiniz. Bu yerel değişkenler var sözcüğüyle tanımlanır:
function YeniFonksiyon()
{ var dongu=1;
toplam=0;
...deyimler...
}
Yukarıdaki örnekte döngü adlı değişken YeniFonksiyon için yerel, toplam değişkeni ise tüm sayfa için genel (global) olacaktır.
Değişkene bir değer atanır. Bu herhangi bir tür veri olabilir. Bununla birlikte JavaScript, verinin değişik türlerde olmasını bekler. Verinin türüne bağlı olarak değer üzerinde belli işlemler yapılabilir ya da yapılamaz. Örneğin iki string değer üzerinde aritmetik işlem yapılamaz.
Tablo: Değişken Türleri
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ın değer.
İşleçler (Operators)
İşleçler, iki ya da daha fazla değer üzerinde işlem yapılmasını sağlar. JavaScript içinde aritmetik ve hesaplama işleçleri olmak üzere iki tür işleç kullanılır:
Tablo: İşleçler
+ Toplama
- Çıkarma
* Çarpma
/ Bölme
% Bölmede kalanı verir.
Örneğin: 10 % 3 işlemi 1 değerini verir.
++ Tek artırım. Değer 1 artırılır.
-- Tekli azaltma.
- Negatifleştirme: İşlenenin negatif değerini döndürür.
Karşılaştırma
Karşılaştırma işleci, iki ya da daha çok değeri birbiriyle karşılaştırarak True ya da False olarak mantıksal bir değer döndürür. İşlenenler sayısal ya da karakter değer olabilir.