Java Script Öğreniyorum Ders 1

ryden · 13-03-06, 13:05

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 Nelerdir?

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.

Hem Java, hem de JavaScript hakkındaki daha ayrıntılı açıklamayı http://www.gamelan.com adresinden alabilirsiniz.

--------------------------------------------------------------------------------

JavaScript'leri Ç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.)

--------------------------------------------------------------------------------

JavaScript'lerin 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.

--------------------------------------------------------------------------------

İlk Fonksiyon

Sizi gereksiz scriptlerle sıkmak istediğimden doğrudan fonksiyonlara geçmek istiyorum. Fonksiyonlar da anlaşılması zor bir şey değildir fakat inanın bana, çok daha faydalıdır. Fonksiyonlar kullanıcının yaptığı hareketlerle işlev kazanır ve <HEAD> komutları arasına yazılırsa daha iyi olur. Bu komut sayfada okunan ilk yer olduğundan fonksiyonları buraya yerleştirmek gayet mantıklıdır. Böylece kullanıcı fonksiyon çağıracak bir harekette bulunamadan önce fonksiyonlar tanımlanmış olur. Scriptler ise HTML dilinde sayfada görünmeyen, sadece sayfanın kayanağında(Document Source)görülen 'yorum' satırlarının içine yazılır. Böylece JavaScript'i desteklemeyen alıcılar scriptle ilgili kısımları yorum olarak düşünür ve hata mesajı ya da garip şekiller yaratmazlar.

<html> <head> <script language="JavaScript">
 </script>
</head> <body> <form>
<input type="button" name="Button1"
value="Buraya Tıklayın" onclick="dugmebas()">
</form> </body> </html>
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">
 </script> </head> <body> Adınız: <form>
<input type="text"
name="name" onBlur="adoku(this.value)" value="">
</form> </body> </html>

Şimdi bu scripti test edebilirsiniz:

Adınız:

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 Yenilenme 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">

</script> </body> </html>

algoritma · 13-03-06, 18:30

calısmalarının devamı dilegiyle

glzr_89 · 10-07-08, 13:50

çok güzel anlatım eline sağlık bir rep nasıl veriliyor?

~~cyberia2youı~~ · 13-07-08, 08:46

Güzel Anlatım!

cryz4dvl4 · 14-07-08, 23:48

Anlatım güzelde bide alıntı yazsa daha güzel olurdu. Ayrıca bu kim bilir kaç sene önceki bilgi. Microsoft Internet Explorer 3.0

. Şimdi herkes 7. filan kullanıyo

.

13-03-06, 13:05	#1
ryden Meraklı Giriş Tarihi: 17-11-2004 Mesajlar: 324	Java Script Öğreniyorum Ders 1 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 Nelerdir? 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. Hem Java, hem de JavaScript hakkındaki daha ayrıntılı açıklamayı http://www.gamelan.com adresinden alabilirsiniz. -------------------------------------------------------------------------------- JavaScript'leri Ç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.) -------------------------------------------------------------------------------- JavaScript'lerin 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. -------------------------------------------------------------------------------- İlk Fonksiyon Sizi gereksiz scriptlerle sıkmak istediğimden doğrudan fonksiyonlara geçmek istiyorum. Fonksiyonlar da anlaşılması zor bir şey değildir fakat inanın bana, çok daha faydalıdır. Fonksiyonlar kullanıcının yaptığı hareketlerle işlev kazanır ve <HEAD> komutları arasına yazılırsa daha iyi olur. Bu komut sayfada okunan ilk yer olduğundan fonksiyonları buraya yerleştirmek gayet mantıklıdır. Böylece kullanıcı fonksiyon çağıracak bir harekette bulunamadan önce fonksiyonlar tanımlanmış olur. Scriptler ise HTML dilinde sayfada görünmeyen, sadece sayfanın kayanağında(Document Source)görülen 'yorum' satırlarının içine yazılır. Böylece JavaScript'i desteklemeyen alıcılar scriptle ilgili kısımları yorum olarak düşünür ve hata mesajı ya da garip şekiller yaratmazlar. <html> <head> <script language="JavaScript"> <!-- Eski alıcılardan scripti saklamak için function dugmebas() { alert("Selam!"); } // Yorum komutunun kapanması --> </script> </head> <body> <form> <input type="button" name="Button1" value="Buraya Tıklayın" onclick="dugmebas()"> </form> </body> </html> 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> Şimdi bu scripti test edebilirsiniz: Adınız: 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 Yenilenme 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>

13-03-06, 18:30	#2
algoritma Sadık Üye Giriş Tarihi: 16-03-2005 Yer: ucsuz bucaksız Yaş: 26 Mesajlar: 2,875	Cvp: Java Script Öğreniyorum Ders 1 <a rel="nofollow" href="http://adtigertr.adspirit.net/adnoclick.php?pid=935&ord=[timestamp]" target="_top"> <img src="http://adtigertr.adspirit.net/adnoframe.php?pid=935&ord=[timestamp]" alt="Hier klicken!" border="0" width="300" height="250" /> </a> calısmalarının devamı dilegiyle

10-07-08, 13:50	#3
glzr_89 Meraklı Giriş Tarihi: 02-07-2008 Yaş: 22 Mesajlar: 216	C: Java Script Öğreniyorum Ders 1 <a rel="nofollow" href="http://adtigertr.adspirit.net/adnoclick.php?pid=969&ord=[timestamp]" target="_top"> <img src="http://adtigertr.adspirit.net/adnoframe.php?pid=969&ord=[timestamp]" alt="Hier klicken!" border="0" width="300" height="250" /> </a> çok güzel anlatım eline sağlık bir rep nasıl veriliyor?

13-07-08, 08:46	#4
~~cyberia2youı~~ Banlandı Giriş Tarihi: 12-06-2007 Yer: ankara Yaş: 22 Mesajlar: 295	C: Java Script Öğreniyorum Ders 1 <a rel="nofollow" href="http://adtigertr.adspirit.net/adnoclick.php?pid=971&ord=[timestamp]" target="_top"> <img src="http://adtigertr.adspirit.net/adnoframe.php?pid=971&ord=[timestamp]" alt="Hier klicken!" border="0" width="468" height="60" /> </a> Güzel Anlatım!

14-07-08, 23:48	#5
cryz4dvl4 To Be Continued! Giriş Tarihi: 05-03-2008 Yer: %SystemRoot% --- var,function şehirleri ve daha çok delphi ülkesi (Ama en iyisi {Web Hack Bölümü}) Yaş: 17 Mesajlar: 680	C: Java Script Öğreniyorum Ders 1 Anlatım güzelde bide alıntı yazsa daha güzel olurdu. Ayrıca bu kim bilir kaç sene önceki bilgi. Microsoft Internet Explorer 3.0 . Şimdi herkes 7. filan kullanıyo .

Konu Araçları
Çıktı Görüntüsünü Göster Sayfayı E-posta İle Yolla