 |
Javascript'e giriþJavascript nedir? ButonlarPop up mesaj butonu Arkaplan(background) efektleriHavai fiþek efekti Javascript saatBasit saat Javascript kaynaklarýTürkçeÝngilizce |
Javascript nedir?
JavaScript Web sayfalarý için yeni bir scripttir ve özelliði HTML sayfanýzýn içine yerleþtirilebilmesidir. JavaScript ile ilginç elemanlar kullanarak HTML sayfanýzý geliþtirecek birçok olanaða sahip olacaksýnýz. Örneðin kullanýcýnýn sayfanýzý incelerken yaptýðý hareketlere anýnda karþýlýk verebilirsiniz. Ayrýca bir zamanlar sadece CGI ile mümkün olan bazý olaylar JavaScript ile de yapýlabilir. Yani JavaScript'in yardýmýyla gerçekten de kaliteli Web sayfalarý yaratabilirsiniz. Þu anda Internet üzerinde JavaScript ile ilgili birçok örnek bululunmaktadýr. Gamelan'da (JavaScript kýsmýnda) birçok adres mevcut. Netscape'de ise JavaScript ile ilgili en son ve en ayrýntýlý dökümanlarý bulabilirsiniz ancak bu dökümanlarýn dili biraz aðýrdýr.
Java ve Javascript arasýndaki farklar
Her ne kadar adlarý birbirinin nerdeyse aynýsý olsa da Java ile JavaScript ayný þeyler deðildir. Java bir programlama dilidir, JavaScript ise bir scripttir(Adýndan anlaþýldýðý gibi). Farklarý ise; 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 HTML'nin bir uzantýsýdýr denebilir. Tabii ki bu 'resmi' bir tanýmlama deðil, ama Java ve JavaScript arasýndaki farký anlatmak için iyi bir tanýmlamadýr.
Javascriptleri çalýþtýrmak
JavaScript'i destekleyen ilk tarayıcı Netscape Navigator 2.0 idi. Tabii ki daha yeni versiyonlar da bu dili destekliyor. Her ne kadar değişik versiyonlarda bazı problemler olsa da JavaScript'i tüm Netscape ailesi destekleyecektir. Bununla beraber yakın gelecekte tüm tarayıcılar JavaScript'i destekleyeceklerdir. Örneğin yakında çıkacak olan Microsoft Internet Explorer 3.0 JavaScript desteğiyle piyasaya sürülecektir. Yani JavaScript gelecekte çok yaygın olacağından bu tekniği şimdiden öğrenmek faydalı olacaktır. Gördükçe anlayacaksınız ki JavaScript yazmak gerçekten de çok kolay. Size gereken sadece birkaç ana teknik ve çevrenizde aynı konuyla uğraşan, bilgi alışverişi yapabileceğiniz kişiler bulmaktan ibaret olacaktır.
Tabii ki JavaScript öğrenebilmeniz için öncelikle HTML hakkında bilgi sahibi olmanız gerekli. HTML hakkında Internet'te birçok kaynak mevcuttur. Yahoo'da 'html' konu başlığını ararsanız pek çok kaynak bulabilirsiniz.(Bu kaynaklar piyasadaki kitaplardan çok daha faydalıdır çünkü sürekli güncellenmektedirler. Internet'in büyüme hızına başka türlü yetişmeniz biraz zor.)Javascriptlerin sayfaya yerleştirilmesi
Þimdi size bazý ufak scriptler göstermek istiyorum. Böylelikle bu yeni script dilinin HTML dökümanlarýnda nasýl kullanýldýðýný ve bu dille neler yapabileceðinizi görebilirsiniz. Ben, HTML dökümanýna sadece normal bir yazý yazan çok küçük bir scriptle baþlamak istiyorum.
<html>
<head>
Ýlk yazdýðým JavaScript!
</head>
<body>
<br>
Bu normal bir HTML yazısıdır.
<br>
<script language="JavaScript">
document.write("İşte JavaScript!")
</script>
<br>
HTML'ye dönüþ.
</body>
</html>
Eðer JavaScript'i destekleyen bir alýcý kullanýyorsanýz bu scripti çalýþýrken görebilirsiniz. Eðer alýcýnýz JavaScript'i desteklemiyorsa bu çýktý biraz acaip görünebilir.Bu normal bir HTML dökümanýdýr.
Ýþte JavaScript!
HTML'ye dönüþ.Bu script'in pek de yararlý olduðunu söyleyemeyeceðim. Ayný þeyi HTML komutlarý ile çok daha hýzlý ve kýsa yazabilirsiniz. Bu örnekle size asýl göstermek istediðim <script> komutu idi. Bu komutu dökümanýnýzýn herhangi bir yerinde kullanabilirsiniz.
Eðer bu örneði hemen þimdi test etmek istiyorsanýz ve JavaScript'i destekleyen bir alýcýnýz varsa lütfen aþaðýdaki düðmeye basýn.
Bu script bir düðme yaratacaktýr ve bu düðmeye bastýðýnýzda bir 'Selam!' yazan bir pencere oluþacaktýr. Ne muhteþem deðil mi? Peki bu scriptte neler oluyor? Öncelikle fonksiyon alýcý tarafýndan okunur ve bilgisayarýn hafýzasýnda tutulur. Daha sonra normal 'HTML' dilindeki <FORM> komutuyla düðme yaratýlýr. Ancak bu düðmede yeni birþey görmektesiniz: 'onClick' . Bu yazý alýcýnýza tuþa basýldýðýnda hangi fonksiyonu çaðýracaðýný söyler(Tabii eðer alýcýnýz JavaScript'i destekliyorsa). 'dugmebas()' fonsiyonu <HEAD> komutlarý arasýnda tanýmlanmýþtý. Böylece düðmeye basýnca fonksiyon gerçekleþtirildi. Bu script'te yeni birþey daha var: 'alert'(Uyarý). Bu metod JavaScript'te zaten mevcut olduðundan size sadece onu çaðýrmak kalmýþtýr. Bunun gibi birçok metod Netscape'in sitesinde bulunmaktadýr. Ben burada sadece birkaçýný göstereceðim.
Form elemanlarý
Biraz ilerleme kaydettik sayılır. Aslında şu anda sadece scriptlerimize fonksiyon ekleyerek yapabileceğimiz birçok işe yarar şey var. Şimdi size kullanıcının forma yazdığı şeyleri nasıl okuyacağınızı göstereceğim.
<html>
<head>
<script language="JavaScript">
<!-- Eski alıcılardan scripti saklayalım
function adoku(str) {
alert("Merhaba "+ str+"!");
}
// saklama iþlemini sona erdirelim -->
</script>
</head>
<body>
Adýnýz:
<form>
<input type="text" name="name" onBlur="adoku(this.value)" value="">
</form>
</body>
</html>Bu script'te de yeni bazý elemanlar kullandýk. Ýlk baþta bir yorum yerleþtirdik ki eski alýcýlar script'i okumaya çalýþmasýn. Bu satýrlardaki boþluklar ve yazýlarýn yerleþtirildiði yerler önemlidir. Yanlýþ yazarsanýz bu script'iniz JavaScript destekli alýcýlarda hata mesajý yaratýr. <input> komutlarý arasýndaki 'onBlur' komutu bilgisayara forma bilgi girildiðinde hangi fonksiyonu çaðýracaðýný söyler. Formu doldurup 'enter' tuþuna bastýðýnýzda ya da fareyi dýþarýda biryere týkladýðýnýzda 'adoku(str)' fonksiyonu çaðrýlýr. Fonksiyon da 'adoku(this.value)' komutu ile forma girdiðiniz bilgiyi alýr. 'this.value'(bu.deðer) bu forma girdiðiniz deðer anlamýna gelir.
Son yenileme tarihi
Sanýrým þimdi vereceðim özellik ilginizi çekecektir. Script'imize tarih fonksiyonu yerleþtireceðiz. Böylece yarattýðýnýz HTML sayfasýnýn en son deðiþtirildiði tarihi otomatik olarak yazdýrabilir ve herseferinde sayfanýza tarih atmak zorunda kalmazsýnýz. Basit bir script yazarsýnýz ve gelecekte sayfada deðiþiklik yaptýðýnýzda tarih otomatik olarak deðiþecektir.
<html>
<body>
Basit Bir HTML - Sayfası.
<br>
Son Deðiþiklikler:
<script language="JavaScript">
<!-- Eski alıcılardan script'i saklayalım
document.write(document.lastModified)
// Yorum komutunun kapatılması -->
</script>
</body>
</html>© 1996 Stefan Koch - Her Hakki Saklidir. Çeviri:
M.Ozan HAZER.