Eğlencenin,Paylaşımın Zirveye Vurdugu adres Forumca ... |
|
| JavaScript Nedir? | |
| | Yazar | Mesaj |
---|
zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: JavaScript Nedir? 10/2/2008, 1:00 pm | |
| 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.) | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:00 pm | |
| 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. | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:01 pm | |
| 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> onMouseover Özelliği JavaScript dilinde bir sonraki özelliği farenizi bu link'in üzerine getirerek görebilirsiniz. Link'in üzerine geldikten sonra alıcınızın en altındaki 'statusbar'a bir bakın. Bu özelliği fonksiyonlarla birleştirerek daha ilgi çekici şeyler yaratabilirsiniz. Şimdi, bu link'in üzerine farenizi getirdiğinizde yeni bir pencere oluştuğunu göreceksiniz. Bu iki olayın kaynaklarına bir göz atalım:
<a href="asdf.html" onMouseOver="window.status='Herhangi bir link...'; return true"> <a> komutuna onMouseover özelliğini eklediğinizde sayfayı gören kişi link'in üzerine geldiğinde ne tepki verileceğini kontrol edersiniz. 'window.status' komutu da alıcınızın statusbar'ına yazı yazabilmenizi sağlar. Ayrıca dikkatinizi çektiyse tırnak işaretlerini de değişik kullandık. Hep çift tırnak (") kullanamazsınız. Çünkü JavaScript'ten dolayı mı yoksa HTML komutundan dolayı mı tırnak kullanıldığını alıcınız algılayamaz. Ayrıca çift tınak işaretini kapamadan önce ;return true yazmanız da gereklidir. İkinci örnek JavaScript'i 'alert' fonksiyonunu kullanır. İkincinin kaynağı ise şöyledir:
<html> <head> <script language="JavaScript"> <!-- Hiding function selam() { alert("Selam!"); } // --> </script> </head> <body> <a href="" onMouseOver="selam()">link</a> </body> </html> Bu örnekte de onMouseover metodu kullanılmıştır. Ancak bu sefer selam() fonksiyonu çağırılmıştır. "selam()" fonksiyonu da az önce karşınıza çıkan uyarı penceresini oluşturur. | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:01 pm | |
| Daha Fazla Tarih Fonksiyonu Şimdi size tarih ve zaman ile ilgili başka bir örnek vermek istiyorum. İlk bölümde lastModified özelliğini görmüştünüz. Bu özellik sayesinde sayfanızın en son ne zaman değiştirildiğini belirtebiliyordunuz. Şimdi sayfamıza yerel saati koyacağız. Bu metod sayfaya bağlanan makinanın saatini kullanır, bu yüzden eğer makinanın saati yanlışsa bu saat de doğal olarak yanlış saati gösterecektir. İşte kaynak:
<script language="JavaScript"> <!-- Sakla bugun = new Date() document.write("Saat şu anda: ", bugun.getHours(), ":", bugun.getMinutes(), "<BR>"); document.write("Tarih ise: ", bugun.getDate(),"/", bugun.getMonth()+1,"/",bugun.getYear()); // --> </script> İlk başta bir tarih değişkeni yaratıyoruz. Bu; bugun = new Date() (Bugün = yeni tarih) ile gerçekleştiriliyor. Böylece alıcınız "bugun" değişkeninin tarihle ilgili olduğunu anlamış oluyor. Eğer özel bir zaman ve tarih tanımlamazsak alıcınız bugun değişkenine o anki zamanı otomatik olarak verir. Yukarıdaki örnekle fazla uğraşmadığımızdan bazı eksiklikleri yok değil. Mesela eğer saat 13:05 ise yukarıdaki script 13:5 olarak yazacaktır. Bunu önlemek için birkaç "if" satırı eklememiz gerekir.
Yerel zaman ve tarihi tutan bir değişken (bugun) yarattık. Şimdi bu değişkenin içerdiklerini rahatça ayırabiliriz. Bunun için get... şeklinde metodlarımız var (getMonth, getMinutes gibi). Her get.... metodundan önce bugun yazmanız bir zorunluluktur. Aksi takdirde alıcınız hangi değişkenin içeriğini ayıracağını bilemez.
getMonth() metodu 0 - 11 arasında sayılar oluşturur. "0" ocak ayını, "11" aralık ayını temsil eder. Bu yüzden doğru ayı bulabilmek için getMonth()'a "1" ekliyoruz. Diğer metodlar doğrudan istediğimiz sayıyı verir.
Yukarıdaki örneğin görüntüsü şu şekilde olacaktır:
Saat şu anda: 13:51 Tarih ise: 7/9/2007
Tarih yaratarak yapabileceğiniz daha da ilginç şeyler var tabii ki. Örneğin bir tarih tanımlayabilirsiniz. 2000'e girmeden önce birçok webmaster'ın yaptığı gibi 2000'e kalan gün sayısını hesaplayabilirsiniz. Bunun için yukarıda "bugun" değişkenini tanımladığınız gibi ek olarak 2000 yılını da tanımlamalısınız: ikibin = new Date(99,11,31) Önce yıl, sonra ay(Ayın '0'dan başladığını unutmayın) en sonra da günü tanımlamak zorundasınız. Hatta saati de tanımlayabilirsiniz: dokhazır= new Date(99,12,31,23,59,59) İlk üç sayı yine yıl, ay, gün; daha sonra sırayla saat, dakika, saniye tanımlanır.
Şimdi, sayfanızda direkt olarak kullanabileceğiniz bir script örneği verelim. İlk dökümanda "document.lastModified" özelliğini kullanmıştık. Ancak "document.lastModified" direkt olarak kullanıldığında Amerikan formatında, yani "ay/gün/yıl saat" formatında bir yazı oluşturur. Ancak diyelim ki biz "22 Ekim 1977" gibi göstermek istiyoruz. Bu durumda henüz bahsetmediğim "if" cümlelerinden ve "array"lerden (dizilerden) yararlanacağız. Bu örneği büyük bir ihtimalle anlamayacaksınız ama bu konuda çok istek geldiğinden buraya yazıyorum:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- tarih = new Date(document.lastModified); yil = tarih.getYear(); if (yil < 1000){ if (yil < 70){ yil = 2000 + yil; } else yil = 1900 + yil; }
ay = tarih.getMonth()+1; if (ay < 10){ ay ='0' + ay; }
gun = tarih.getDate(); if (gun < 10){ gun ='0' + gun; }
saat = tarih.getHours(); if (saat < 10){ saat='0' + saat; }
dakika = tarih.getMinutes(); if (dakika < 10){ dakika='0' + dakika; }
ayAdi = new Array(12) ayAdi[0] = 'Ocak' ayAdi[1] = 'Şubat' ayAdi[2] = 'Mart' ayAdi[3] = 'Nisan' ayAdi[4] = 'Mayıs' ayAdi[5] = 'Haziran' ayAdi[6] = 'Temmuz' ayAdi[7] = 'Ağustos' ayAdi[8] = 'Eylül' ayAdi[9] = 'Ekim' ayAdi[10] = 'Kasım' ayAdi[11] = 'Aralık'
document.write("Son güncellenme tarihi:" + gun +' ' + ayAdi[ay-1]+' '+ yil + ' - ' + saat +':'+ dakika); // --> </SCRIPT> | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:02 pm | |
| Raslantısal Sayılar Programlama dilleri ve scriptlerde raslantısal sayıların kullanımları genel bir sorundur. Şu anda JavaScript'te 'random' (Raslantı) fonksiyonu yok fakat inanıyorun ki yakın bir gelecekte o da yaratılacaktır. Şu anda ise bazı hilelerle raslantısal sayı kullanabilirsiniz. Aslında bu tam olarak bir hile sayılmaz. Bu gerçekten de birçok programcının kullandığı bir yoldur. Burada işin mantığı raslantısal sayıyı hesaplamak. Makinanızın tarih ve zamanını alıp onu çeşitli şekillerde kullanabilirsiniz. Zaman gayet büyük bir sayıdır ve bu sayıyla bazı hesaplar yapabilirsiniz. Örneğin sinüsünü alıp mutlak değeri ile işlem yapabilirsiniz. Elde edeceğiniz sayı 0 ile 1 arası bir sayıdır. Zaman da her milisaniye değiştiğinden iki tane aynı sayıyı alma riskiniz de olmaz böylece. Eğer kısa bir süre içinde birçok raslantısal sayı hesaplayacaksanız sin()'i tek başına kullanabilirsiniz. Ancak elde edeceğiniz sayı bir sinüs eğrisini takip edecektir. Bu pek de raslantısal sayılmaz, tabii eğer 20 saniyede bir raslantısal sayı elde edecekseniz o ayrı... Bu bir raslantısal sayıdır: 0.9911596996878439
Bu örneğin kaynağı:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function RandomNumber() { bugun = new Date(); sayi = Math.abs(Math.sin(bugun.getTime())); return sayi; } </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- document.write("Bu bir raslantısal sayıdır:", RandomNumber()); // --> </SCRIPT> </BODY> </HTML> Pek tabii ki buradaki random (raslantı) fonksiyonu her durum için mükemmel değildir. Burada amaç olayın ana mantığını anlatmaktır. Şimdi size Maynard Demmon'dan aldığım bir fonksiyonu göstermek istiyorum. Yapmanız gereken limit yerine size gerekli olan sayıyı yazmak. (Gerçekten de aşağıdaki kodda "limit" yazan yeri silip 100 yazmanız gerekiyor. Copy-paste yapıp neden çalışmıyor diye şikayet etmeyin lütfen :^) ) Örneğin limit yerine 100 yazdığınız zaman 0 ile 99 arasında iyi bir raslantısal sayı elde edebileceksiniz. İşte kaynağı: function random() { bugün = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % limit; return num; }
--------------------------------------------------------------------------------
Pencere Yaratmak Pencere yaratmak JavaScript'in harika bir özelliğidir. Kendiniz istediğiniz özellikte pencereler yaratabilir ve bu pencereye HTML dökümanı yazdırabilirsiniz. Şimdi nasıl yeni bir pencere açabileceğinizi ve ona nasıl birşeyler yazabileceğinizi görelim. Eğer aşağıdaki düğmeye basarsanız birazdan açıklayacaklarımın örneğini görebilirsiniz.
Bu seferlik töre ve geleneklere bağlı kalmayarak bu pencereye Hello world! yazmadım :^) İşte kaynak:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function PencereAc() { msg=open("","msj","toolbar=no,directories=no,menubar=no"); msg.document.write("<HEAD><TITLE>Hey!</TITLE></HEAD>"); msg.document.write("<CENTER><h1><B>Çok hoş değil mi?</B></h1></CENTER><br>"); } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" NAME="Button1" VALUE="Buraya Tıklayın" onCLick="PencereAc()"> </FORM> </BODY> </HTML> Bir fonksiyon tanımladık ve her zamanki gibi fonksiyonu çağıran bir düğme yarattık. 'PencereAc' fonksiyonu 'open' (Aç) metodu ile yeni bir pencere açar. İlk tırnaklar pencereye yazılacak sayfanın URL'sini belirtir. Buraya herhangibir adres yazabilirsiniz. Bu durumda açılan yeni pencerede yazdığınız adres ya da dosya çıkacaktır. Eğer herhangi bir sayfa yüklemeyecekseniz JavaScript ile de pencereye yazabilirsiniz. İkinci tırnaklar pencere adını tanımlar. Herhangi bir isim verebilirsiniz fakat tek kelime olmak zorundadır. Bu isim çerçeve (frame) 'lerdeki isimlerle aynı mantıktadırlar. Bu pencere ile yapacağınız tüm işlemler için bu ismi kullanırsınız. Yani hangi pencereyle uğraştığınızı belirtebilmek için bi ad vermelisiniz (ben "msj" verdim, siz "huseyin" verebilirsiniz). Üçüncü tırnaklar pencerenin özelliklerini içerir. Bu gerçekten de ilginçtir. Eğer örneğin 'toolbar' istiyorsanız toolbar=yes yazmanız yeterli olacaktır. Aşağıda bu özellikler ve tanımları yer almaktadır. Bunları yukarıdaki örnekte olduğu gibi kullanmalısınız. toolbar - Back, Forward, Home vs. düğmelerinin bulunduğu kısım location - Adresi yazdığınız kısım directories - Netscape'deki What's New, What's Cool vs. düğmelerinin bulunduğu kısım status - En alttaki küçük pencere(Statusbar) menubar - Netscape'deki location'ın altındaki kısım scrollbars - Sağda ve alttaki sayfayı yukarı aşağı hareket ettiren kısımlar resizable - Pencerenin büyüklüğünün değiştirilebilirliği copyhistory - Ana sayfanın hafızada tuttuğu adresler yeni pencereye aktarılsın mı? width=pixels - Genişlik(Piksel) height=pixels - Yükseklik(Piksel)
Pencerenizi açıp onu msj olarak adlandırdıktan sonra pencerenize yazmaya başlayabilirsiniz. Artık normal HTML komutlarıyla istediğinizi yazabilirsiniz. Ayrıca kullanıcının, hazırladığınız forma girdiklerini yeni pencerenize de yazdırabilirsiniz. Bunun gibi birçok şey yapılabilir.
Lütfen dikkat: Yeni açtığınız pencereye birşey yazarken en son satırın sonuna mutlaka <BR> komutu koyun. Aksi takdirde Netscape'in bazı sürümlerinde yazılar görünmeyebiliyor. Başka bir dip not: Eğer yeni açtığınız pencereye resim koyacaksanız height ve width özelliklerini de <img> komutunun içine yerleştiriniz. Bunun eksikliği yüzünden sayfada resimden kaynaklandığını tahmin edemeyeceğiniz hatalar ortaya çıkabiliyor.
Birçok kişi bana JavaScript ve Frame (Çerçeve)'lerin beraber nasıl çalıştıklarını sordu. İkisini beraber kullanabilmek için öncelikle iki olayı da destekleyen bir alıcı kullanmalısınız.
Başlamadan önce size frameler hakkında biraz bilgi vermek istiyorum. Frame kullanarak sayfanızı herbiri ayrı bir HTML dökümanı gösterecek birkaç parçaya ayırabilirsiniz. Bu parçalar birbirinden ayrı kaynaklara (HTML dosyalarına) sahiptirler. Ancak bu ayrı sayfalar arasında bağlantı vardır. Örneğin iki frame yaratırsınız. Birinde konuları bulundurursunuz, konuya tıklandığında seçilen konu ikinci frame'de gösterilir. Böylece indeks daima göz önünde kalır. Öncelikle size bunun nasıl birşey olacağını göstermek istiyorum. Sadece aşağıdaki tuşa basın ve frame'lerin neye benzediğini görün (Tabii önceden hiç görmediyseniz...). | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:02 pm | |
| İşte dökümanın kaynağı:
<HTML> <HEAD> <title>Frame'ler</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frtest1.html" name="fr1"> <FRAME SRC="frtest2.html" name="fr2"> </FRAMESET> </HTML> Yukarıdaki frtest1.html ve frtest2.html dosyalarında sırasıyla "Birinci Sayfa" ve "İkinci Sayfa" yazıyor.
Öncelikle alıcıya kaç tane frame istediğinizi yazıyorsunuz. Eğer <FRAMESET> içinde rows kullanırsanız sayfa verilen yüzdelerde satırlara ayrılır. Eğer rows yerine cols kullanırsanız verilen yüzdelerde iki sütun elde etmiş olursunuz.
<FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> </FRAMESET>
Bu script iki sütun yaratacaktır ve ikinci sütun 3 eşit satıra bölünecektir. <FRAMESET> komutundaki 50%,50% yazısı yarattığınız hücrelerin büyüklüğünü belirtir.
Frame'lerinize NAME ile ad verebilirsiniz. Bu adlar JavaScript'te de işe yarayacaktır. Böylece bir işlem yapmak istediğinizde istediğiniz frame'i seçebilirsiniz. Yukarıdaki örnekte frame'lerin nasıl ad aldıklarını gördünüz.
--------------------------------------------------------------------------------
Sanırım frame'lerin ana hatlarını anlamak pek de zor değil. Şimdi gelelim javascript içeren yeni bir örneğe:
Bu örnekte ilk frame'deki düğmelere basarak ikinci frame'de yazı yazıldığını görebilirsiniz. İşte kaynağı:
Önce bize gerekli olan çerçeveleri yaratalım. (frames.html):
<HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame1.html" name="fr1" noresize> <FRAME SRC="frame2.html" name="fr2"> </FRAMESET> </HTML>
frame1.html'de şunlar yazmaktadır:
<HTML>
<BODY> Bu bizim ilk frame'imiz! </BODY> </HTML>
frame2.html ise:
<HTML> <HEAD> <script language="JavaScript"> <!-- Hiding function selam() { parent.fr1.document.write("Selam!<br>"); } function hey() { parent.fr1.document.write("Hey!<br>"); } function hebele() { parent.fr1.document.write("Hebele Hubele<br>"); } // --> </script> </HEAD><body> Bu bizim ikinci frame'imiz! <p> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Selam" onClick="selam()"> <INPUT TYPE="button" VALUE="Hey" onClick="hey()"> <INPUT TYPE="button" VALUE="Hebele" onCLick="hebele()"> </FORM> </BODY> </HTML>
Vay! Bu script'ler gittikçe uzun olmaya başladı Peki, burada neler oldu? Öncelikle ilk dosya yükleniyor(frames.html). Bu dosya bize gereken çerçeveleri yaratıyor ve bu çerçevelerin içine dosyaları yüklüyor. Birinci çerçevemize (Adı 'fr1' olan) frame1.html'yi; ikinci çerçevemize de ('fr2') frame2.html'yi yüklüyor. Normal HTML'nin işi burada bitiyor. İkinci çerçevedeki buton'lar önceden tanımlanmış olan fonksiyonları çağırıyor. Bu fonksiyonlar üstteki frame'de istenilen yazıyı yazıyor. Eğer "document.write("Selam!<br>");" şeklinde yazılsaydı frame2.html'in içeriği değişecekti. Dökümanın başında anlattığımız düğme yaratma ve onClick özelliğini artık biliyorsunuz. Ancak parent.fr1... de ne demek?
Eğer daha önce 'obje'leri gördüyseniz bu size yeni olmayacaktır. Yukarıda gördüğünüz gibi frame1.html ve frame2.html frame.html tarafından çağırılmıştır. Bu yüzden frame.html'ye baba (parent), frame1.html ve frame2.html'ye de çocuk (child) diyoruz. Bu hiyerarşi içinde değişik frame'ler arasında bağlantı kurulabilir. Bu fikri size Ascii sanatını kullanarak bir grafik ile anlatmanın daha iyi anlamanız açısından faydalı olacağına inanıyorum...):
frames.html parent (Baba) / \ / \ / \ fr1(frame1.html) fr2(frame2.html) children (Çocuk)
Bu içeriği daha da genişletmek de mümkündür tabii ki. 'torun' da yaratabilirsiniz. (Bu resmi bir ad değildir!).
frames.html parent (Baba) / \ / \ / \ fr1(frame1.html) fr2(frame2.html) children (Çocuk) / \ / \ / \ gchild1 gchild2 'grandchildren' (Torun)
Eğer baba, yani parent frame'de herhangibir şeyi frame2.html'den alıp işleme sokacaksanız bu durumda fonksiyonu çağırırken 'parent' ifadesini kullanmak zorundasınız. Alacağınız 'herhangibir şey'in adresi de 'parent' ifadesinden hemen sonra koyacağınız 'fr1' ifadesiyle alıcınıza anlatılır. (Bu ifadeleri birbirinden ayırmak için nokta (.) kullanılır.) Peki neden 'fr1' de başka birşey değil ? Aslında fr1'in hiçbir özelliği yok. Bu sadece frame'e (çerçeveye) verilen addır. Bu adı ben rasgele seçtim. Bu ad eğer hatırlarsanız frame.html'de tanımlanmıştı. Bundan sonrası da zaten çok kolay. Peki frame1.html'den frame2.html'deki fonksiyonu doğrudan nasıl çağırabiliriz? Muhteşem grafiğimde de gördüğünüz gibi frame1.html ile frame2.html arasında doğrudan hiçbir bağ yoktur. Yani mutlaka parent (Baba) frame üzerinden dolaşmanız gerekli. Bu yüzden yazdırmak istediğimiz yazıyı yazdırırken 'parent.fr1' demek zorunda kalıyorsunuz. | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:02 pm | |
| Bir frame yarattığınız zaman yeni link'e bağlanırsanız frame yok olmaz. Eğer kullanıcı sayfanızda kalırsa problem yok. Mesela bir konu kısmı yarattınız. Seçilen konu yandaki boş frame'de görülüyor. Ancak eğer bu konulardan biri ya da fazlası başka bir internet adresindeyse konu kısmı istenmeyebilir. Bu durumda frame'i nasıl kaldıracaksınız?
Yapmanız gereken <a href...> komutunuza bir TARGET="_top" ifadesi eklemektir. Bu durumda izlenen bu link frame'siz bir sayfada oluşacaktır.
Tabii ki konu kısmındaki tüm link'ler dışarı bağlanıyor olabilir. Bu durumda sayfanızdaki <HEAD> komutları arasına bir <BASE TARGET="_top"> komutu ekleyebilirsiniz. Bu tüm link'lerin frame'siz bir sayfada görüneceğini belirtir. | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:03 pm | |
| Java Script''te Değer Girişi
Java Script''te alert komutunu bir çıkış komutu olarak düşünürsek bunun karşılığı olan giriş komutu prompt komutudur. Bu komut
adsoyad=prompt("Adınızı ve soyadınızı giriniz","");
şeklinde kullanılır ve kullanıcı tarafından girilen değer adsoyad isinmli değişkene atanır.
Java Script''te Değişkenler Java Script''te değişkenlere diğer diller gibi bir değişken tipi atamak zorunda değiliz. Daha sonra bu değişkeni eşitlediğiniz değere göre bir tip alacaktır.
JScript''te değişken tipleri olmadığı gibi bir dizi tanımı da yoktur. Bir dizi oluşturmak için basit bir foksksiyon yazmamız ve daha sonra kaç elemanlı dizi açmak istiyorsak bu fonksiyona onu parametre olarak göndermemiz gerekecektir. Bu fonksiyon şu şekilde olabilir:
function makearray(n) { this.lenght=n; for( var i=1;i<=n;i++) { this[i]=0; return this; } }
Daha sonra da dizimize vermek istediğimiz ismi ve uzunluğunu bu fonksiyona göndermemiz gerekecek. Yani
dizi= new makearray(20);
dediğimizde 20 elemanlı ve her elemanı 0 olan bir dizi oluşturalacaktır.
Tabi ki bu ilk değeri olmayan veya çok uzun bir dizi yaratmak için aksi halde Array komutuyla da bir dizi yaratılabilir. Şöyle ki:
dizi = Array("Ali","Ayse","Selim","Yahya","Kemal");
Burada dikkat edilmesi gereken nokta dizi elemanlarına ulaşırken diziadı[indexno] syntax''ı ve dizi index numaralarının( biz aksini belirtmedikçe) 0''dan başladığıdır. Bu arada bir değişkene string değer atandığı zaman o değişkenin otomatik olarak bir karakterler dizisi olarak algılanmayacağı da önemli bir özelliktir. Yani;
ad="Serdar";
şeklinde bir tanımlamada ad[1]=S , ad[2]=e ... olmayacaktır.
Bir stringin içinden bir harfi ya da harf grubunu almak istediğimizde kullanmamız gereken komut substring komutudur.
harf=ad.substring(0,1);
yazdığımızda harf değişkeni S harfini içerecektir. Buradaki parametrelerden 0, kaçıncı karakterden başlanacağını 1 ise kaçıncı karaktere kadar alınacağını gösterir.(1 hariç)
Yani harf=ad.substring(0,2) deseydik harf değişkeni "Se" değerini içerecekti.
Bu işlemin tam tersi de mümkündür. Yani girilen bir karakterin kaçıncı karakter olduğunu bulmak. Bunun için de indexOf komutunu kullanıyoruz.
sayi=ad.indexOf("e");
yazdığımızda sayi değişkenine 2 değeri atanır.
Ayrıca bu değişkenin uzunluğunu bulmak için lenght komutu kullanılır.
sayi=ad.lenght;
dediğimizde sayi değişkeninde 6 değeri bulunacaktır.
Java Script Eklemek Bir Web sayfasında JScript ile kod yazabilmek için ilk önce tarayıcımıza kullanacağımız script dilini tanıtmamız gereklidir.
tag''leri tarayıcımıza komutların HTML değil JScript olduğunu gösterir.Bu satırları eklemememiz halinde tarayıcı komutları tanımayacağından JScript komutlarımız dökümanın bir parçası olarak algılanacak ve ekranda görünecektir.
Unutmamamız gereken noktalar tüm fonksiyonların ve blokların { ve } işaretleri arasında yazılması gerektiği ve her komut satırından sonra ; (noktalı virgül) işaretinin koyulması gerektiğidir.
Ayrıca JScript kodları her tarayıcının her sürümünde doğru olarak çalışmayacağı için özellikle eski tarayıcılarda hata verecektir. Bunu engellemek için.
Java Script''te Karşılaştırma İşlemi Conditional statement veya If statement olarak bilinen komut grubu yani IF-THEN-ELSE JScript''te de mevcuttur. Bu komut grubu bir değerle bir diğerini karşılaştırıp sonuca göre farklı işlemler yapmamızı sağlar. Şimdi az önceki örnekte olduğu gibi kullanıcıdan ismini girmesini isteyelim ve bir karşılaştırma yapalım. Dikkat etmemiz gereken nokta aynı C dilinde olduğu gibi then komutunu kullanmamamızdır.
adsoyad=prompt("Adınızı ve soyadınızı giriniz","");
if(adsoyad=="Serdar Kalaycı") alert("Hosgeldin Serdar");
else alert("Seni Tanımıyorum");
Burada bahsedilmesi gereken bir diğer konu da karşılaştırma operatörleri ve mantıksal operatörler. Karşılaştırma operatörleri:
Denk ==
Eşit değil !=
Küçük <
Büyük >
Küçük veya Eşit <=
Büyük veya Eşit >=
Mantıksal operatörler:
Ve &
Veya |
Değil !
XOR ^
Bir de birden fazla karşılaştırmayı birleştirmek için
Ve &&
Veya ||
Ayrıca ++ operatörü birer birer artırmak için ve – operatörü de birer birer azaltmak için kullanılır.
operatörlerini kullanabiliriz. Dikkat edilmesi gereken nokta bir adet = operatörünün eşitleme iki adet ==operatörünün karşılaştırma işleminde kullanılması gerektiği ve ! operatörünün her yerde değil anlamı taşıdığıdır. Yani ! operatörü diğer operatörlerle birlikte değil anlamı vermek üzere kullanılabilir.
Java Script''te Link Yönetimi Her ne kadar linkleri HTML kullanarak yaratmak mümkünse de gelişmiş uygulamalarda gidilecek sayfalara parametre aktarımı yapabilmek için linki JScript''le oluşturmak gerekebilir. Bunun için JScript''te window.location.href komutu kullanılır.
Örnek olarak Java.htm isimli sayfaya gitmek için bu komutun kullanımı:
window.location.href="java.htm";
olacaktır. Tırnak işaretleri arasına URL girmek te mümkündür.
window.location.href="http://www.domainadi.com";
Java Script''te Sayfaya Yazı Yazdırmak Java Script kullanarak ekrana yazı yazdırmak document.write komutu ile yapılır. Kullanımı ise:
window.document.write("Merhaba Dünya !");
şeklindedir.
window.document kodu nesnemizin şu anda açık olan sayfamız olduğunu anlatır. Write komutu ait olduğu nesneye yazılmasını sağlar. Parametreleri ise parantezler arasına verilir. Eğer yazdırmak istediğimiz metni kodun içinde gireceksek metni "...." tırnak işaretlerini kullanarak girmemiz gereklidir. Ayrıca + işaretini kullanarak birden fazla giriş yapmak ta mümkündür.
window.document.write("Merhaba" + "Dünya");
veya isim, kullanıcının ismini taşıyan bir değişken olmak üzere
window.document.write("Merhaba" + isim);
yazmamız halinde bu ayrı metinler aralarında bir boşluk karakteri bırakılmak üzere ard arda yazılacaktır. Ayrıca JScript''le yazdıracağımız metinleri HTML kodlarıyla şekillendirmemiz mümkündür.
window.document.write("
Merhaba Dünya ")
Java Script''te Döngüler For Döngüsü
for (var i=0;i<10;i++) { window.write("Şu anda" + i + ". numaradasınız"); if (i==5) window.write("Yarısına geldiniz bile"); }
döngüsünde önce i değişkenine 0''dan başlaması gerektiğini, i 10''dan küçük olduğu sürece devam edeceğini ve i''nin birer birer artacağını söylüyoruz. Bu şartlarda ekrana "Şu anda 1. numaradasınız" , "Şu anda 2. numaradasınız" gibi mesajlar gelecek i, 5 olduğunda ise ayrıca "Yarısına geldiniz bile" mesajı gelecektir.
While Döngüsü
Bir döngüye ihtiyaç duyduğunuzda döngü içindeki işlemlerin kaç kere yapılması değil de bir durum gerçekleştiği sürece yapılması önemliyse while döngüsü kullanılır.
isim=array(""Ali","Ayse","Selim","Yahya","Kemal"); i=0; j=0; while(i != 1) { if isim[j]=="Yahya" i=1; j++; }
kodunda dizide "Yahya" ismini bulmak için bir döngü yarattık. Yahya ismini bulduktan sonra döngüde kalması programın yavaş çalışmasını sağlayacağından döngüyü 0''dan 4''e kadar for döngüsü yerine bir kontrol elemanının değerine bağladık. Yahya ismi bulununca kontrol değeri 1 yapıldı ve döngüden çıkıldı. J değeri ise Yahya isminin kaçıncı eleman olduğunu gösteren rakamın bir fazlasında kaldı.
Break Komutu
Herhangi bir şart gerçekleştiğine döngüden anında çıkmamız gerekiyorsa break komutunu kullanırız. Deminki örnekte Yahya ismini bulduğumuz halde kontrol döngünün başında olduğu için j bir kez daha artırıldı ve olmasını istediğimiz değerden bir fazla oldu. Oysa ki scripti şöyle yazsaydık:
isim=array(""Ali","Ayse","Selim","Yahya","Kemal"); i=0; j=0; while(i != 1) { if isim[j]=="Yahya" { i=1; break; } j++; }
Yahya ismi bulununca break komutuyla döngüden çıkacak ve j bir kez daha boşu boşuna artırılmamış olacaktır. _________________ .... | |
| | | zamankop Süper Moderatör
Mesaj Sayısı : 531 Yaş : 31 Ruh Hali : Takım : Kayıt tarihi : 30/09/08
| Konu: Geri: JavaScript Nedir? 10/2/2008, 1:03 pm | |
| Netscape Navigator 2.0 ile birlikte Brendan Eich tarafından geliştirilen ve önceleri Mocha daha sonra LiveScript olarak adlandırılan ve en sonunda şu anki adını alan JavaScript dili başlangıçta sadece istemci taraflı (client-side) yorumlanan (interpreted) bir dildir. Aralık 1995 tarihinde, C dilinin tarayıcılara uyarlanmış hali diyebileceğimiz JavaScript piyasaya sürüldü. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılmaktadır. Ad benzerliğine karşın 'Java' ile ilişkili değildir. Yaygın yanlışlardan biri JavaScript'in basitleştirilmiş Java olarak tanımlanmasıdır. Başlangıçta yalnız Netscape tarayıcıları üstünde çalışan JavaScript artık tüm yaygın ağ taraycıları tarafından desteklenmekte. Microsoft JavaScript'e benzer bir dil olan JScript'i geliştirdi. Microsoft Internet Explorer her iki dili de desteklerken standart olmayan JScript eklentileri diğer tarayıcılar üstünde çalışmamaktadır. JavaScript Netscape'ten Brendan Eich tarafından geliştirilmiş ve önceleri Mocha ve LiveScript olarak anılmıştır, daha sonra JavaScript adını almıştır. İlk olarak Aralık 1995'te Netscape tarayıcısıyla birlikte görücüye çıkmıştır. Örnek olarak, JavaScript'te "Merhaba Dünya!" programı sunabiliriz: //HTML'e gömülmüş örnek <html> <body> <script type="text/javascript"> //programlama dilinin JavaScript olduğunu belirtir. document.write(" www.forumgunu.com!"); //JavaScript kodu burada biter </script> </body> </html> Bu örneği uyarı ile de yapabilirdik: //HTML'e gömülmüş örnek <html> <body> <script type="text/javascript"> //programlama dilinin JavaScript olduğunu belirtir. window.alert(" www.forumgunu.com!"); //JavaScript kodu burada biter </script> </body> </html> | |
| | | | JavaScript Nedir? | |
|
Similar topics | |
|
| Bu forumun müsaadesi var: | Bu forumdaki mesajlara cevap veremezsiniz
| |
| |
|
|